How to blur in Flutter
Tags: flutter, blur, imagefiltered, backdropfilter
Published: 2020-12-30 19:19:09



The documentation unfortunately isn't the best when it comes to blurring in Flutter. To me it really feels like a workaround solution which somehow became the norm. 

You're supposed to use `BackdropFilter` for which you should first create a `Stack`, then reposition all the widgets back, after which you maybe even reposition the blur and clip it if you don't want it over the whole screen.

Even though that can sometimes be the right solution, I'll show you when to use it and when not to.

All code snippets of screens are linked above the pictures.

-----

### Table of contents
\- [Single widget blur](#single-widget-blur)
\- [Background blur](#background-blur)
\- [Part of screen blur](#part-of-screen-blur)
\- [Dialog/Bottom Sheet background blur](#dialogbottom-sheet-background-blur)
\- [Conclusion](#conclusion)

-----

## Single widget blur
[Example screen of simple blur](https://github.com/Boilplate/flutter-blur-examples/blob/master/lib/screens/single_widget_screen.dart)
![Example picture that shows a blurred image using ImageFiltered without a Stack](https://dev-to-uploads.s3.amazonaws.com/i/rsm55aov7c4kggzxequ9.png)

Turns out there is this simple widget you can just wrap around whatever you want blurred. It's called **`ImageFiltered`**. 

I don't know why there is a widget of the week video for `BackdropFilter`, but not for this one. I suspect it will come in the near future.
 
*EDIT*: They added a widget of the week video for it. Turns out it's even more performant than `BackgroundFilter`

Here's how you use it.

```dart
ImageFiltered(
	imageFilter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
	child: child  // Widget that is blurred
	),
),
```
## Background blur

[Example of a blurred background image](https://github.com/Boilplate/flutter-blur-examples/blob/master/lib/screens/background_screen.dart)
![Example of a blurred background using BackdropFilter](https://dev-to-uploads.s3.amazonaws.com/i/9ca71thqxqv4n7h82eyo.png)

To create the frosted glass effect in the background, you're gonna have to use a `Stack` and **`BackdropFilter`**.

You want to have your background widgets as the first children inside the `Stack`, so that the rest are stacked on top of them. `BackdropFilter` blurs *only* the widgets above it. 

The child parameter is required and doesn't get blurred. Don't leave it as `null` because the blur effect won't happen! I often find myself setting it to just an empty `Container` *with a transparent color*, for readability sakes. That way I know everything after `BackdropFilter` isn't affected.

Example of a blurred background image:

```dart
Stack(
    children: [
        Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('assets/your_asset_image.jpeg'),
                    fit: BoxFit.cover,
                ),
            ),
            child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
                child: Container(
                	color: Colors.transparent,
                ),
            ),
        ),
        Text('Not blurred'),
    ],
),
```

You usually don't put `BackdropFilter` inside `Container`, it's just a convenience in this case. Not giving the `Container` a child and having `BackdropFilter` as the second element in this list has the same effect.

The color doesn't have to be transparent. You can have it act as a filter.

```dart
BackdropFilter(
	filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
	child: Container(
		color: Colors.grey.withOpacity(0.2),
	),
),
```
## Part of screen blur
[Example of partial screen blur](https://github.com/Boilplate/flutter-blur-examples/blob/master/lib/screens/partial_screen.dart)
![Example picture that shows a use case for blurring only part of screen](https://dev-to-uploads.s3.amazonaws.com/i/4wzpw24e46x87mpu6nay.png)

Whether you want to blur half of the screen or part of a tiny image, you'll always be using `BackdropFilter` wrapped with `Positioned` and some form of `Clip` (`ClipRect`, `ClipRRect`,`ClipOval`, `ClipPath`...). 

For the `Positioned` widget you have to input all 4 sides, so that it's clear how far away from the edges is the blur. For the `Clip` part, the simplest and most common to use is `ClipRect`. 

> If there's no clip, the filter will be applied to the full screen. (from [*BackdropFilter* documentation](https://api.flutter.dev/flutter/widgets/BackdropFilter-class.html))

```dart
Positioned(
    top: 100,
    bottom: 150,
    left: 30,
    right: 30,
    ClipRect(
        child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 7.0, sigmaY: 7.0),
            child: Container(
                color: Colors.transparent,
            ),
        ),
    ),
),
```
## Dialog/Bottom Sheet background blur
[No boilerplate blurred dialog](https://github.com/Boilplate/flutter-blur-examples/blob/master/lib/screens/dialog_screen.dart)

![Example picture that shows a blurred background image of a dog behind dialog](https://dev-to-uploads.s3.amazonaws.com/i/l11jvko68ywcryn1bwjz.png)

This one is very specific and it basically just eliminates boilerplate for your dialogs and bottom sheets. Those have as their background the **`ModalBarrier`** widget, so we blur that instead of wrapping all our dialogs and bottom sheets with `BackdropFilter`.

To find the `ModalBarrier` file 

- in VS Code press Ctrl + P

- in IntelliJ double tap Shift

  and search modal_barrier.dart							

First make sure to import `ImageFilter`.

```dart
import 'dart:ui' show ImageFilter;
```

Inside the build method you want to change this (for me it's line 124)

```dart
child: color == null ? null : DecoratedBox(
    decoration: BoxDecoration(
        color: color,
    ),
),
```

to this

```dart
child: color == null ? null : BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 3,0, sigmaY: 3.0),
    child: Container(color: Color(0x00000000),
	),
),
```

Thanks to [Sahil Kumar](https://stackoverflow.com/users/10036882/sahil-kumar) for this solution!

## Conclusion

The hero of blurring is  **`ImageFiltered`**.  Avoid the hassle of `BackdropFilter` - no confusing child `Container` that needs a color, less worrying about positioning widgets inside of `Stack`. `BackdropFilter` only shines when you want to blur part of a widget or screen. 

Are you still confused about blurring in Flutter? Feel free to comment or PM me and I will gladly help you and update this article!