【Flutter】showDialog|ダイアログを表示

今回はFlutterでダイアログを表示できるSimpleDialog AlertDialog CupertinoAlertDialogの基本的な使い方を紹介します。

ダイアログを表示するにはshowDialogメソッドとセットで使用します。

\ 世界最大級のオンライン学習サービス /

目次

showDialogメソッドの使い方

showDialog(
  context: context,
  barrierDismissible: false,
  builder: (context) {
    return Dialog(); // <- 使用するダイアログを渡す
  }
);

上記コードのようにshowDialogメソッドのbuilderSimpleDialogなどのダイアログWidgetを渡します。

ダイアログの外側がタップされてもメッセージが非表示されないようにするにはbarrierDismissiblefalseにします。

SimpleDialogの使い方

showDialog(
  context: context,
  barrierDismissible: false,
  builder: (context) {
    return SimpleDialog(
      title: Text('SimpleDialog title'),
      children: [
        SimpleDialogOption(
          child: Text('option1'),
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text('option1を選択しました')),
            );
            Navigator.pop(context);
          },
        ),
        SimpleDialogOption(
          child: Text('option2'),
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text('option2を選択しました')),
            );
            Navigator.pop(context);
          },
        )
      ],
    );
  },
);

SimpleDialogでは複数オプションを選択できるダイアログを表示できます。

AlertDialogの使い方

showDialog(
  context: context,
  barrierDismissible: false,
  builder: (context) {
    return AlertDialog(
      title: Text('AlertDialog title'),
      content: Text('This is a demo dialog.'),
      actions: [
        TextButton(
          child: Text('Cancel'),
          onPressed: () => Navigator.pop(context),
        ),
        TextButton(
          child: Text('OK'),
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text('OK')),
            );
            Navigator.pop(context);
          },
        ),
      ],
    );
  },
);

AlertDialogではメッセージ付きのアラートダイアログを表示できます。

CupertinoAlertDialogの使い方

showDialog(
  context: context,
  barrierDismissible: false,
  builder: (context) {
    return CupertinoAlertDialog(
      title: Text('CupertinoAlertDialog title'),
      content: Text('This is a demo dialog.'),
      actions: [
        CupertinoDialogAction(
          child: Text('Cancel'),
          onPressed: () => Navigator.pop(context),
        ),
        CupertinoDialogAction(
          child: Text('OK'),
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text('OK')),
            );
            Navigator.pop(context);
          },
        ),
      ],
    );
  },
);

CupertinoAlertDialogではiOS使用のアラートダイアログを表示できます。

一緒に読みたい

参考

  • URLをコピーしました!
目次