How to create a blur with a linear gradient in Flutter
2,086
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),
)
),
])
![Lachlan](https://lh4.googleusercontent.com/-iqkH_cSqnsA/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rfqP5K-JP5eOtKkB8NUnG06l8ijpA/photo.jpg?sz=256)
Author by
Lachlan
Updated on December 18, 2022Comments
-
Lachlan over 1 year
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