How to make blur effect in Flutter using BackdropFilter & ImageFilter

Apply blur effect in a dynamic region over multiple widgets below (Android logo & Flutter logo)

Flutter makes it much easier to create blur effect with the help of BackdropFilter and ImageFilter.blur. If you haven’t known about it the yet, let’s take a look on BackdropFilter (Flutter Widget of the Week) video.

Here is the final code repo:

fluttervn/flutter_blur_demo

And demo video:

I’ll show you some samples of blur effect using BackdropFilter.

1. Blur the Container with image as decoration.

https://github.com/fluttervn/flutter_blur_demo/blob/master/lib/blur_single_image.dart

It looks simple: just create a Container with decoration from an image resource (from assets or network), then add a BackdropFilter as its However BackdropFilter must come with a ImageFilter.blur. In case you want to add an overlay above the blur effect, let add an extra layer is Black color with opacity as child of BackdropFilter.

In below image, the left with no blur effect, the central is blur with sigmaX=5.0, sigmaY=5.0, the right is same as central but with opacity=0.2.

Blur the Container with image as decoration.

2. Blur multiple widgets

In case the background to be blurred is not a decoration, or it’s a single or multiple widgets, we’re still able to use the sample approach as before: insert a BackdropFilter above it using a Stack. However, both needs to have the same size, thus the latter should be wrapped into a Container with equal size as the former.

Therefore, the correct widget tree must be: Stack > [Widget1ToBlur, Widget2ToBlur, …, Container > BackdropFilter]. More details in the sample code below.

https://github.com/fluttervn/flutter_blur_demo/blob/master/lib/blur_multiple_widgets.dart

3. Blur multiple widgets but with dynamic region

Sometimes you might not want to blur all multiple widgets, but just smaller region. Fortunately it’s possible with help of Positioned + ClipRect + BackdropFilter. Positioned allows us to add a widget at any position. ClipRect to limit size of the BackdropFilter.

Therefore, the correct widget tree must be: Stack > [Widget1ToBlur, Widget2ToBlur, …, Positioned > ClipRect > BackdropFilter]. More details in the sample code below.

https://github.com/fluttervn/flutter_blur_demo/blob/master/lib/blur_multiple_with_dynamic_region.dart

In below image, the left with no blur effect, the right is blurred with a region with width=270, height=230.

Conclusion

The built-in & powerful BackdropFilter makes it easier to achieve the blur effect in Flutter than Android.

If it was helpful for you, click on the claps and be sure to follow me on Medium, Facebook, Github.

Check out my existing articles about Flutter:

Make Flutter code shorter with super_widgets package

Run your code in background easily with Flutter

How build() method of Flutter Widget proves “Everything’s a Widget”

Simplify Flutter State Management with Provider and BLoC