flutter - 如何在 Flutter 中实现背景模糊的底部模态表？

Question

我正在做一个项目，为此我想要一张图像背景模糊的底页。为此，我实现了这段代码，它工作正常，但有一个问题。

  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.33,
      child: Stack(
        overflow: Overflow.visible,
        fit: StackFit.expand,
        children: [
          Container(
            height: MediaQuery.of(context).size.height * 0.25,
            decoration: new BoxDecoration(
                image: new DecorationImage(
              image: new AssetImage("assets/images/bookshelf.jpg"),
              fit: BoxFit.cover,
            )),
          ),
          Positioned(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height * 0.25,
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
              child: Container(color: Colors.white.withOpacity(0)),
            ),
          ),
        ],
      ),
    );
  }

输出是这样的： 它正在模糊整个屏幕，但我只想在模态表中模糊。我的问题是什么？我是新来的，所以对它不太了解。请帮我解决一下这个。

Answer 1

这是您的解决方案，

 showModalBottomSheet(
              context: context,
              clipBehavior: Clip.antiAlias,
              builder: (context){
                return Container(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage("assets/images/bookshelf.jpg"),
                    ),
                  ),
                  child: BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
                    child: Center(
                      child: Text('welcome'),
                    ),
                  ),
                );
              }
          );