Flutter Page Route Transition Animation

Animations add much more liveliness to your applications. When it comes to mobile applications it really helps to make your app more attractive. Less animations makes apps more user friendly. You have to choose where to add animations wisely.

Page Route Transition is a common and nice way to add animation. Flutter has a built-in class to animate the page route. To route to a new page, we use PageRouteBuilder. Let’s animate a page route with Tween Animation.

video16 - Trim.mp4

First I have created two classes for Page1 and Page2. Then on each page, I created a TextButton to animate back and forth.

In order to that:

1. Create a route using PageRouteBuilder
2. Animate it using Tween with a Curve
3. Used an AnimatedWidget for Transition

PageRouteBuilder has two callbacks which they take following arguments

• pageBuilder — to build the content of the route

pageBuilder: (context, animation, secondaryAnimation)

• transitionsBuilder — to build the route’s transition

transitionBuilder: (context, animation, secondaryAnimation, child)

the child in transitionBuilder returns the page from the pageBuilder. After this the code will looks like this

return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) 
{
...
}

To create a Tween we need to provide it begin and end. You can set offset to the transition you want. for Above transition the begin and end should be like this and give it to the Tween

var begin = const Offset(1.0, 0.0);
var end = Offset.zero;
var curve = Curves.ease;
var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

Now to create transition, I am using SlideTransition you can use of your own choice.

To Create animation, We need to give this tween to SlideTransition and a child. The transition will look like this.

var begin = const Offset(1.0, 0.0);
var end = Offset.zero;
var curve = Curves.ease;
var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
return SlideTransition(
    position: animation.drive(tween),
    child: child,
);

And the PageRouteBuilder will looks like this.

Route _createRoute() {
    return PageRouteBuilder(
        pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
        transitionsBuilder: (context, animation, secondaryAnimation, child) {
          var begin = const Offset(1.0, 0.0);
          var end = Offset.zero;
          var curve = Curves.ease;
          var tween =
              Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
          final offsetAnimation = animation.drive(tween);
          return SlideTransition(
            position: offsetAnimation,
            child: child,
          );
        });
  }

Now the PageRouteBuilder is ready. We need to add a navigator to push the page using this PageRouteBuilder to add the animation to Page Navigation.

TextButton(
    onPressed: () => Navigator.of(context).push(_createRoute()),
    child: const Text('Navigate to page 2'),
),

The onPressed property of the TextButton will navigate to page 2 with the animation build above.

And When returning from page 2, We just need to pop the navigator. This will go back to page with the transition reversed.

TextButton(
    onPressed: () => Navigator.pop(context),
    child: const Text('Go back to page 1'),
),

You can control the animation duration by giving transitionDuration to PageRouteBuilder like this.

transitionDuration: const Duration(milliseconds: 500),

Conclusion:

Now you have build the animation for routing the page in Flutter. Kindly drop a suggestion to improve the next articles and provide you with more quality content.