Zenn
🗂

[Flutter]Dialogについての個人的まとめ

2022/07/05に公開
Flutter
Dart
tech

Dialog(Dialog class/Dialog widget) とは

使い所

こんな感じのダイアログを表示できる！

(左がAlertDialog()、右がSimpleDialog()。以下で説明)

使い方

主に使い方は二種あって、

1. AlertDialog() 公式はこちら
2. SimpleDialog() 公式はこちら

の2種類が主なダイアログとして用意されてるが、

共通してるのがshowDialogメソッドでダイアログを呼び出すこと
(showDialogは一番下に記載)

1. AlertDialog():文言とボタンを一緒に表示する

main.dart
Future<void> _showMyDialog() async {
  return showDialog<void>(// `showDialog`メソッドでダイアログを呼び出す!
    context: context,　//必須の引数
    barrierDismissible: false, // user must tap button!
    builder: (BuildContext context) {//必須の引数
      return AlertDialog(
        //`showDialog`メソッドの必須の引数であるbuilder:の戻り値としてAlertDialog()を返す！
        title: const Text('AlertDialog Title'),
        content: SingleChildScrollView(
          child: ListBody(
            children: const <Widget>[
              Text('This is a demo alert dialog.'),
              Text('Would you like to approve of this message?'),
            ],
          ),
        ),
        actions: <Widget>[
          TextButton(
            child: const Text('Approve'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

Point

  • showDialogメソッドでダイアログを呼び出す
  • showDialogメソッドのreturnとしてAlertDialog()を返す
    この二点

2. SimpleDialog():ボタンが並ぶ選択肢を表示する

main.dart
Future<void> _askedToLead() async {
  switch (await showDialog<Department>(
    // showDialogメソッドでダイアログを呼び出す
    context: context, //必須の引数
    builder: (BuildContext context) { //必須の引数
    //`showDialog`メソッドのreturnとして`SimpleDialog()`を返す
      return SimpleDialog(
        title: const Text('Select assignment'),
        children: <Widget>[
          // `SimpleDialog()`中にもつ子要素(children:)として
          // `SimpleDialogOption()`を並べる
          SimpleDialogOption(
            onPressed: () { Navigator.pop(context, Department.treasury); },
            child: const Text('Treasury department'),
          ),
          SimpleDialogOption(
            onPressed: () { Navigator.pop(context, Department.state); },
            child: const Text('State department'),
          ),
        ],
      );
    }
  )) {
    case Department.treasury:
      // Let's go.
      // ...
    break;
    case Department.state:
      // ...
    break;
    case null:
      // dialog dismissed
    break;
  }
}

Point

  • showDialogメソッドでダイアログを呼び出す
  • showDialogメソッドのreturnとしてSimpleDialog()を返す
  • SimpleDialog()中にもつ子要素(children:)としてSimpleDialogOption()を並べる
    この点

showDialogメソッドの解説 公式はこちら

main.dart
Future<T?> showDialog<T>({
    required BuildContext context,
    required WidgetBuilder builder,
    bool barrierDismissible = true,
    Color? barrierColor = Colors.black54,
    String? barrierLabel,
    bool useSafeArea = true,
    bool useRootNavigator = true,
    RouteSettings? routeSettings,
    Offset? anchorPoint
  }
)

Point

必ずいる引数が

  • required BuildContext context(BuildContext(クラス型の) context(プロパティ・引数))

と

  • required WidgetBuilder builder(WidgetBuilder(クラス型の) builder(プロパティ・引数))

だ。
なので上の例たちで
showDialogメソッドには必ずcontext：とbuilder：の２つのメソッドが付与されている。
(なければコンパイルエラーなるはず)



以上です。間違えが見つかり次第、或いは知識がアップデートされ次第改訂していきます。🙏

参考記事

GitHubで編集を提案

Discussion