Create Custom Router Transition in Flutter using PageRouteBuilder

Flutter provides default transition whenever user navigating between the routes. If you think it’s kind of boring, don’t worry. Flutter lets you to custom the transition flexibly. This post will cover the steps to achieve it using PageRouteBuilder.

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.

The Reusable Widget

I don’t know if the term reusable widget is correct or not. But for now, let’s not debate about it. For the above example, create a separate dart file. Name it slide_right_transition.dart .

import 'package:flutter/material.dart';
class SlideRightRoute extends PageRouteBuilder {
  final Widget widget;
  SlideRightRoute({this.widget})
    : super(
        pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
          return widget;
        },
        transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
          return new SlideTransition(
            position: new Tween<Offset>(
              begin: const Offset(-1.0, 0.0),
              end: Offset.zero,
            ).animate(animation),
            child: child,
           );
         }
      );
}

Later, we can use it like the following:

...
import 'package:myapp/slide_right_transition.dart'
...
Navigator.push(
  context,
  SlideRightRoute(widget: DetailScreen()),
);

Notice that the SlideTransition can be replaced by any other transition widgets provided by Flutter such as ScaleTransition or FadeTransition.

So, if you want to create another style of transition, you can then mimic the SlideRightRoute widget above. For example, you want to create an even more fancy transition named ScaleRoute:

import 'package:flutter/material.dart';
class ScaleRoute extends PageRouteBuilder {
  final Widget widget;
  ScaleRoute({this.widget})
    : super(
        pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
          return widget;
        },
        transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
          return new ScaleTransition(
            scale: new Tween<double>(
              begin: 0.0,
              end: 1.0,
            ).animate(
                CurvedAnimation(
                  parent: animation,
                  curve: Interval(
                    0.00,
                    0.50,
                    curve: Curves.linear,
                  ),
                ),
              ),
            child: ScaleTransition(
                     scale: Tween<double>(
                       begin: 1.5,
                       end: 1.0,
                     ).animate(
                       CurvedAnimation(
                         parent: animation,
                         curve: Interval(
                           0.50,
                           1.00,
                           curve: Curves.linear,
                         ),
                       ),
                     ),
                     child: child,
                   ),
           );
         }
      );
}

Conclusion

Custom transition is surely impressive. It will enrich the user experience of your app. But please bear in mind that this not the only way to create custom transition in Flutter. I encourage you to do more experiments and dig deeper to the documentation.