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.
Turns out there is this simple widget you can just wrap around whatever you want blurred. It's called
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
Here's how you use it.
ImageFiltered( imageFilter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0), child: child // Widget that is blurred ), ),
To create the frosted glass effect in the background, you're gonna have to use a
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
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), ), ),
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
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
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, ), ), ), ),
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
To find the
in VS Code press Ctrl + P
in IntelliJ double tap Shift
and search modal_barrier.dart
First make sure to import
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, ), ),
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!
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
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!