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

Question

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

有人有什么想法吗？谢谢

Answer 1

现在似乎可以使用新的

ImageFiltered

小部件。

我通过this GitHub评论找到了代码示例：

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

Answer 2

使用 LinearGradient 并将不透明度设置为颜色：

Container(
    height: 200,
    decoration: BoxDecoration(
    gradient: LinearGradient(
    colors: [
        const Color(0xFF1A1A1D).withOpacity(0),
        const Color(0xFF1A1A1D).withOpacity(1)
    ],
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    )),
)