[Flutter]ModalBottomSheet(モーダルボトムシート)の高さを設定するには？

どうも、ちょげ(@chogetarou)です。

ModalBottomSheetの高さを設定する方法を紹介します。

方法

ModalBottomSheetの高さを設定するには、showModalBottomSheetの引数「isScrollControled」とCotainerを使います。

まず、showModalBottomSheetの引数「isScrollControled」に「true」を指定します。

showModalBottomSheet(
  isScrollControlled: true,
  context: context,
  builder: (BuildContext context) {
    return BottomSheet();
  },
);

次に、showModalBottomSheetの引数「builder」で表示するウェジェットをContainerのchildにします。

そして、Containerの引数「height」で高さを設定します。

showModalBottomSheet(
  isScrollControlled: true,
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: /*高さ*/,
      child : BottomSheet()
    );
  },
);

これでModalBottomSheetの高さを設定することが出来ます。

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {

            showModalBottomSheet(
              isScrollControlled: true,
              context: context,
              builder: (BuildContext context) {
                return Container(
                  height: 700,
                  width: double.infinity,
                  color: Colors.pink,
                );
              },
            );

          },
          child: Text('Show'),
        ),
      ),
    );
  }