flutter - How to create a blur with a linear gradient in Flutter

Question

I am trying to create a widget inside of Flutter that will act like the BackdropFilter widget and blur anything behind it. Although unlike the BackdropFilter, this blurrness should not be distributed evenly but instead progressively increase in blur linearly.

Does anyone have any ideas. Thanks

标签： fluttergradientblur

Answer 1

现在似乎可以使用新的ImageFilteredWidget。

我通过这个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),
               )
     ),
   ])