How to blur the BottomNavigationBar in Flutter? - flutter

Question

I want to blur the background of BottomNavigationBar of a scaffold, so that it can give cool blur effect of items behind it. How can I do that?
More Info: I've tried adding opacity to canvasColor by creating a new theme to the BottomNaviagtionBar. This is my code:
bottomNavigationBar: new Theme(
data: Theme.of(context).copyWith(
canvasColor: Color(0xff424242).withOpacity(0.5),
),
child: new BottomNavigationBar(
onTap: navigationTapped,
currentIndex: _page,
items: [
new BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text('Home')
),
new BottomNavigationBarItem(
icon: new Icon(Icons.dashboard),
title: new Text('Menu')
),
new BottomNavigationBarItem(
icon: new Icon(Icons.date_range),
title: new Text('Dates')
)
],
),
)
And this is output I'm getting:Image
Surprisingly, as you can see, the opacity is not at all applied. I actually don't want the BottomNavigationBar to be opaque. I want it to be blurred so that the content behind it can be viewed as blurred on the BottomNaviagtionBar. I've tried also to wrap BottomNavigationBar inside ImageFilter.blur(), But that also didn't work.

Answer 1

For this to work I had to place the bottom navigation in a stack with the other content of the screen. I used combination of ClipRect, BackdropFilter and Opacity. This is the working solution:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: _buildAppBar(context),
body: Stack(
//these are the screens that will be loaded for every bottom nav item
children: <Widget>[
IndexedStack(
index: _currentTab,
children: _pages,
),
_buildBottomNavigation()
],
),
);
}
Widget _buildBottomNavigation() => Align(
alignment: FractionalOffset.bottomCenter,
//this is very important, without it the whole screen will be blurred
child: ClipRect(
//I'm using BackdropFilter for the blurring effect
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10.0,
sigmaY: 10.0,
),
child: Opacity(
//you can change the opacity to whatever suits you best
opacity: 0.8,
child: BottomNavigationBar(
currentIndex: _currentTab,
onTap: (int index) {
setState(() {
_currentTab = index;
});
},
type: BottomNavigationBarType.fixed,
unselectedItemColor: AppColors.colorBlack,
items: allRoutes.map((NavigationRoute route) {
return _buildBottomNavigationBarItem(route);
}).toList(),
),
),
),
),
);

Answer 2

** just set a transparent backgroundColor .**
#override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
backgroundColor: Colors.transparent,
border: Border.all(
width: 0.0,
style: BorderStyle.none,
),
),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.only(
left: 20.0,
top: 0.0,
right: 20.0,
),
height: 280.0,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: Const.color.linearColors,
),
// image: DecorationImage(
// image: AssetImage('assets/image/bac.png'),
// ),
),
child: Row(
children: <Widget>[Text('Hello')],
),
),
),
/// end of Expanded
],
),
],
),
);

Answer 3

You could just wrap your BottomNavigationBar with a Backdropfilter and then wrap all with a ClipRRect. Last but not least set the Scaffold attribute extendBody to true,
bottomNavigationBar: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
child: BottomNavigationBar(
YOUR CODE HERE