如何在Flutter中模糊BottomNavigationBar？

Question

我想模糊Scaffold的BottomNavigationBar背景，以便它可以给人一种酷炫的模糊效果。我该怎么做？

更多信息：我尝试通过创建一个新的主题来将不透明度添加到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') ) ], ), )

以下是我得到的输出:Image

令人惊讶的是，正如您所看到的，不透明度根本没有应用。实际上，我不想让BottomNavigationBar不透明。我希望它模糊，以便可以在BottomNaviagtionBar上查看后面的内容。我也尝试将BottomNavigationBar包装在ImageFilter.blur()中，但也没有起作用。

- Prasanth Kanna

---

请问您能否分享一些更多的细节，比如您目前尝试过的任何参考图像或代码？ - Dhrumil Shah - dhuma1981

你想要模糊 BottomNavigationBar 的背景还是前景？ - Ian

我已经添加了更多信息，请检查。 - Prasanth Kanna

我想要模糊背景。 - Prasanth Kanna

我尝试了ImageFilter.blur()，它起作用了，但是BottomNavigationBar里面有一个遮挡了模糊效果的阴影，并且模糊效果比BottomNavigationBar要大。我会继续努力让它正常工作。 - Ian

谢谢。如果代码有效，请发布代码。 - Prasanth Kanna

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

- Nadya

---

注意：避免使用返回小部件的辅助方法。相反，为了提高性能，请创建一个新的小部件。 - Ryan R

Answer 2

你可以将 BottomNavigationBar 包裹在 Backdropfilter 中，然后再将所有内容包裹在 ClipRRect 中。最后，将 Scaffold 属性 extendBody 设置为 true。

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

- Emiliano Bouza

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

- 鹿与少年

---

显示在顶部，而且对齐似乎不起作用。 - materoy