onGenerateRoutes and onUnknownRoutes in Flutter, Handle error route, show error page in flutter.

Hello Readers, Greetings for the day.!

In this article, we will look at Some advance Navigation concepts in Flutter, so as always be ready with your cup of a coffee.

Photo by Himesh Kumar Behera on Unsplash

Before reading further I insist you to be aware of what is navigation and how to do in flutter. How to traverse from one page to other in forward and backward direction with and without data. If you are not aware then please read out below article and then continue with this.

Flutter Navigation Guide - Push(), Pop() with all required methods.

What is the purpose of onGenerateRoute(settings):
It is a property/attribute of a MaterialApp and CupertinoApp. Now suppose you are using named(pushNamed()) routing in your application. So to use named routes you first need to register your route to the “routes : { }” property of the MaterialApp or CupertinoApp.

So anyhow you forget to register some of the pages/routes and user tries to hit the page. So what will happen? how to handle this scene? So the answer is using onGenerateRoute property. You can define direction for that all the undefined route navigations.

In simple words, onGenerateRoute is used to handle the route navigation which is not registered in your route table via “routes:{}” property. It returns a Route as a result, and it is recommended that it should not return null.

It accepts RouteSettings object, You can get arguments, name of the page from the this object. Take a look at the below code snippet, here we have returned a screen/page named “UnregisteredRouteScreen” for any un-registered navigation.

MaterialApp(
 debugShowCheckedModeBanner: false,
 initialRoute: “/”,
 routes: {
    “/” : (context) => const HomeScreen(),
    “/gallery-screen” : (context) => const GalleryScreen(),
    “/details-screen” : (context) => const DetailScreen(),
 },
 // // For un-registered named routes
 onGenerateRoute: (settings) {
   return MaterialPageRoute(builder: 
          (_) => const UnregisterdRouteScreen());
 },
);

Generally, onGenerateRoute is not much used in applications, but it is important to understand the concept. Hope you got above explanations.

Let’s discuss about OnUnknownRoute property:
As name itself defines that this property is related to the route which is unknown for the application. It is available in both MaterialApp and CupertinoApp.

When it comes into the picture:
Assume your app has 2 screens, screen1 and screen2. Now, user has clicked on a button to navigate to the screen2, but in the code part, by mistake you’d typo mistake and string URL of next screen or route path is wrong. Which is not exists in route table - (routes:{} property), also not mentioned or handled by the onGenerateRoute(suppose you’ve not added onGnerateRoute property).

Think about the behaviour… App will be crashed… which is not an acceptable behaviour in any case…

To overcome this situation, you can use OnUnknownRoute property. It will handle un-registered named routes, also the routes which is not handled by the onGenerateRoute property.

It is more usable to show an Error page in your application. So app will not crash, instead will show an error page to the user.

It also accepts the object of RouteSettings. Please take a look at the below code snippet. It should return a Route based on your App Widget.

MaterialApp(
 debugShowCheckedModeBanner: false,
 initialRoute: “/”,
 routes: {
   “/” : (context) => const HomeScreen(),
   “/gallery-screen” : (context) => const GalleryScreen(),
   “/details-screen” : (context) => const DetailScreen(),
 },
 // For unknown routes / to show error page for unexpected events
 onUnknownRoute: (settings) {
     return MaterialPageRoute(builder: (_) => const ErrorScreen());
 },
);

Thank You!, Hope you enjoy and got some help from this article. You can always write me on dalwadidarshan83@gmail.com for any queries or concerns.