NavigationIntermediate30 XP3 min read
What are RouteObservers and how do they work?
TL;DR: RouteObserver is a NavigatorObserver that widgets can subscribe to. It notifies them when they become active (didPush/didPopNext) or inactive (didPop/didPushNext) — useful for page view analytics.
Full Answer
RouteObserver<T> lets individual widgets react to navigation events without needing to observe the full navigator. Common use case: triggering analytics when a route becomes visible.
- ▸Register the observer in MaterialApp(navigatorObservers: [routeObserver])
- ▸Mixin RouteAware on the State class
- ▸Subscribe: routeObserver.subscribe(this, ModalRoute.of(context)!)
- ▸didPush() — this route was pushed (first time visible)
- ▸didPopNext() — the route above was popped (this route is visible again)
- ▸didPop() — this route was popped (leaving)
- ▸didPushNext() — a new route was pushed on top (leaving focus)
🎯
Many analytics packages (Firebase Analytics) provide their own NavigatorObserver — use those instead of writing your own for analytics tracking.
Code Examples
dartRouteObserver for screen tracking
Output
HomeScreen: appeared (on first push) HomeScreen: returned to from child (when navigating back from another screen)
Common Mistakes
- ✗Subscribing in initState — ModalRoute.of(context) is null; use didChangeDependencies
- ✗Forgetting to unsubscribe in dispose — causes 'listener called after dispose' errors
Interview Tip
💡
Mention Firebase Analytics' FirebaseAnalyticsObserver as a practical production example of NavigatorObserver.
#RouteObserver#analytics#navigation-tracking#lifecycle