[Flutter]ModalBottomSheetの高さを最大にするには？

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

ModalBottomSheetの高さを最大にする方法を紹介します。

方法

ModalBottomSheetの高さを最大にするには、まずshowModalBottomSheetの引数「isScrollControlled」に「true」を指定します。

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

次に、BottomSheetとして表示するウェジェットをContainerもしくはSizedBoxのchildに指定します。

そして、ContainerもしくはSizedBoxの引数「height」に「double.infinity」を指定します。

showModalBottomSheet(
  isScrollControlled: true,
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: double.infinity,
      child : Widget()
    );
  },
);

これでModalBottomSheetの高さを最大にすることが出来ます。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
              isScrollControlled: true,
              context: context,
              builder: (BuildContext context) {
                return Container(
                  height: double.infinity,
                  color: Colors.green,
                  alignment: Alignment.center,
                );
              },
            );
          },
          child: Text('Show'),
        ),
      ),
    );
  }