CODEWITHSUNDEEP
flutter
Prasanth Kanna
Prasanth Kanna

Reputation: 2081

How to blur the BottomNavigationBar in Flutter?

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.

Upvotes: 3

Views: 8011

Answers (3)

Emiliano Bouza
Emiliano Bouza

Reputation: 91

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

Upvotes: 9

Nadya
Nadya

Reputation: 121

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(),
              ),
            ),
          ),
        ),
      );

Upvotes: 11

鹿与少年
鹿与少年

Reputation: 1

** 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
            ],
          ),
        ],
      ),
    );

Upvotes: 0

Related Questions