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

Answer 1

It seems possible now, using the new ImageFiltered Widget.

I found an example of the code through this GitHub comment:

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