我试图复制我的设计师为应用程序所做的登录屏幕设计.

背景图像使用了softLight的blendMode,其结果是它与之混合的颜色是渐变颜色.其次,实际上有两层不同的渐变(一个紫色渐变,一个蓝色渐变)

原始图片:

最终的渐变图像

现在我尝试使用colorBlendMode,例如

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

问题是颜色属性只需要一种颜色.

然后我尝试了BoxDecoration,例如

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

这仍然让我遇到同样的问题.然后,我尝试单独堆叠每个图层,然后使用渐变来使其看起来接近设计,例如

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

我正在尝试在 Flutter 内部创建一个小部件，其作用类似于 BackdropFilter 小部件并模糊其后面的任何内容。尽管与 BackdropFilter 不同，这种模糊度不应均匀分布，而应逐渐线性增加模糊度。

有没有人有什么想法。谢谢

如何将整页渐变置于图像之上？

我希望达到的目标：

我试过的：

我尝试了一个带有两个堆叠 BackdropFilter 的容器，但这似乎不起作用。

class HomePage extends StatelessWidget {
  // Color gradientStart = Colors.transparent;
  // Color gradientEnd = Colors.black;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [gradientStart, gradientEnd],
            begin: FractionalOffset(0, 0),
            end: FractionalOffset(0, 1),
            stops: [0.0, 1.0],
            tileMode: TileMode.clamp
          ),
          // child: BackdropFilter()
          // image: DecorationImage(
          //   image: ExactAssetImage('assets/images/screen-1.jpg'),
          //   fit: BoxFit.cover,
          // ),
        ),
        child: Column(
            children: [
              Expanded(
                child: Container(
                  child: Align(
                    alignment: FractionalOffset(0.5, 0.0),
                    child: Container(
                      margin: EdgeInsets.only(top: …