How to blur in Flutter

Boilplate — Wed, 30 Dec 2020 19:19:09 +0000

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.

- Single widget blur
- Background blur
- Part of screen blur
- Dialog/Bottom Sheet background blur
- Conclusion

Single widget blur

Example screen of simple blur

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.

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

Background blur

Example of a blurred background image

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:

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.

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

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)

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

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.

import 'dart:ui' show ImageFilter;

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

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

to this

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

Thanks to 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!