【flutter】モーダルを表示の自分なりの手順とは？

こんにちは！
今回は、flutterでモーダルの表示の仕方について、紹介したいと思います。
今回も最後まで、読んでいただけたら嬉しいです！

1,まず、モーダルとは？

・ 確認や警告メッセージの表示

ユーザーが重要なアクションを実行する前に、確認メッセージや警告メッセージを表示して注意を促します。

・ 情報の表示

ユーザーに対して重要な情報を提供するために使用されます。例えば、アプリの新機能や更新情報を表示するために使用されます。

・ フォームの入力

ユーザーに追加の情報やオプションを提供するために使用されます。例えば、ログインフォームや設定ダイアログなどがあります。

2,モーダル表示

showDialog

showDialogメソッドには、さまざまなオプションパラメータがあります。例えば、barrierDismissibleやuseRootNavigatorなどのパラメータを使用して、ダイアログの外観や動作をカスタマイズすることができます。

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      // ダイアログ内に表示するウィジェットを構築する
    );
  },
);

3,実装例

SizedBox(
                child: ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      backgroundColor: Colors.white,
                      title: const Text('モーダルを表示'),
                      content: const Text('モーダルを表示できていますか?'),
                      actions: [
                        TextButton(
                          onPressed: () {
                            Navigator.of(context).pop(); // ダイアログを閉じる
                          },
                          child: const Text('Cancel'),
                        ),
                        TextButton(
                          onPressed: () {
                            // ここに確認後の処理を追加
                            Navigator.of(context).pop(); // ダイアログを閉じる
                          },
                          child: const Text('OK'),
                        ),
                      ],
                    );
                  },
                );
              },
              child: const SizedBox(
                height: 50,
                width: 180,
                child: Center(
                    child: Text(
                  "モーダル紹介",
                  style: TextStyle(fontSize: 16),
                )),
              ),
            )
        )

終わりに

今回は以上になります！
今回も最後まで読んでいただき、ありがとうございました！
では、また次の記事で〜！