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

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

你可以用一个Backdropfilter Package 你的BottomNavigationBar，然后用一个ClipRRect Package 所有的BottomNavigationBar。最后但同样重要的是，将Scaffold属性extendBody设置为true。

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