如何在Flutter中模糊BottomNavigationBar？

Question

我想模糊一个

BottomNavigationBar

的

Scaffold

的背景，这样它就可以给后面的项目带来很酷的模糊效果。我怎样才能做到这一点？

更多信息：我尝试通过为

canvasColor

创建一个新主题来为

BottomNaviagtionBar

添加不透明度。这是我的代码：

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

内，但这也不起作用。

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

Answer 3

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