[Flutter]ModalBottomSheet(モーダルボトムシート)の高さ(height)を画面(screen)の半分以上(half over)にするには？

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

ModalBottomSheetの高さを画面の半分以上にする方法を紹介します。

方法

ModalBottomSheetの高さを画面半分以上にするには、showModalBottomSheetの引数「isScrollControled」を使います。

具体的には、showModalBottomSheetの引数「isScrollControled」に「true」を指定します。

showModalBottomSheet(
  isScrollControlled: true,
  context: context,
  builder: (BuildContext context) {
    return /*ウェジェット*/;
  },
);

これで高さを画面の半分以上にすることが出来ます。

使用例

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