dart - Flutter で背景をぼかしたボトム モーダル シートを実装するにはどうすればよいですか?

私は 1 つのプロジェクトを行っており、そのために画像の背景をぼかした下部シートを作成したいと考えています。このために、問題なく動作するコードを実装しましたが、問題が 1 つあります。

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

出力は次のとおりです。 画面全体をぼかしているのですが、モーダルシート内だけぼかしたいのです。私の問題は何ですか？私はフラッターを始めたばかりなので、それについてあまり知りません。これについて手伝ってください。

これに対する解決策は見つかりましたか?

2021 年 2 月 21 日 13:22

これが解決策です。

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