如何在 Flutter 中使用线性渐变创建模糊答案

【问题标题】：How to create a blur with a linear gradient in Flutter如何在 Flutter 中使用线性渐变创建模糊
【发布时间】：2020-02-19 23:58:58
【问题描述】：

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

有没有人有任何想法。谢谢

【问题讨论】：

标签： flutter gradient blur

【解决方案1】：

现在看来可以了，使用新的ImageFiltered Widget。

我通过thisGitHub评论找到了一个代码示例：

Stack(
   alignment: Alignment.bottomCenter,
   fit: StackFit.expand,
   children: <Widget>[
    Image.network(
             image,
             fit: BoxFit.cover,
             alignment: Alignment.bottomCenter),
      ImageFiltered(
               imageFilter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
               child: ShaderMask(
                 shaderCallback: (rect) {
                   return LinearGradient(
                       begin: Alignment.topCenter,
                       end: Alignment.bottomCenter,
                       colors: [Colors.black, Colors.black.withOpacity(0)],
                       stops: [0.4, 0.75]).createShader(rect);
                 },
                 blendMode: BlendMode.dstOut,
                 child: Image.network(
                     image,
                     fit: BoxFit.cover,
                     alignment: Alignment.bottomCenter),
               )
     ),
   ])

【讨论】：

尝试在此处发布代码示例的相关部分，一段时间后外部链接可能不再起作用。
谢谢，尽管知道如何将这种模糊应用到我的小部件而不是图像上？
@Lachlan 不幸的是，我认为使用上面的代码是不可能的。我不知道怎么做。
这是一项伟大的工作，伙计。非常感谢您的回复。