How To Add Navigator Observer To Your Flutter App

Have you ever noticed an error like the screen that you’re trying is not in context or not in the navigation stack/tree? Or ever get stuck in Flutter navigation? Don’t worry we’re here to help you out with these kinds of issues. In this blog post, we will discuss how to add Navigator Observer to your Flutter app and how to use it to implement some common tasks.

Navigator Observer

Navigator Observer is a built-in Flutter class that allows you to observe and intercept route navigation within your app. In simple terms, it lets you track the movement between different screens or pages in your app. This is especially useful when you want to perform specific actions, such as analytics tracking, authentication checks, or even custom animations, as your users navigate through your app.

Why should you use Navigator Observer?

Using Navigator Observer can greatly enhance the user experience of your Flutter app. It gives you the ability to add custom logic and animations during navigation, track user flow, and perform actions based on specific navigation events.

Prerequisite

Before using a Navigator Observer in your Flutter app, you must initialize the Flutter project setup.

This means that you need to create a new Flutter project and install the necessary dependencies. You can do this by following the steps in the Flutter documentation: https://flutter.dev/get-started

Once you have initialized your Flutter project setup, you can start using a Navigator Observer.

Navigator Observer Methods

Flutter provides multiple Navigator Observer class methods that are used to listen for and respond to navigation events. These methods are:

• `didPush` calls when `Navigator.of(context).push` gets called.
• `didPop` calls when `Navigator.of(context).pop` gets called.
• `didRemove` calls when there are many routes in the navigation stack and you call `Navigator.of(context).popUntil`.
• `didReplace` calls when `Navigator.of(context).pushReplacement` or `Navigator.of(context).pushAndRemoveUntil` gets called.

In iOS, when you are on a screen and there is another screen behind it, the ‘didStartUserGesture()’ method is called when you start a gesture to go back, such as sliding the screen. The ‘didStopUserGesture()’ method is called when you stop the gesture.

You can use any or all of the Navigator Observer methods in your own Custom Navigator Observer to track the navigation stack while the screen routing changes.

For example, you could use the ‘didStartUserGesture()’ method to pause an animation while the user is navigating to a previous route. Or, you can use the ‘navigator.currentRoute’ property to get the name of the current route and update the UI accordingly.

Also Read: Implementation of NFC in Flutter To Transfer Peer-to-peer Data Using The Nfc_manager Package

Steps To Add Navigator Observer in Flutter Mobile Application

To add a Navigator Observer to your Flutter mobile application, you can follow these steps:

1. Create a Custom Navigator Observer Class

Create a class named ‘AppNavigatorObserver’. You can name it whatever you like, but it is recommended to use a descriptive name that indicates the purpose of the class.

class AppNavigatorObserver{ 

}

2. Extend the Class

Now extend the ‘AppNavigatorObserver’ class with `NavigatorObserver`.

class AppNavigatorObserver extends NavigatorObserver{

}

Now you can use all flutter navigation methods(explained above) in your own Navigator Observer `AppNavigatorObserver`. This means that you can track and respond to all of the same events that Flutter's built-in Navigator observers track, such as: Push and Pop routes, Replace & Remove routes, Move routes, and Start & stop user gestures.

3. Create a navigationRoutes Member

Create a navigationRoutes member inside our ‘AppNavigatorObserver class’ to store the names of the current navigation routes in real time To create the navigationRoutes member, we would simply add a new List field to the AppNavigatorObserver class:

class AppNavigatorObserver extends NavigatorObserver{
 	final List<String> navigationRoutes = [];
}

4. Override or Update the navigationRoutes Methods

We need to update or override the didPushRoute(), didPopRoute(), didReplaceRoute(), and didRemoveRoute() methods to add, remove, and update the navigationRoutes list as needed. Here, we override the `didPush` method of `NavigatorObserver` to store all the routes that are being inserted in the Navigation stack and print the navigation stack when any route pushes.

class AppNavigatorObserver extends NavigatorObserver{
final List<String> navigationRoutes = [];

	@override
void didPush(Route route, Route? previousRoute) {
	pages.add(route.settings.name ?? '');
	print(pages.toString());
}
}

Do the same thing when any route pops, removes or replaces by overriding the didPop(), didRemove(), and didReplace() methods of our MyObserver class. Here is an updated version of the MyObserver class that overrides all three methods:

class MyObserver extends NavigatorObserver {
final List<String> pages = [];

@override
void didPush(Route route, Route? previousRoute) {
	pages.add(route.settings.name ?? '');
	print(pages.toString());
}

@override
void didReplace({Route? newRoute, Route? oldRoute}) {
 	if (newRoute == null) return;
 	final index =
 	pages.indexWhere((element) => newRoute.settings.name == element);
	pages[index] = newRoute.settings.name ?? '';
	print(pages.toString());
}

@override
void didRemove(Route route, Route? previousRoute) {
	pages.remove(route.settings.name ?? '');
	print(pages.toString());
}

@override
void didPop(Route route, Route? previousRoute) {
	pages.remove(route.settings.name ?? '');
	print(pages.toString());
}
}

Now, whenever a route is pushed, replaced, removed, or popped, the didPush(), didReplace(), didRemove(), or didPop() method of our MyObserver class will be called, and the navigation stack will be printed to the console.

That’s it…! You have successfully added a Navigator Observer to your Flutter app development! This gives you more control and flexibility in managing routes and customizing behavior to suit your needs.

Conclusion

The Navigator Observer is a powerful tool to manage and customize navigation in Flutter app development. By implementing the steps explained in this article, you can enhance the user experience by adding custom logic, tracking navigation events, and incorporating seamless transitions. Remember to test and debug your implementation thoroughly to ensure the desired functionality. With a solid understanding of Navigator Observer and its capabilities, you can now create dynamic and intuitive navigation experiences in your Flutter projects. So, go ahead and start experimenting with Navigator Observer to take your app's navigation to the next level!

If you need help with your Flutter app development project, contact CodeTrade India, a leading mobile app development company that provides top-notch Flutter development services. You can also hire dedicated Flutter developers from CodeTrade to meet your specific needs. Contact CodeTrade today!