個人開発者が勉強がてらまとめているだけのサイトです

アラートダイアログ Alert Dialog

画面の真ん中に小さな窓が出て、「本当に削除しますか?」のように答えを求める。

別名
確認ダイアログ確認モーダルポップアップアラートConfirm DialogModal
動き
中央に出る背景が暗くなる
作り方
標準ウィジェット Flutter に入っているものだけで作れます

本物の Flutter ウィジェットが動きます(初回は数秒かかります)

別タブで大きく開く ↗

どんなもの?

ユーザーの作業を止めてでも確認したいときに使います。止める力が強いぶん、多用すると嫌われます。

showDialog に AlertDialog を渡すだけで出せ、await で押されたボタンの結果を受け取れます。

ボタンの文言は「OK」ではなく「削除」のように何が起きるかを書くと迷わせません。

iOS らしくしたいときは CupertinoAlertDialog、自動で切り替えたいときは AlertDialog.adaptive を使います。

こんなときに

  • 削除・送信など取り消せない操作の直前の確認
  • 続けるために必ず読んでほしい重要なお知らせ

避けたい場面

  • 「保存しました」のような単なる報告(SnackBar で十分。作業を止めない)

最小コード

final ok = await showDialog<bool>(
  context: context,
  builder: (context) => AlertDialog(
    title: const Text('メモを削除しますか?'),
    content: const Text('削除したメモは元に戻せません。'),
    actions: [
      TextButton(
        onPressed: () => Navigator.of(context).pop(false),
        child: const Text('キャンセル'),
      ),
      FilledButton(
        onPressed: () => Navigator.of(context).pop(true),
        child: const Text('削除'),
      ),
    ],
  ),
);

使うウィジェット

showDialogAlertDialogCupertinoAlertDialog

似ているもの・一緒に見たいもの

触ってみる ↗
ダイアログ・シート アクションシートAction Sheet

iOS でおなじみの、下から選択肢の束と、離れた「キャンセル」ボタンが出てくるシート。

下から出てくる