web-dev-qa-db-fra.com

Flutter - Comment mélanger une image avec une couleur dégradée?

J'essaie de répliquer une conception d'écran de connexion réalisée par mon concepteur pour une application.

L'image d'arrière-plan utilise un blendMode de softLight, le hic est que la couleur avec laquelle elle se mélange est une couleur dégradée. Deuxièmement, il y a en fait deux couches de dégradés différents (un dégradé violet, un dégradé bleu)

Image originale:

Original Image

Image du dégradé final

Final Gradient Image

Maintenant, j'ai essayé d'utiliser colorBlendMode, par exemple.

Image.asset(
      'assets/Pioneer-party.jpg',
      fit: BoxFit.cover,
      color: Color(0xff0d69ff).withOpacity(1.0),
      colorBlendMode: BlendMode.softLight,
    ),

Le problème est que la propriété color ne prend qu'une seule couleur.

J'ai ensuite essayé BoxDecoration, par ex.

DecoratedBox(
      decoration: new BoxDecoration(
        color: const Color(0xff7c94b6),
        image: new DecorationImage(
          fit: BoxFit.cover,
          colorFilter: new ColorFilter.mode(Colors.purple.withOpacity(1.0), BlendMode.softLight),
          image: new NetworkImage(
            'http://www.allwhitebackground.com/images/2/2582-190x190.jpg',
          ),
        ),
      ),
    ),

Ce qui me laisse toujours avec le même problème. J'ai ensuite essayé d'empiler chaque couche individuellement, puis de jouer avec les dégradés pour les faire apparaître proches du design, par exemple.

Image.asset(
      'assets/Pioneer-party.jpg',
      fit: BoxFit.cover,
      color: Color(0xff0d69ff).withOpacity(1.0),
      colorBlendMode: BlendMode.softLight,
    ),
    DecoratedBox(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: FractionalOffset.topCenter,
          end: FractionalOffset.bottomCenter,
          colors: [
            Color(0xff0d69ff).withOpacity(0.0),
            Color(0xff0069ff).withOpacity(0.8),
          ],
        ),
      ),
    ),
    DecoratedBox(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: FractionalOffset.topLeft,
          end: FractionalOffset.bottomRight,
          colors: [
            Color(0xff692eff).withOpacity(0.8),
            Color(0xff642cf4).withOpacity(0.8),
            Color(0xff602ae9).withOpacity(0.8),
            Color(0xff5224c8).withOpacity(0.8),
            Color(0xff5e29e5).withOpacity(0.8),
          ],
        stops: [0.0,0.25,0.5,0.75,1.0]
        ),
      ),
    ),

Ce qui me donne un peu près de ce que je veux, mais pas tout à fait ce dont j'ai besoin.

Quelqu'un connaît-il un moyen d'y parvenir?

MODIFIER:

Je pensais également à mélanger les deux images, mais je n'ai pas trouvé de moyen de le faire, sauf en utilisant l'opacité ou quelque chose. Idéalement, il souhaiterait qu'il soit rendu en mode natif plutôt que d'utiliser des "hacks" pour y parvenir.

dartfluttergradientblend-mode
10
Robert Stevens

Utilisez Stack pour obtenir cet effet, c'est très facile.

   Stack(children: <Widget>[
        Container(
          decoration: BoxDecoration(
            color: Colors.transparent,
            image: DecorationImage(
              fit: BoxFit.fill,
              image: AssetImage(
                'images/bg.jpg',
              ),
            ),
          ),
          height: 350.0,
        ),
        Container(
          height: 350.0,
          decoration: BoxDecoration(
              color: Colors.white,
              gradient: LinearGradient(
                  begin: FractionalOffset.topCenter,
                  end: FractionalOffset.bottomCenter,
                  colors: [
                    Colors.grey.withOpacity(0.0),
                    Colors.black,
                  ],
                  stops: [
                    0.0,
                    1.0
                  ])),
        )
      ]),

À votre santé

17
Abhishek Razy

Vous pouvez également essayer ceci:

ColorFiltered(
  colorFilter: ColorFilter.mode(Colors.red.withOpacity(0.4), BlendMode.srcOver),
  child: YourWidget(),
)
2
CopsOnRoad