Flutter: All you need to know about Animated Routing.

You all know that routing in flutter is easy, we just need to push and pop to route from one page to another.

Push:

Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => const SecondRoute()),
  );
// or
Navigator.of(context).push(
    MaterialPageRoute(builder: (context) => const SecondRoute()),
  );

Pop:

Navigator.pop(context);
//or
Navigator.of(context).pop();

but you know what, we can add animation to the above routing. Yes, It’s possible and we will use PageRouteBuilder to do so.

We will First do it with Animated widgets like FadeTransition, SlideTansition, ScaleTransition, and RotationTransition and will also combine multiple transitions to get a combined transition.

1. FadeTransition:

We will use the above FadeTransitionBuilder like this.

Navigator.push(
    context,
    fadeTransitionBuilder(SecondRoute());
  );

2. Rotation Transition:

3. Slide Transition:

By changing the starting offset you can get several different types of transition just by using Slide transition.

4. Scale Transition:

Curves And Duration:

Till now we have seen the code for 4 different types of Transition and now we will see how to add Duration(better to go with default duration) and Curves in any of the above transitions.

PageRouteBuilder fadeTransitionBuilder({required Widget child}) {
   return PageRouteBuilder(
     transitionDuration: const Duration(seconds: 2),
     pageBuilder: (context, animation, secondaryAnimation) => child,
     transitionsBuilder: (context, animation, secondaryAnimation, child) {
     final _opacity = animation.drive(Tween<double>(begin: 0, end:  1).chain(CurveTween(curve: Curves.bounceIn)));
       return FadeTransition(opacity: _opacity, child: child);
    });
}

To learn more about curves, you can refer here
https://api.flutter.dev/flutter/animation/Curves-class.html

Combined Transition:

we can combine multiple transitions to get a combined transition of more than one Transition.

Let’s combine Scale and rotation transition to see the combined result.

PageRouteBuilder scaleRotationTransitionBuilder({required Widget child}) {
return PageRouteBuilder(
 pageBuilder: (context, animation, secondaryAnimation) => child,
 transitionsBuilder: (context, animation, secondaryAnimation, child)   {
    final _scale = animation.drive(Tween<double>(begin: 0, end: 1));
    return ScaleTransition(
        scale: _scale,
        child: RotationTransition(
        turns: _scale,
        child: child,
    ));
 });
 }

Thinking of using this with Named Routing, Don’t worry I am here😊.

//Define your NamedRoute
Route<dynamic> genereateRoute(RouteSettings settings) {  
    switch (settings.name) {    
       case "secondPage":    
             return fadeTransitionBuilder(child: secondPage());
}
// use this to route
Navigator.of(context).pushNamed("secondRoute"),
--------------------------------------------------------------------
I am using generateRoute,that you need to bind with 
MaterialApp (
... 
onGenerateRoute: genereateRoute)

Thank you for going through the whole blog. I am attaching a GitHub Repo link for your reference where you can see the full example.
https://github.com/NishadAvnish/Flutter_Blog/tree/master/page_transition