DEV Community

loading...
Cover image for How to blur in Flutter

How to blur in Flutter

boilplate profile image Boilplate ・Updated on ・4 min read

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
- Background blur
- Part of screen blur
- Dialog/Bottom Sheet background blur
- Conclusion


Single widget blur

Example screen of simple blur
Example picture that shows a blurred image using ImageFiltered without a Stack

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
    ),
),
Enter fullscreen mode Exit fullscreen mode

Background blur

Example of a blurred background image
Example of a blurred background using BackdropFilter

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'),
    ],
),
Enter fullscreen mode Exit fullscreen mode

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),
    ),
),
Enter fullscreen mode Exit fullscreen mode

Part of screen blur

Example of partial screen blur
Example picture that shows a use case for blurring only part of screen

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,
            ),
        ),
    ),
),
Enter fullscreen mode Exit fullscreen mode

Dialog/Bottom Sheet background blur

No boilerplate blurred dialog

Example picture that shows a blurred background image of a dog behind 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;
Enter fullscreen mode Exit fullscreen mode

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

child: color == null ? null : DecoratedBox(
    decoration: BoxDecoration(
        color: color,
    ),
),
Enter fullscreen mode Exit fullscreen mode

to this

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

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!

Discussion (0)

pic
Editor guide