Flutter - How to blend an image with a gradient colour? : <p>I am attempting to replicate a login screen design my designer did for an app.</p>

<p>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)</p>

<p><strong>Original Image:</strong></p>

<p><a href="https://i.stack.imgur.com/PQJxo.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/PQJxo.jpg" alt="Original Image"></a></p>

<p><strong>Final Gradient Image</strong></p>

<p><a href="https://i.stack.imgur.com/AHsaL.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/AHsaL.jpg" alt="Final Gradient Image"></a></p>

<p>Now I have tried using colorBlendMode, e.g.</p>

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

<p>The problem is that the color property only takes a single colour.</p>

<p>I then tried BoxDecoration, e.g.</p>

<pre><code>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',
          ),
        ),
      ),
    ),
</code></pre>

<p>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.</p>

<pre><code>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]
        ),
      ),
    ),
</code></pre>

<p>Which gives me somewhat close to what I want, but not entirely what I need.</p>

<p>Does anyone know of a way to achieve this?</p>

<p>EDIT:</p>

<p>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.</p>
