Blur behind drawer in flutter

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),
)

with:

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.

a sample drawer with blurred backdrop screenshot