How to make a fixed blurring overlay in Flutter? - 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