Flutter Navigator Middleware Part 1 — RouteObserver

Payam Zahedi
May 25 · 3 min read
Image for post
Image for post

Intro

Maybe you have heard about RouteObserver when you work with Navigator widget. This class is used when you want to observe over navigator changes(like Navigator Pop or Push). If you want to be aware of Navigator changes you should implement RouteAware as a mixin for your single widget(Screen). In this article, we will create a simple example to see how RouteObserver works. In part2, we will create NavigatorMiddleware with RouteObserver. NavigatorMiddleware class will help us be aware of all changes about Navigator, not only a single widget. Also, we can do many other things with this service class like creating Navigator Stack. You can use this link, for the complete source code of this part.

How RouteObserver works?

As I mentioned before:

RouteObserver class used when you want to observe over navigator changes.

But how to use it?

  1. Create your MaterialApp widget.
  2. Create an instance of RouteObserver and pass it to your MaterialApp widget.
  3. Use RouteAware mixin in your widget(Screen) and subscribe to RouteObserver.

Let’s dive into it. Imagine this is your main.dart file:

In MeterialApp widget we have navigatorObservers property. We should first create NavigatorObservers and pass it to MaterialApp.

note: I will create NavigatorObservers instance in global scope.

So our code will be changed to something like this:

We create a RouteObserver instance and pass it to MaterialApp. Now it’s time to register HomePage with RouteAware mixin.

In Line 6, we use with keyword to use RouteAware class as a mixin in our widget. This Class helps us define some callbacks(did* method in code) and we can use these callbacks when we subscribe to RouteObserver. With this approach we can be aware of navigation in our widget.

Note: remember to subscribe to routeObserver in didChangeDependencies method. check the documentation for more info

Conclusion

So in this part, we learned about what RouteObserver is, and how we can use it. We create an instance of RouteObserver and use it in Material App. After that we subscribe to RouteObserver with RouteAware class. Now we can be aware of App Navigation with overriding of some did* methods in our widget.

Remember that our HomePage widget is only aware of navigator changes near itself. But what if we want to be aware of navigator changes in the whole app? There are two ways that we can solve this problem:

  1. Register all widgets(pages) to RouteObserver.
  2. Create a navigation middleware service class.

In the next part, I will inform you how to creating NavigationMiddleware. This approach can be very useful when you want to be aware of every navigator change in your app.

https://www.twitter.com/FlutterComm

Flutter Community

Articles and Stories from the Flutter Community

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store