如何模糊 Flutter 中的底部导航栏？

Question

我想模糊一个脚手架的BottomNavigationBar 的背景，以便它可以给它后面的项目提供很酷的模糊效果。我怎样才能做到这一点？

更多信息：我尝试通过为 BottomNaviagtionBar 创建一个新主题来为 canvasColor 添加不透明度。这是我的代码：

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 不透明。我希望它被模糊化，以便它后面的内容可以在底部导航栏上被视为模糊的。我也试过将 BottomNavigationBar 包裹在 ImageFilter.blur() 中，但这也不起作用。

Answer 1

为此，我必须将底部导航与屏幕的其他内容放在一个堆栈中。我使用了 ClipRect、BackdropFilter 和 Opacity 的组合。这是工作解决方案：

 @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

您可以用 Backdropfilter 包裹 BottomNavigationBar，然后用 ClipRRect 包裹所有内容。最后但并非最不重要的一点是将 Scaffold 属性 extendsBody 设置为 true，

 bottomNavigationBar: ClipRRect(
    child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
      child: BottomNavigationBar(
       YOUR CODE HERE