What is PageRouteBuilder?

Well, according to the docs, it is:

A utility class for defining one-off page routes in terms of callbacks.

Let’s say you have two routes: First and Second. You’re in First and you want to navigate to Second. Somewhere in the First you’ll do:

Navigator.pushReplacement(context, Second());

This is where the PageRouteBuilder steals the show. Instead of passing Second() as the second parameter, we will use the following instead:

PageRouteBuilder(

pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {

return Second();

},

transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {

return SlideTransition(

position: new Tween<Offset>(

begin: const Offset(-1.0, 0.0),

end: Offset.zero,

).animate(animation),

child: new SlideTransition(

position: new Tween<Offset>(

begin: Offset.zero,

end: const Offset(-1.0, 0.0),

).animate(secondaryAnimation),

child: child,

),

);

},

);

Voila! you’ll see the Second() slides in from the right of the screen.

Q: How to apply it to another navigation action?

A: Just use it all over again.

Q: Wait,, WHAT? It would be difficult to maintain!

A: Okay. We can create a separate reusable widget for it. This way, we even can define a specific style of transition that we want to use.