Flutter - How to blend an image with a gradient colour?

Question

I am attempting to replicate a login screen design my designer did for an app.

The background image uses a blendMode of softLight, the catch is that the colour it blends with is a gradient colour. Secondly there is actually two layers of different gradients (one purple gradient, one blue gradient)

Original Image:

Final Gradient Image

Now I have tried using colorBlendMode, e.g.

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

The problem is that the color property only takes a single colour.

I then tried BoxDecoration, e.g.

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',
          ),
        ),
      ),
    ),

Which still leaves me with the same problem. I then tried stacking each layer individually and then playing around with gradients to make it appear close to the design, e.g.

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]
        ),
      ),
    ),

Which gives me somewhat close to what I want, but not entirely what I need.

Does anyone know of a way to achieve this?

EDIT:

I was also thinking about blending the two images together, but haven't found a way of doing that except using opacity or something. Ideally would like it to be rendered natively rather than using "hacks" to achieve it.

I'm not able to write a full answer at the moment but I'd advise you to look into using CustomPaint and the canvas. Using the canvas you can draw gradients & images to your heart's content and then apply filters while merging the layers. It'll be a bit of an expensive draw but should be alright if everything is static. If you have things moving around then maybe I can reevaluate at some point. But then again - if the image is static, why wouldn't you just merge it in photoshop first and use the final image =D. — rmtmckenzie
Hi @rmtmckenzie thanks for the input. The image will be static, but we want to use this effect throughout the app, so at various places the same effect will apply but a different background image will be used. otherwise yeah i would definitely rather use a photoshop image and get done with it haha. — Robert Stevens
Okay then you should be able to do what you want with CustomPaint. Once you figure out the semantics of the boilderplate needed for it, the Canvas itself acts very much like a Canvas in other languages, so if you're familiar with them you should be able to figure it out. If not, that's what we're here for! — rmtmckenzie

Abhishek Razy Abhishek Razy · Accepted Answer · 2018-11-06T19:45:53

Use Stack to Get this Effect Its Very easy.

   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
                  ])),
        )
      ]),

Cheers

Flutter - How to blend an image with a gradient colour?

2 Answers