Flutter: onGenerateRoute & Custom Page Transitions & Custom Dialogs

In this post, I’ll go over two things: (1) how to use onGenerateRoute and (2) how to build custom page transitions and (3) how to build custom modal dialog.

Here’s a video of the simple customization I did (and full code).

custom_route_transitions

OnGenerateRoute

Both routes and onGenerateRoute are used to register a route so that you can use it when you use Navigator to push that route. Although Route does have the advantage that it is much shorter and simpler code…

routes: {
  Main.routeName: (BuildContext ctx) => Main(),
  LoginPage.routeName: (BuildContext ctx) => LoginPage(),
},

…onGenerateRoute allows you to customize your route so that you do not have to do it each time you use Navigator.push():

1. You can customize your route transition here, as I have (which I will go over below).
2. I’ve seen posts about people saying that you can’t use ModalRoute.of(context).settings.arguments or settings.name on that screen…which is just completely untrue. You can receive arguments via settings.arguments when you Navigator.push(arguments: …) in onGenerateRoute or ModalRoute.of(context).settings but you NEED to push the settings: RouteSettings(name: , arguments: if you have any).

Custom Page Routes

Sometimes, you don’t want to use the default page transitions given by MaterialPageRoute or CupertinoPageRoute. Then, you can replace MaterialPageRoute/CupertinoPageRoute with our own custom page routes using RoutePageBuilder.

class MaterialPageRoute<T> extends PageRoute<T> with  ...

Let’s take a look at PageRoute, which is an abstract class.

PageRoute class

A ModalRoute class is “a route that blocks interaction with previous routes.” It is used as the base of all routes, including pop-up dialogs.

If we take a look at onGenerateRoute, it returns a Route class, and RoutePageBuilder is an extension of PageRoute…which is why we can use classes that extend RoutePageBuilder in onGenerateRoute.

Extending PageRouteBuilder

In Dart, you need to extend a class if you want to use the extending class’ properties and when you extend, you need to invoke the super’s constructor — implicitly or explicitly (explicitly user super () if the super class takes arguments). But unlike implementing a class, you do not need all the methods and variables of extended class. But for all the properties below, you can customize it in the super constructor.

PageRouteBuilder class

With Dart 2.17, super initializers have become super convenient to use (more on it in this article). Here’s my custom transitions for slide (horizontal and vertical), fade, and rotation. For slide_vertical, I put in a provider parameter in case you need to use a provider for that specific page. If you don’t want any reverse transition, just set the duration to 0.

Pop Up Dialogs

You can also customize the routes so that it acts like Modal Dialogs. For the dialog itself, make sure to wrap it a Card or Dialog (or something of that sort).