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.

Answer 1

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

Answer 2

You can try this too:

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