如何在 Flutter 中制作固定模糊叠加？

Question

我想实现这个覆盖栏

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

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

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

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

最后结果

Answer 1

你可以试试BackDropFilter

此类效果成本较高，谨慎使用！

重要提示：用ClipRect小部件包裹您的容器，否则整个屏幕将呈现 BackDropFilter 效果。

ClipRect(
  child: Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('assets/your-image.png'),
      ),
    ),
    child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
      child: Container(
        color: Colors.black.withOpacity(0.0),
      ),
    ),
  ),
)

使用这些值来获得不同的效果

sigmaX: 5.0
sigmaY: 5.0
withOpacity: 0.0

进行比较，此时你会得到这样的结果：

现在，如果你想在该图像上显示信息，你可以使用之前的代码Stack()，并添加一些Positioned() Text()

Stack(   
  children: <Widget>[
    ClipRect( ... ),
    Positioned(top: 30, left: 30, child: Text("Some Info"),
    Positioned(top: 60, left: 30, child: Text("Some more Info"),
  ], )

你可以得到这样的东西

BackDropFilter 文档

关于 BackDropFilter 的 Flutter 视频 --> https://youtu.be/dYRs7Q1vfYI