title: Flutter - How to blend an image with a gradient colour?
body: <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>