How to make a fixed blurring overlay in Flutter?

Question

I would like to implement this overlay bar

This is what i reached lately (i just want to blur the part below the overlay bar portion, everything else is not a problem)

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 :/ ).

This is how i currently implement the navigation bar with a container over it:

Widget _navigationBarAndOverlay() {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        OverlayBarWidget(),
        _navigationBar(),
      ],
    );
  }

And this is the OverlayBarWidget 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"),),
    );
  }

Thanks in advance for your help!

EDIT:

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

Stack(
          children: <Widget>[
            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(),
                ),
              ),
            )
)

Final result

Answer 1

You can try BackDropFilter

This kind of effects are relatively expensive, use them with caution!

Important: Wrap your container with ClipRect widget, otherwise the entire screen will take the BackDropFilter effect.

ClipRect(
  child: Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('assets/your-image.png'),
      ),
    ),
    child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
      child: Container(
        color: Colors.black.withOpacity(0.0),
      ),
    ),
  ),
)

Play with the values to get different effects

sigmaX: 5.0
sigmaY: 5.0
withOpacity: 0.0

Making a comparison, at this point you get something like this:

Now, if you want to display information over that image, you can just use the previous code in a Stack(), and add some Positioned() Text()

Stack(   
  children: <Widget>[
    ClipRect( ... ),
    Positioned(top: 30, left: 30, child: Text("Some Info"),
    Positioned(top: 60, left: 30, child: Text("Some more Info"),
  ], )

You can get something like this

BackDropFilter documentation

Flutter video about BackDropFilter --> https://youtu.be/dYRs7Q1vfYI