Image by Alex Knight on Unsplash

Blurring UI can be a great and effective way of hiding certain elements to highlight a specific part of your app; showing a popup, a piece of text on an image or filling space behind a photo. How can we do this in Flutter you ask? Make way for BackDropFilter!

Blurring an image

Let’s take a real-world use case of a blurred image within an app. The Yahoo Weather app has some pretty nice UI, with a blurred image as the background and the content with a semi-transparent background:

Pretty nice right? And the good thing is, this can be achieved fairly easily in Flutter!

Let’s get it started 💪

Let’s start by defining our basic Widget tree. The image is our background, and we’d like to have some UI on top of that, so a Stack would be our starting point here. For now, let’s start off by dropping a network image in there so we have our background set up:

Make sure to set the fit of your Stack to StackFit.expand so it fills the whole screen

Great! So if everything went fine, we now have our screen with the image as our background.

Blurring the image — BackDropFilter

So now, let’s have a look at how we can blur the image here. The Flutter framework provides us with some pretty nice widgets to accomplish a lot of things and an image blur is no exception!

The backdrop filter widget gives us the possibility to blur whatever’s underneath it. Remember that Stack we used to set up our screen? We can now add a BackDropFilter over the image, provide a filter type to it and start blurring! We’ll use the ImageFilter.blur in this case, which applies a Gaussian blur to our image.

As you can see, we added the BackDropFilter with our ImageFilter.blur over the background image to blur it. To make sure the blur covers the whole image we wrapped it in a Positioned.fill . Don’t like the current blur? You can always play around with the sigmaY and sigmaX values to adjust it to your likings.

The child of the BackDropFilter is not affected by it, so I put our usual Scaffold in there. That way we can place whatever content we like as we would normally do without it being blurred!

Can we also blur other widgets?

So what about when we have some default UI components that we’d like to blur? BackDropFilter has your back! We can place any widget we’d like under the filter to have it blurred. If we take a RaisedButton for example and apply the same filter as we did on the image, we’d go from this:

To this:

Nice right? 😎

And that’s pretty much it for the basics when it comes to blurring UI! A short read this time, but cool to see Flutter allows us to do stuff like this with minimal effort out of the box. Got any questions? Feel free to get in touch! Flutter on! 🐦