Flutter-如何将图像与渐变色融合?

我正在尝试复制设计师设计的应用程序登录屏幕.

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

背景图像使用softLight的blendMode，要注意的是它与之混合的颜色是渐变色.其次，实际上存在两层不同的渐变(一层是紫色渐变，一层是蓝色渐变)

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)

原始图片:

最终渐变图像

现在我已经尝试使用colorBlendMode，例如

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

问题在于color属性只能采用一种颜色.

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

然后我尝试了BoxDecoration，例如

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?

我也在考虑将两个图像融合在一起，但是除了使用不透明性之外，没有找到其他方法.理想情况下，它希望本机呈现而不是使用"hacks"来实现.

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.