如何在Flutter中模糊BottomNavigationBar? [英] How to blur the BottomNavigationBar in Flutter?

问题描述

我想使脚手架的BottomNavigationBar的背景模糊，以使其背后的项目具有酷的模糊效果.我该怎么办?

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?

更多信息:我尝试通过在BottomNaviagtionBar中创建新主题来向canvasColor添加不透明度.这是我的代码:

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') ) ], ), )

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') ) ], ), )

这是我得到的输出:图片

令人惊讶的是，如您所见，不透明度完全没有应用.我实际上不希望BottomNavigationBar是不透明的.我希望对其进行模糊处理，以便可以在BottomNaviagtionBar上将其后面的内容视为模糊的.我也尝试过将BottomNavigationBar包装在ImageFilter.blur()中，但这也没有用.

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.

推荐答案

为此，我不得不将底部导航与屏幕上的其他内容放置在堆栈中.我使用了ClipRect，BackdropFilter和Opacity的组合.这是可行的解决方案:

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

这篇关于如何在Flutter中模糊BottomNavigationBar?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！