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

Question

I would like to implement this overlay bar

This is what i reached lately (i just want to blur the part below the overlay bar portion, everything else is not a problem)

关键部分是它必须使屏幕下方的部分模糊。我不知道该怎么做，我尝试了所有操作（例如设置一个透明容器并对其进行模糊处理，但是透明颜色却变成了黑色：/）。

这是我目前在导航栏上放置容器的方式：

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"),),
    );
  }

谢谢您的帮助！

编辑：

最后，我在几分钟后设法做到了，所以我不会分配最佳答案。解决方案是使用堆栈而不是列：覆盖部分实际上将覆盖接口，而不是放在下面。为了做到这一点，您需要给bottomAppBar一个精确的尺寸（使用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(),
                ),
              ),
            )
)

Final result

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 documentation

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