How do I blur a widget in Flutter

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 the above Container.

Answer 1

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.