小编Dan*_*rdi的帖子

我想实现这个覆盖栏

这就是我最近达到的目标（我只想模糊覆盖栏部分下方的部分，其他一切都不是问题）

关键部分是它必须模糊屏幕下方的部分。我不知道该怎么做，我尝试了一切（比如设置一个透明容器并模糊它，但透明颜色结果是黑色：/）。

这就是我目前实现带有容器的导航栏的方式：

Widget _navigationBarAndOverlay() {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        OverlayBarWidget(),
        _navigationBar(),
      ],
    );
  }

这是 OverlayBarWidget 代码：

  Widget build(BuildContext context) {
    return Container(
      color: Colors.transparent,
      height: 85,
      width: MediaQuery.of(context).size.width,
      child: Center(child: Text("Nothing to do"),),
    );
  }

在此先感谢您的帮助！

编辑：

最后我在几分钟后就做到了，所以我不会分配最佳答案。解决方案是使用堆栈而不是列：覆盖部分实际上会覆盖界面而不是放在下面。为此，您需要为底部AppBar提供精确的尺寸（使用SizeBox，如下所示）并使用Positioned来定位覆盖栏

Stack(
          children: <Widget>[
            Scaffold(
              body: TabBarView(
                controller: tabController,
                ...
              ),
              bottomNavigationBar: SizedBox(
                height: 57,
                child: _navigationBar(),
              ),
            ),
            Positioned(
              bottom: 57,
              child: ClipRect(
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaY: 16, sigmaX: 16),
                  child: OverlayBarWidget(),
                ),
              ),
            )
) …