[Flutter]ModalBottomSheet(モーダルボトムシート)をセーフエリア(SafeArea)内に表示するには？

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

ModalBottomSheetをセーフエリア内に表示する方法を紹介します。

方法

ModalBottomSheetをセーフエリア内に表示するには、SafeAreaを使います。

具体的な方法としては、ModalBottomSheetとして表示するウェジェットを、SafeAreaのchildに指定します。

showModalBottomSheet(
  context: context,
  builder: (context) {
    return SafeArea(
      child: /*ModalBottomSheetのウェジェット*/
    );
  },
);

これでModalBottomSheetを、セーフエリア内に表示することが出来ます。

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
              isScrollControlled: true,
              backgroundColor: Colors.transparent,
              context: context,
              builder: (context) {
                return SafeArea(
                  child: Container(
                    height: 400,
                    color: Colors.white,
                    child: ListView.builder(
                      itemCount: 10,
                      itemBuilder: (BuildContext context, int index) {
                        return ListTile(title: Text('Item $index'));
                      },
                    ),
                  ),
                );
              },
            );
          },
          child: Text('Show'),
        ),
      ),
    );
  }