[Flutter]画面下部からモーダルシートを表示する方法

Flutter

2021.10.17

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

画面の下側からモーダルのシートを表示する方法を紹介します。

方法
まとめ

方法

インターフェース, インターネット, プログラム, ブラウザ, Www, グラフィック, フラットなデザイン

画面下部からモーダルのシートを表示するには、「showModalBottomSheet関数」を使います。

具体的には、タップやスワイプなどのトリガーで、「showModalBottomSheet関数」を呼び出すことで、モーダルのシートを画面の下側から表示できます。

また、「showModalBottomSheet関数」を使うには、引数「context」と引数「builder」を使う必要があります。

引数「builder」では、モーダルシートとして表示したウェジェットを指定します。

ElevatedButton(
  onPressed: () {
    showModalBottomSheet(
      context: context,
      builder: (context) {
        return Center(
          child: ElevatedButton.icon(
            onPressed: () => Navigator.pop(context),
            icon: Icon(Icons.close),
            label: Text('閉じる'),
          ),
        );
      },
    );
  },
  child: Text('Show Modal Sheet!'),
)