title: How to make a fixed blurring overlay in Flutter?
body: <p><a href="https://i.stack.imgur.com/rHoXN.png" rel="nofollow noreferrer">I would like to implement this overlay bar</a></p>
  
  <p><a href="https://i.stack.imgur.com/WGsJx.jpg" rel="nofollow noreferrer">This is what i reached lately (i just want to blur the part below the overlay bar portion, everything else is not a problem)</a></p>
  
  <p>The crucial part is that it must blur the portion of screen below itself. I have no clue about how should i do it, i tried everything (like setting up a transparent container and blur it, but the transparent color turns out to be black :/ ). </p>
  
  <p>This is how i currently implement the navigation bar with a container over it:</p>
  
  <pre><code>Widget _navigationBarAndOverlay() {
      return Column(
        mainAxisSize: MainAxisSize.min,
        children: &lt;Widget&gt;[
          OverlayBarWidget(),
          _navigationBar(),
        ],
      );
    }
  </code></pre>
  
  <p>And this is the OverlayBarWidget code:</p>
  
  <pre><code>  Widget build(BuildContext context) {
      return Container(
        color: Colors.transparent,
        height: 85,
        width: MediaQuery.of(context).size.width,
        child: Center(child: Text("Nothing to do"),),
      );
    }
  </code></pre>
  
  <p>Thanks in advance for your help!</p>
  
  <p><strong>EDIT</strong>:</p>
  
  <p>In the end i managed to do it just few minutes later, so i won't assign the best answer.
  The solution is using a Stack instead of a Column: the overlay part will actually overlay the interface instead of being put below. In order to do it, you need to give your bottomAppBar a precise dimension (use a SizeBox, as below) and use a Positioned for the overlay bar positioning</p>
  
  <pre><code>Stack(
            children: &lt;Widget&gt;[
              Scaffold(
                body: TabBarView(
                  controller: tabController,
                  ...
                ),
                bottomNavigationBar: SizedBox(
                  height: 57,
                  child: _navigationBar(),
                ),
              ),
              Positioned(
                bottom: 57,
                child: ClipRect(
                  child: BackdropFilter(
                    filter: ImageFilter.blur(sigmaY: 16, sigmaX: 16),
                    child: OverlayBarWidget(),
                  ),
                ),
              )
  )
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/cFZjb.jpg" rel="nofollow noreferrer">Final result</a></p>