Flutter 模糊图像顶部的渐变（颤振）

我想要一个像第二个屏幕截图中那样的背景褪色的设计。因此，模糊背景图像的上半部分已经很好了，只是下半部分缺少了固定颜色（如黑色或白色）的渐变

澄清一下：我只希望背景淡入黑色，而不影响顶层（在本例中是未触及的图像）。我花了很长时间试图找到一个合适的解决方案，但不幸的是，我没有找到任何解决方案

当前状态：

目标：

当前代码（第一个屏幕截图）：

---

您可以使用和来实现这一点

我已经用简单的NetworkImage替换了CachedNetworkImageProvider，这样代码就可以工作了。原则不变：

import 'dart:ui';
import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(
                'https://picsum.photos/id/255/1440/3200',
              ),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Container(
          constraints: BoxConstraints.expand(),
          decoration: BoxDecoration(
              color: Colors.white,
              gradient: LinearGradient(
                  begin: FractionalOffset.topCenter,
                  end: FractionalOffset.bottomCenter,
                  colors: [Colors.black.withOpacity(0.0), Colors.black],
                  stops: [0.0, 1.0]
              )
          ),
        ),
        BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
            child: Center(
              child: Padding(
                padding: const EdgeInsets.all(80.0),
                child: Hero(
                    tag: 'heroTag',
                    child: Image.network(
                      'https://picsum.photos/id/255/1440/3200',
                    )
                ),
              ),
            )
        ),
      ],
    );
  }
}

导入“dart:ui”；
进口“包装：颤振/材料.省道”；
最终颜色深蓝色=颜色。来自argb（255,18,32,47）；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
主题：ThemeData.dark（）.copyWith（脚手架背景颜色：深蓝色），
debugShowCheckedModeBanner:false，
家：脚手架(
正文：中(
子项：MyWidget（），
),
),
);
}
}
类MyWidget扩展了无状态Widget{
@凌驾
小部件构建（构建上下文）{
返回堆栈(
儿童：[
容器(
装饰：盒子装饰(
图像：装饰图像(
图片：NetworkImage(
'https://picsum.photos/id/255/1440/3200',
),
适合：BoxFit.cover，
),
),
),
容器(
约束：BoxConstraints.expand（），
装饰：盒子装饰(
颜色：颜色，白色，
梯度：线性梯度(
开始：分馏loffset.topCenter，
结束：分馏loffset.bottomCenter，
颜色：[颜色.黑色.不透明度（0.0），颜色.黑色]，
停止：[0.0，1.0]
)
),
),
背投滤波器(
过滤器：ImageFilter.blur（sigmaX:5，sigmaY:5），
儿童：中心(
孩子：填充(
填充：常数边集全部（80.0），
孩子：英雄(
标签：“heroTag”，
孩子：Image.network(
'https://picsum.photos/id/255/1440/3200',
)
),
),
)
),
],
);
}
}

您可以调整颜色并停止，以获得您想要的效果

最终结果：

---

您可以移除第二个容器，只需向第一个容器添加线性渐变，如

foregoundDecoration

，谢谢。正是我所寻找的：-）

import 'dart:ui';
import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(
                'https://picsum.photos/id/255/1440/3200',
              ),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Container(
          constraints: BoxConstraints.expand(),
          decoration: BoxDecoration(
              color: Colors.white,
              gradient: LinearGradient(
                  begin: FractionalOffset.topCenter,
                  end: FractionalOffset.bottomCenter,
                  colors: [Colors.black.withOpacity(0.0), Colors.black],
                  stops: [0.0, 1.0]
              )
          ),
        ),
        BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
            child: Center(
              child: Padding(
                padding: const EdgeInsets.all(80.0),
                child: Hero(
                    tag: 'heroTag',
                    child: Image.network(
                      'https://picsum.photos/id/255/1440/3200',
                    )
                ),
              ),
            )
        ),
      ],
    );
  }
}