[Flutter] showModalBottomSheetの上部に画像を表示したい

showModalBottomSheetの上部に画像を表示したい

タイトル通りで、画像を表示したいのだがどうすればいいのかわからず結構ハマったので備忘録でかきこ。

※モーダルの中ではなく、完全にモーダルの外で画像を表示するイメージになります。
この場合だとモーダルの上部です。モーダル内ではないです。

showModalBottomSheet(
  isDismissible: false,
  isScrollControlled: true,
  context: context,
  builder: (BuildContext context) {
    return Stack(
      clipBehavior: Clip.none, //  はみ出しても表示する
      children: [
        Container(
          //  ここでモーダル本体を下にずらし画像表示用の場所確保の為の余白作成
          margin: const EdgeInsets.only(top: 80), 
          child: CustomModalSheet(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                // ...モーダル内の内容...
              ],
            ),
          ),
        ),
        //  モーダル枠を飛び出して画像を配置して余白で作った部分の一番上に要素を配置
        Positioned(
          top: 0,  // Stackの上端からスタート
          left: 0,
          right: 0,
          child: Center(
            child: Image.asset(
              'assets/images/test_image.png',
              width: 80,
              height: 80,
            ),
          ),
        ),
      ],
    );
  },
);

一番大事なのはclipBehavior: Clip.none

clipBehavior は「子ウィジェットが親ウィジェットの領域からはみ出した場合に、どう扱うか」を指定するためのプロパティです。
clipBehavior: Clip.none で 「はみ出しても切り取らずに描画を許可する」 という意味になります。

だからこそ、stackからはずれた画像がしっかりと表示されるわけ。
あとは、Positionedのtopを0にして余白で作った上部の一番上に配置できるようになっています。

以上