【Flutter】RouteAwareで遷移を検知する方法

RouteObserverを定義する

このサンプルの場合main.dartのグローバルに定義しています。
main.dart

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

定義したrouteObserverをMaterialAppに設定する

main.dart

return MaterialApp(
  …
  navigatorObservers: [routeObserver],
  …
);

遷移を検知したい画面で、定義したrouteObserverを使う

検知したいウィジェットにwithでRouteAwareをくっつけて使います。

import '/main.dart'; // main.dartに定義された、routeObserverをインポートするため

class RouteAwareSample extends StatefulWidget {
  const RouteAwareSample({Key? key}) : super(key: key);

  @override
  _RouteAwareSample createState() => _RouteAwareSample();
}

class _RouteAwareSample extends State<RouteAwareSample> with RouteAware {
  @override
  void didChangeDependencies() { // 遷移時に呼ばれる関数
    // routeObserverに自身を設定
    super.didChangeDependencies();
    routeObserver.subscribe(this, ModalRoute.of(context));
  }

  @override
  void dispose() {
    // routeObserverから自身を外す
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  void didPopNext() {
    debugPrint("popされて、この画面に戻ってきました！");
  }

  @override
  void didPush() {
    debugPrint("pushされてきました、この画面にやってきました！");
  }

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

  @override
  void didPushNext() {
    debugPrint("この画面からpushして違う画面に遷移しました！");
  }
}