flutter - 如何模糊 Flutter 中的 BottomNavigationBar？

Question

我想模糊脚手架的 BottomNavigationBar 的背景，这样它可以给后面的项目带来很酷的模糊效果。我该怎么做？

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

底部导航栏:新主题(
数据:Theme.of(context).copyWith(
Canvas 颜色:颜色(0xff424242).withOpacity(0.5)，
),
child :新的底部导航栏(
onTap: navigationTapped,
当前索引:_page，
项目: [
新的 BottomNavigationBarItem(
图标:新图标(Icons.home)，
标题:新文本('主页')
),
新的 BottomNavigationBarItem(
图标:新图标(Icons.dashboard)，
标题:新文本('菜单')
),
新的 BottomNavigationBarItem(
图标:新图标(Icons.date_range)，
标题:新文本('日期')
)
],
),
)

这是我得到的输出:Image

令人惊讶的是，如您所见，完全没有应用不透明度。我实际上不希望 BottomNavigationBar 不透明。我希望它变得模糊，以便它后面的内容可以在 BottomNaviagtionBar 上被视为模糊。我也尝试过将 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(),
              ),
            ),
          ),
        ),
      );