I'm looking for a way to make the whole application behind a drawer get blurred, not just an activity, but anywhere you open the drawer.
Solution 1: boformer
Here is a little hack that requires editing the flutter source files (in Android Studio, press CTRL + B while
Drawer is selected to go to its source file):
In drawer.dart, add a new import:
import 'dart:ui' show ImageFilter;
And replace code near line 400:
child: new Container( color: _color.evaluate(_controller), )
child: new BackdropFilter( filter: new ImageFilter.blur(sigmaX: 10.0 * _controller.value, sigmaY: 10.0 * _controller.value), child: Container(color: Color(0x01000000)), ),
Solution 2: Hosein
You can simply put your drawers's child to BackDropFilter widget.
Scaffold( drawer: Drawer( child: BackdropFilter( filter: ImageFilter.blur( sigmaX: 5.0, sigmaY: 5.0, ), child: YourDrawerChild()
Solution 3: Vedang Date
I tried using Stack -> [BackDropFilter -> SizedBox.expand(), Drawer] which actually worked wonders as I didn't want to change any source files in the drawer component.
So my code now looks something like this :
Scaffold( resizeToAvoidBottomInset: true, drawer: SafeArea( child: Stack( children: [ BackdropFilter( filter: ImageFilter.blur( sigmaX: 5.0, sigmaY: 5.0, ), child: const SizedBox.expand(), ), Drawer( child: ...
The backdrop is still tappable and it works just like how the accepted answer seems to work.