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

戻る前の確認 Confirm Before Leaving

入力の途中で戻ろうとすると、「変更を破棄しますか?」と確認が出て、うっかり消えるのを防ぐ。

別名
変更を破棄しますか離脱確認戻るボタンの確認未保存の警告PopScopeWillPopScope
動き
戻ろうとすると止まる確認が出る
作り方
標準ウィジェット Flutter に入っているものだけで作れます

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

別タブで大きく開く ↗

どんなもの?

入力中のフォームで、戻るボタンや iOS のスワイプ・Android の戻る操作を一度止めて確認します。

画面を PopScope で包み、変更があるときだけ canPop: false にします。

止められた戻る操作は onPopInvokedWithResult に didPop: false で届くので、そこで確認ダイアログを出し、

「破棄する」が選ばれたら Navigator.pop で改めて戻ります。

以前の WillPopScope は廃止予定で、今は PopScope を使います。

こんなときに

  • 入力に時間がかかるフォーム(投稿・プロフィール編集・長文)

避けたい場面

  • 何も変更していないときまで確認を出す(毎回止められると煩わしい)

最小コード

PopScope(
  canPop: !hasChanges, // 変更があるときだけ戻るのを止める
  onPopInvokedWithResult: (didPop, result) async {
    if (didPop) return;
    final discard = await showDialog<bool>(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('変更を破棄しますか?'),
        actions: [
          TextButton(onPressed: () => Navigator.pop(context, false), child: const Text('編集を続ける')),
          FilledButton(onPressed: () => Navigator.pop(context, true), child: const Text('破棄する')),
        ],
      ),
    );
    if (discard == true && context.mounted) Navigator.pop(context);
  },
  child: const EditForm(),
)

使うウィジェット

PopScopeshowDialog

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