[Flutter]ModalBottomSheet(モーダルボトムシート)の形(shape)を変えるには？

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

ModalBottomSheetの形を変える方法を紹介します。

方法

ModalBottomSheetの形を変えるには、showModalBottomSheet関数の引数「shape」を使います。

引数「shape」にShapeBorderを継承しているクラスを指定します。

showModalBottomSheet(
  shape: /*形*/,
  context: context,
  builder: (context) {
    return Container();
  },
);

これでModalBottomSheetの形を変えることが出来ます。

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
              shape: CircleBorder(),
              context: context,
              builder: (context) {
                return Container();
              },
            );
          },
          child: Text('Show'),
        ),
      ),
    );
  }