How do I blur a widget in fluttter
Here is sample code:
import 'dart:ui' as ui;
Widget backdropFilterExample(BuildContext context, Widget child) {
return Stack(
fit: StackFit.expand,
children: <Widget>[
child,
BackdropFilter(
filter: ui.ImageFilter.blur(
sigmaX: 8.0,
sigmaY: 8.0,
),
child: Container(
color: Colors.transparent,
),
)
],
);
}
Google also has sample code on:
https://api.flutter.dev/flutter/widgets/BackdropFilter-class.html
You can create a Stack like:
First child: What you want to blur (in your case: Container)
Second child: BackdropFilter
And within the second child (BackdropFilter), there is the parameter child, which is used to insert a widget into the tree, that will not be affected by the BackdropFilter.
In your BackdropFilter, set filter: ImageFilter.blur(5.0, 5.0)
5.0 is amount of blur you wish.
I use BackdropFilter
and Position.fill
examples:
import 'dart:ui' as ui;
Widget buildBlur({@required BuildContext context, @required Widget child}) {
return Stack(
children: <Widget>[
child, // Your child
Positioned.fill(
child: BackdropFilter(
filter: ui.ImageFilter.blur(
sigmaX: 1.0,
sigmaY: 1.0,
),
child: Center(
child: XedProgress.indicator(), // replace your loading widget
),
),
)
],
);
}