title: How to implement blurred background Bottom Modal Sheet in Flutter?
body: <p>I am doing one project and for that I want to have a bottom sheet with blurred image background. For this I've implemented this code which works fine but have one problem.</p>
  <pre><code>
    Widget build(BuildContext context) {
      return Container(
        height: MediaQuery.of(context).size.height * 0.33,
        child: Stack(
          overflow: Overflow.visible,
          fit: StackFit.expand,
          children: [
            Container(
              height: MediaQuery.of(context).size.height * 0.25,
              decoration: new BoxDecoration(
                  image: new DecorationImage(
                image: new AssetImage(&quot;assets/images/bookshelf.jpg&quot;),
                fit: BoxFit.cover,
              )),
            ),
            Positioned(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height * 0.25,
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
                child: Container(color: Colors.white.withOpacity(0)),
              ),
            ),
          ],
        ),
      );
    }
  </code></pre>
  <p>Output is this: <a href="https://i.stack.imgur.com/6Fjui.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6Fjui.png" alt="enter image description here" /></a>
  It is blurring whole screen but I want to blur just in modal sheet. What's my problem? I am new to flutter so don't know much things about it. Please help me with this.</p>