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
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
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!
Top comments (0)