はじめに

FlutterのPopScopeとonPopInvokedWithResult()の使い方を紹介します。

PopScopeの用途

Androidでバックキーや横スワイプで戻る動作が行われたときの挙動を制御したいときに使用します。

PopScopeの使い方

最上位のウィジェットをラップして使用します。

class SampleView extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return PopScope(
      child: Scaffold(
        ...省略...
      )
    )
  }
}

onPopInvokedWithResult()の使い方

PopScope()の引数にcanPop:falseとonPopInvokedWithResult()を追加します。

    return PopScope(
      canPop: false,
      onPopInvokedWithResult: (didPop, __) async {
        if (didPop == true) return;

        if (isEditing) {
            // 画面遷移して良いか確認する
            if (isOk) {
              Navigator.of(context).pop();
            }
        }else {
            Navigator.of(context).pop();
        }
      },
      child: Scaffold(
        ...省略...
      )
    )

onPopInvokedWithResult()は画面をpopする処理が実行されたときと、Androidでバックボタンを押したときに呼ばれます。そのため、Androidでバックボタンを押して、onPopInvokedWithResult()内で画面をpopする処理を実行するとonPopInvokedWithResult()が2回呼ばれてしまいます。

画面をpopする処理が実行されたとき、didPopは常にtrueになります。Androidでバックボタンを押したときのdidPopはPopScopeの引数で設定した値が渡されます。そのため、Androidのバックボタンを動作したときの処理を実行する処理を実装する場合、canPop: falseを設定し、if (didPop == true) return;のように書きます。

まとめ

onPopInvokedWithResult()が登場して当初使い方を間違っていたのですが、デバッグビルドだと検知できずデグレを起こしそうになりました。このあたりもう少し直感的になってくれると嬉しいですね。

ここまで読んでいただけた方はいいねとストックよろしくお願いします。

Flutter製の便利すぎる単語帳アプリBestflipを配信しているのでそちらも見ていただけたら嬉しいです。