[Flutter]BottomSheet(ボトムシート)の高さ(height)を設定するには？

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

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

方法

BottomSheetの高さを設定するには、ContainerもしくはSizedBoxを使います。

まず、ContainerのchildにBottomSheetで表示するウェジェットを指定します。

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

showBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
         child : /*ボトムシートで表示するウェジェット*/
         height : /*高さ*/
    );
  },
);

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

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showBottomSheet(
              context: context,
              builder: (BuildContext context) {
                return Container(
                  child: Text('Bottom Sheet'),
                  height: 500,
                  alignment: Alignment.center,
                  width: double.infinity,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey,
                        blurRadius: 20,
                      )
                    ],
                  ),
                );
              },
            );
          },
          child: Text('Show'),
        ),
      ),
    );
  }