【Flutter】画面遷移を検知して処理を行う

Flutter で、画面遷移を検知して処理を行う方法について紹介します！

方法
まとめ
参考
おすすめ書籍

方法

observer の登録

まずは、画面遷移イベントの observer を登録します。

以下のように、インスタンスを生成します。

final RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();

MaterialApp の navigatorObservers に生成した observer を登録します。
observer は複数登録することができます。複数の画面で遷移を検知したい場合は、画面ごとに observer を作成し、すべて登録します。

@override
Widget build(BuildContext context) {
  return MaterialApp(
    …,
    navigatorObservers: [routeObserver],
  );
}

イベントの購読

observer が登録できたら、画面遷移イベントの購読設定を行います。
以下のように、画面遷移を検知したいクラスで with RouteAware を付加します。(1行目)
そして、didChangeDependencies でイベント購読(6行目)、dispose でイベント購読解除(12行目)の設定を行います。

class _MyPageState extends State<MyPage> with RouteAware {
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 画面遷移イベントを購読
    routeObserver.subscribe(this, ModalRoute.of(context) as PageRoute);
  }

  @override
  void dispose() {
    // 画面遷移イベントを購読解除
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  …
}

画面遷移時の処理

イベント購読設定までできたら、画面遷移時の処理を記述します。

画面遷移が検知された時に呼び出されるメソッドと呼び出しタイミングは、以下の表の通りです。

メソッド	呼び出されるタイミング
didPush	画面が push されたとき
didPushNext	次の画面が push されて画面が非表示になったとき
didPopNext	上の画面が pop されて画面が表示されたとき
didPop	画面が pop されたとき

以下に、コード例を示します。

class _MyPageState extends State<MyPage> with RouteAware {
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    routeObserver.subscribe(this, ModalRoute.of(context) as PageRoute);
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  void didPush() {
    debugPrint("didPush: この画面がpushされた");
  }

  @override
  void didPushNext() {
    debugPrint("didPushNext: 次の画面がpushされてこの画面が非表示になった");
  }

  @override
  void didPopNext() {
    debugPrint("didPopNext: 上の画面がpopされてこの画面が表示された");
  }

  @override
  void didPop() {
    debugPrint("didPop: この画面がpopされた");
  }

  …
}

まとめ

Flutter で画面遷移を検知して処理を行う方法について紹介しました！

RouteObserver で、画面遷移の検知が可能
画面遷移イベントの購読、購読解除を設定し、以下のメソッドで画面遷移を検知可能
- didPush（画面が push されたとき）
- didPushNext（次の画面が push されて画面が非表示になったとき）
- didPopNext（上の画面が pop されて画面が表示されたとき）
- didPop（画面が pop されたとき）

以上で、【Flutter】画面遷移を検知して処理を行う は終わりです。