[Flutter]ModalBottomSheet(モーダルボトムシート)をスクロールできる(scrollable)ようにするには？

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

ModalBottomSheetをスクロールできるようにする方法を紹介します。

方法

ModalBottomSheetをスクロールできるようにするには、ContainerとSingleChildScrollViewを使います。

まず、ModalBottomSheetのbuilderでContainerをreturnします。

そして、ContainerのchildにSingleChildScrollViewを指定し、SingleChildScrollViewのchildにスクロールするModalBottomSheetを指定します。

showModalBottomSheet(
  context: context,
  builder: (context) {
    return Container(
      child: SingleChildScrollView(
        child: /*スクロールするウェジェット*/
      )
    );
  },
);

これでModalBottomSheetをスクロール出来ます。

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
              backgroundColor: Colors.transparent,
              context: context,
              builder: (context) {
                return Container(
                  height: 400,
                  color: Colors.white,
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        for (var i = 0; i < 20; i++)
                          Card(
                            child: ListTile(
                              title: Text('item $i'),
                            ),
                          )
                      ],
                    ),
                  ),
                );
              },
            );
          },
          child: Text('Show'),
        ),
      ),
    );
  }