【Flutter】ダイアログの表示の仕方

今回は、Flutter でダイアログを表示する方法を紹介します。

初めに
AlertDialog
SimpleDialog
CupertinoAlertDialog
まとめ
おすすめ書籍

初めに

Flutter で使用できるダイアログは、基本的には、AlertDialog、SimpleDialog、CupertinoAlertDialog の3つがあります。

ダイアログを表示するときは、showDialog() を使用します。以下5行目の*Dialogの部分を使用したいダイアログに応じて変更します。

showDialog(
  context: context,
  barrierDismissible: false,
  builder: (context) {
    return *Dialog(
      …
    );
  },
);

また、3行目のように、barrierDismissible を false にすることで、ダイアログの外側をタップしても閉じないようにすることができます。

AlertDialog

AlertDialog は、主にユーザに確認してもらいたい場合に使用します。以下の例では、OK とCancel を選択できるダイアログになっていますが、結果を表示してOKだけ押してもらうようなダイアログにもできます。

showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      title: Text("タイトル"),
      content: Text("メッセージ内容"),
      actions: [
        TextButton(
          child: Text("Cancel"),
          onPressed: () => Navigator.pop(context),
        ),
        TextButton(
          child: Text("OK"),
          onPressed: () => Navigator.pop(context),
        ),
      ],
    );
  },
);

AlertDialog class - material library - Dart API

API docs for the AlertDialog class from the material library, for the Dart programming language.

SimpleDialog

SimpleDialog は、主にユーザに複数の選択肢から選んで欲しい場合に使用します。AlertDialog と違い、選択肢が縦に並んで表示されるので、たくさん選択肢があっても大丈夫です。

showDialog(
  context: context,
  builder: (context) {
    return SimpleDialog(
      title: Text("タイトル"),
      children: [
        SimpleDialogOption(
          onPressed: () => Navigator.pop(context),
          child: Text("選択肢1"),
        ),
        SimpleDialogOption(
          onPressed: () => Navigator.pop(context),
          child: Text("選択肢2"),
        ),
        SimpleDialogOption(
          onPressed: () => Navigator.pop(context),
          child: Text("選択肢3"),
        ),
      ],
    );
  },
);

SimpleDialog class - material library - Dart API

API docs for the SimpleDialog class from the material library, for the Dart programming language.

CupertinoAlertDialog

CupertinoAlertDialog は、AlertDialog を iOS風にしたダイアログです。
OS情報を取得することで、Androidでは AlertDialog、iOS では CupertinoAlertDialog を表示するという使い分けもできます。

OS情報の取得方法は、以下の記事をご参照ください。

showDialog(
  context: context,
  builder: (context) {
    return CupertinoAlertDialog(
      title: Text("タイトル"),
      content: Text("メッセージ内容"),
      actions: [
        CupertinoDialogAction(
            child: Text('Cancel'),
            isDestructiveAction: true,
            onPressed: () => Navigator.pop(context),
        ),
        CupertinoDialogAction(
          child: Text('OK'),
          onPressed: () => Navigator.pop(context),
        ),
      ],
    );
  }
);

CupertinoAlertDialog class - cupertino library - Dart API

API docs for the CupertinoAlertDialog class from the cupertino library, for the Dart programming language.

まとめ

今回は、Flutter でダイアログを表示する方法を紹介しました！

Flutter のダイアログは、以下の3つがあります。
- AlertDialog … 主にユーザに確認をとるときに使用
- SimpleDialog … 主にユーザに複数の選択肢から選んで欲しいときに使用
- CupertinoAlertDialog … iOS 風の AlertDialog
ダイアログの表示は、showDialog() で行います。
ダイアログの外側をタップしても閉じないようにするには、barrierDismissible を false にします。

以上で、【Flutter】ダイアログの表示の仕方 は終わりです。