Flutter - BackdropFilter

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.

Container(
  height: //SPECIFY HEIGHT,
  width: //SPECIFY WIDTH,
  color: Colors.black.withOpacity(0.3),
),

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.

---

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:

BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
        child: Container(color: Colors.black.withOpacity(0)),
)

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 {
      _PopupItemRoute();
            
      @override
      bool get barrierDismissible => true;

      @override
      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;
    },

    overlayState.insert(_overlayEntry);
);

How to remove Overlay Entry…

void _removeOverlayEntry() {
    _overlayEntry?.remove();
    _overlayEntry = null;
  }