[Flutter]ModalBottomSheet(モーダルボトムシート)を角丸(rounded border)にするには？

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

ModalBottomSheetを角丸にする方法を紹介します。

方法

ModalBottomSheetを角丸にするには、showModalBottomSheetの引数「shape」と「RoundedRectangleBorder」を使います。

まず、showModalBottomSheetの引数「shape」にRoundedRectangleBorderを指定します。

そして、RoundedRectanglenBorderの引数「borderRadius」に「BorderRadius.circular(/*丸み*/)」を指定します。

showModalBottomSheet(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(/*丸み*/),
  ),
  context: context,
  builder: (context) {
    return Widget();
  },
)

これでModalBottomSheetを角丸にすることが出来ます。

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              context: context,
              builder: (context) {
                return Container(
                  height: 500,
                );
              },
            );
          },
          child: Text('Show'),
        ),
      ),
    );
  }