• Everything you need to know about Flutter Page route transition
  • Divyanshu Bhargava
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: EmilyQiRabbit
  • Proofreader: Charlo-o

When using Flutter, we all know how easy it is to jump from one route to another. All we need to do is push and pop.

A push operation:

Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
Copy the code

Pop operation:

Navigator.pop(context);
Copy the code

It’s that simple. But doing this, the route jump is just boring page switching, completely unanimated 😦

When we first applied animations in Winkl, we realized that the transition effect of page jumps can make your user interface look nice. If you’re looking for a scrolling page switch like you do on iOS, you can use CupertinoPageRoute. Just this one. Nothing else.

Navigator.push(
    context, CupertinoPageRoute(builder: (context) => Screen2()))
Copy the code

But Flutter offers a different solution for user-defined transitions: animation components. Let’s see how to apply it.

As we know, Navigator. Push takes two arguments (BuildContext Context, Route Route). We can use some transition animations to create custom page routing jumps. Let’s start with some simple examples, like sliding transitions.

Slide transition

First, we will extend the class PageRouteBuilder, and then define transitionsBuilder, which will return the sliding transition component. The sliding transition component will use the position information of the type Animation. We will use Tween to give the offset of the beginning and end of the Animation.

import 'package:flutter/material.dart';

class SlideRightRoute extends PageRouteBuilder {
  final Widget page;
  SlideRightRoute({this.page})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              page,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              SlideTransition(
                position: Tween<Offset>(
                  begin: const Offset(-1, 0),
                  end: Offset.zero,
                ).animate(animation),
                child: child,
              ),
        );
}
Copy the code

We can now use SlideRightRoute like this, instead of the MaterialPageRoute.

Navigator.push(context, SlideRightRoute(page: Screen2()))
Copy the code

The effect of the code running is…

The code is pretty simple, right? You can change the direction of the slide transition by modifying the offset.

Scaling of the transition

The zoom transition animates the effect by changing the size of the component. You can also change the animation by modifying the Curves of the CurvedAnimation. For this example I used Curves. FastOutSlowIn.

import 'package:flutter/material.dart'; class ScaleRoute extends PageRouteBuilder { final Widget page; ScaleRoute({this.page}) : super( pageBuilder: ( BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, ) => page, transitionsBuilder: ( BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child, ScaleTransition(scale: Tween<double>(begin: 0.0, end: 1.0,).animate(CurvedAnimation(parent: animation, curve: Curves.fastOutSlowIn, ), ), child: child, ), ); }Copy the code

The effect of the code running is…

Rotating transition

The rotation transition animates the rotation as the component. You can also add transitionDuration to your PageRouteBuilder.

import 'package:flutter/material.dart'; class RotationRoute extends PageRouteBuilder { final Widget page; RotationRoute({this.page}) : super( pageBuilder: ( BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, ) => page, transitionDuration: Duration(seconds: 1), transitionsBuilder: ( BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child, Turn: Tween<double>(begin: 0.0, end: 1.0,). Animate (CurvedAnimation(parent: animation, curve: Curves.linear, ), ), child: child, ), ); }Copy the code

The effect of the code running is…

The size of the transition

import 'package:flutter/material.dart';

class SizeRoute extends PageRouteBuilder {
  final Widget page;
  SizeRoute({this.page})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              page,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              Align(
                child: SizeTransition(
                  sizeFactor: animation,
                  child: child,
                ),
              ),
        );
}
Copy the code

The effect of the code running is…

The gradient transition

import 'package:flutter/material.dart';

class FadeRoute extends PageRouteBuilder {
  final Widget page;
  FadeRoute({this.page})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              page,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              FadeTransition(
                opacity: animation,
                child: child,
              ),
        );
}
Copy the code

The effect of the code running is…

Awesome!! Now we’ve gone through all the basic transition effects.

Now let’s try something a little more advanced. What if you want to animate both the entry and exit routes? We can use stack Transition animations and apply them to both of these route jumps. An example would be to slide into a new page and underline the old page. This is my favorite transition animation ❤️. Let’s look at how the code is implemented.

import 'package:flutter/material.dart';

class EnterExitRoute extends PageRouteBuilder {
  final Widget enterPage;
  final Widget exitPage; EnterExitRoute({this.exitPage, this.enterPage}) : super( pageBuilder: ( BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, ) => enterPage, transitionsBuilder: ( BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child, ) => Stack(children: <Widget>[SlideTransition(position: new Tween<Offset>(begin: const Offset(0.0, 0.0), end: Const Offset(-1.0, 0.0),). Animate (animation), child:exitPage,), SlideTransition(position: new Tween >(begin: const Offset(1.0, 0.0), end: Offset.zero, ).animate(animation), child: enterPage, ) ], ), ); }Copy the code

Then use EnterExitRoute as follows:

Navigator.push(context,
    EnterExitRoute(exitPage: this, enterPage: Screen2()))
Copy the code

The effect of the code running is…

We can also combine multiple transition effects to create many magical effects, such as scaling and rotation at the same time. First, create ScaleTransition, whose child property contains the RotationTransition, and the RotationTransition child property is the page to animate.

import 'package:flutter/material.dart'; class ScaleRotateRoute extends PageRouteBuilder { final Widget page; ScaleRotateRoute({this.page}) : super( pageBuilder: ( BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, ) => page, transitionDuration: Duration(seconds: 1), transitionsBuilder: ( BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child, ScaleTransition(scale: Tween<double>(begin: 0.0, end: 1.0,).animate(CurvedAnimation(parent: animation, curve: Curves. FastOutSlowIn,),), child: RotationTransition(turns: Tween<double>(begin: 0.0, end: .animate(Parent: animation, curve: Curves. Linear,), child: child,),),); }Copy the code

The effect of the code running is…

Great! That’s all you need to know about the Flutter page routing transition animation. Try your hand at combining different transitions to create some great animations, and don’t forget to share your results with me. All code source visible: GitHub repository.

If you liked this post please like it and contact me on Twitter, Github and LinkedIn.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.