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.

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:

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;
}
Flutter — Backdrop Filter
Flutter — Backdrop Filter

Leave a Reply

Your email address will not be published. Required fields are marked *