How do I blur a widget in fluttter

Question

I need to blur a widget for example a simple Container.
How do I blur it.

new Container(

  child: new Text('hello I am here'),

  height: 100.0,

  width: 100.0,

  color: Colors.red,

)

consider above Container.

Answer 1

You can create a Stack like:

First child: What you want to blur (in your case: Container)

Third child: What you want to show above the blur widget (optional)

In your BackdropFilter, set filter: ImageFilter.blur(5.0, 5.0)

5.0 is amount of blur you wish.

Sign up