时间戳

首页 > 解决方案 > 如何模糊 Flutter 中的 BottomNavigationBar？

flutter - 如何模糊 Flutter 中的 BottomNavigationBar？

问题描述

我想模糊一个脚手架的 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 不透明。我希望它是模糊的，以便它后面的内容可以在 BottomNaviagtionBar 上被视为模糊。我也尝试将 BottomNavigationBar 包裹在 ImageFilter.blur() 中，但这也没有用。

标签： flutter

解决方案

为此，我必须将底部导航与屏幕的其他内容放在一个堆栈中。我使用了 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(),
              ),
            ),
          ),
        ),
      );

推荐阅读