What is the Difference Between onGenerateRoute and routes In Flutter ??

What is the Difference Between onGenerateRoute and routes In Flutter ??

onGenerateRoute gives you a single place to add your custom business logic before pushing new routes (pages). For example, if you want to do some initialization. So in today’s article, we will walk through What is the Difference Between onGenerateRoute and routes In Flutter.

What is the Difference Between onGenerateRoute and routes In Flutter??

routes property:

When a named route is pushed with Navigator.pushNamed, the route name is looked up in this map.

If the name is present, the associated WidgetBuilder is used to construct a MaterialPageRoute that performs an appropriate transition, including Hero animations, to the new route.

onGenerateRoute property:

The route generator callback used when the app is navigated to a named route. This is used if routes do not contain the requested route.

The problem is that if you use onGenerateRoute to create named routes you won’t be able to get the name of that route from the RouteSettings object on your page.

In other words:

Widget build(BuildContext context) {
    ModalRoute.of(context).settings.name == null;       //bug
    ModalRoute.of(context).settings.arguments != null;  //ok
    ...

This may affect you in case you would like to know the name of the current route. For example, if you want to pop some screens:

navigator.popUntil(ModalRoute.withName('/login'));

Therefore, until this problem is resolved, we recommend using the routes: property.

onGenerateRoute is used if routes do not contain the requested route.

Users can also re-assign the settings of MaterialPageRoute.

final routes = {
  '/': (context) => MainPage(),
};

Code Snippet will look like the below:

var onGenerateRoute = (RouteSettings settings) {
    final String name = settings.name;
      final Function pageContentBuilder = routes[name];
      if (pageContentBuilder != null) {
        if (settings.arguments != null) {
          final Route route = MaterialPageRoute(
              settings: settings,
              builder: (context) => pageContentBuilder(context, arguments: settings.arguments));
          return route;
        } else {
          final Route route =
              MaterialPageRoute(settings: settings,
                  builder: (context) => pageContentBuilder(context));
          return route;
        }
      }
    };

You can also read https://api.flutter.dev/flutter/material/MaterialApp/onGenerateRoute.html

Conclusion:

Thanks for being with us on a Flutter Journey !!!

So in this article, we have been through what is the difference between onGenerateRoute and routes in flutter.

Keep Learning !!! Keep Fluttering !!!

Don’t forget to give us your feedback in the comments right below!!

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.