Filtering the wrongs!!

Ever wondered how to blur an image or any child widget in Flutter. 

Well, you are reading the correct article.!!!

(Part One)

  1. Approach One :

Take a Container widget, which allows access to the color property. Play around with this property in terms of Opacity.


2. Use Backdrop Filter :

As per the documentation, BackdropFilter is

A widget that applies a filter to the existing painted content and then paints child.

Flutter — BackdropFilter.
Flutter — BackdropFilter.

In the top part of the screenshot, we are using the Flutter image.

However, blurring of the image is handled by the BackdropFilter. We can use this widget as below:

filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: Container(color:,

ImageFilter.blur is responsible for blurring.

Keep in mind, the blurring effect is relatively expensive, especially if the filter is non-local, such as a blur.

(Part Two)

As the user clicks on any option we need to render something (in our case widgets)…

  1. Using PopupRoute (May be correct)

As the documentation says: “A PopupRoute is a modal route that overlays a widget over the current route”.

class _PopupItemRoute extends PopupRoute {

bool get barrierDismissible => true;

Widget buildPage(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation) {
return //YOUR WIDGET;

2. Using overlays (Personal recommendation)

  • Instantiate an Overlay
  • Create OverlayEntry
  • Insert OverlayEntry

How to instantiate an Overlay

//Inserts the widgets in the overlay entry.
OverlayEntry _overlayEntry;
//Maintains the overlay state.
OverlayState overlayState;

How to create and insert Overlay Entry…

void _insertOverlayEntry() async {
_overlayEntry = OverlayEntry(
builder: (context) {
return //YOUR WIDGET;

How to remove Overlay Entry…

void _removeOverlayEntry() {
_overlayEntry = null;
Flutter — Backdrop Filter
Flutter — Backdrop Filter

Valuable comments