In this article, We are going to discuss how to observe screen transition in Flutter. As you know Flutter’s widgets do not have any handler methods to handle events related to screen-transitions because widgets do know if they are a part of the screen or whole.
As you know in the flutter navigation is handled by Navigator and is also responsible for screen transitions. There are different options like push, pop screens, and the list of NavigatorObserver can also be passed to Navigator to receive events related to screen-transitions.
A custom NavigatorObserver can also be used but if the handling of it in the state is required then it is a better option to go with the RouteObserver.
What is RouteObserver ?
RouteObeserver is a Navigator observer that notifies RouteAwares of changes to the state of their Route.
A quote from a RouteObserver class to make Its Intention clear.
RouteObserver informs subscribers whenever a route of type R is pushed on top of their own route of type R or popped from it. This is for example useful to keep track of page transitions, e.g. a RouteObserver<PageRoute> will inform subscribed RouteAwares whenever the user navigates away from the current page route to another page route.
Its implementation is quite simple and handy also works very well but when it comes to such an application with various screens it becomes quite huge.
Now let’s understand its working where we would learn its functioning and also get to know how to set different screen transitions in the app as a bonus.
There are two ways to do this as in flutter there are two classes RouteAware and RouteObserver. At first, we would go with RouteAware class.
RouteAware
So lets first understand how does this work and functionalities it possess :
https://gist.github.com/shivanchalaeologic/cf732cc93dd98046c431e928c0bf135b#file-route_aware-dart
As you can understand by reading the above code snippet it is an interface of an object that notifies the current route during transitions and consists of four methods didPopNext(), didPush(),didPop() and didPushNext() these are called at different scenarios as you can read in the code.
Now let’s add this into our code. For this first, we create an instance of RouteObserver then mention all pages where we want to navigate and in navigatorObservers we provide that instance of RouteObserver
https://gist.github.com/shivanchalaeologic/fdf3dd6a084dbc4727343f35792effff#file-main-dart
After that, we move to that RouteAware class from where we will get to know about all the page transitions which are going to take place by using RouteAware() Widget. and get this kind of info :
But for this result like this, we need to implement those four methods mentioned in route_aware.dart. You can implement these methods in every class like this :
https://gist.github.com/shivanchalaeologic/a4ae57023337415312eebc6f79988de3#file-page_two-dart
But writing this boilerplate in every file is not good, So we will make a separate class for this and you will get that expected result.
https://gist.github.com/shivanchalaeologic/c6dce39ba4eb8a46ca819806e113fdd6#file-route_aware-dart
RouteObserver :
RouteObserver is a class that informs user or subscriber if a user navigates to another screen or a route of type “R” is pressed as you can understand easily by reading comments in this official code snippet.
https://gist.github.com/shivanchalaeologic/447fd6290fbb9d4e3d7970853c6cf4ff#file-route_observer-dart
Let’s understand how to use RouteObserver in our app,
The only thing you need to do is by extending RouteObserver you can use those four methods according to your need mentioned in route_aware.dart class.
After that, You need to call this class in main.dart & It will automatically notify all the screen transitions.
https://gist.github.com/shivanchalaeologic/24ed18f08f0f14fffbcfaedbd432ef97#file-main-dart
Conclusion
When you are making large scale projects it is necessary to observe transitions meticulously to rectify code compile time its responsiveness then it becomes must because as a developer you get to know about how your app is responding in different scenarios. So as a solution these two techniques are available here to help you out.
Thanks for reading this article if you find anything that could be improved please let me know, I would love to improve.💙
If this article has helped you a bit and found interesting please clap!👏
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
