Everything you need to know about migrating from a Flutter page

Prospective students on the course Flutter Mobile Developer and all those interested are invited to sign up for an open online lesson on the topic “Graphics in Flutter”… In the lesson, the participants, together with an expert-presenter, will analyze how rendering in Flutter works and study the main components of the library dart:ui…

And now we are sharing with you the traditional translation of interesting material.

We know how easy it is to navigate from one route to another in Flutter. We just need to add and pull.

Add:

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

Pull out:

Navigator.pop(context);

Like this. But it’s boring, there is no animation on the site

IN WinklWhen we started playing with animation, we realized that going to a page can really make your UI look pretty. If you want to have a slide transition like IOS you are using CupertinoPageRoute… That’s all, nothing else.

But for a custom transition, Flutter provides various transition widgets… Let’s see how we can use them.

We know that Navigator.push takes two arguments (BuildContext context, Route<T> route). We can create our own page route with some transition animation. Let’s start with something simple like a slide transition.

Slide transition

We will expand PageRouteBuilder and define transitionBuilderwhich will return the widget SlideTransition… Widget SlideTransition takes a position like Animation<Offset>… We will use Tween<Offset> to set the start and end offset.

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,
              ),
        );
}

We can now use SlideRightRoute instead MaterialPageRoute like this.

Navigator.push(context, SlideRightRoute(page: Screen2()))

Result:

Pretty simple, isn’t it? You can change the direction of the slide transition by changing the offset.

Scale transition

Scale transition animates the scale of the transformed widget. You can also change the way you animate by changing the curves CurvedAnimation… In the example below I have 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,
              ),
        );
}

Result:

Rotary transition

Rotation transition animates the rotation of the widget. You can also provide transitionDuration for 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,
          ) =>
              RotationTransition(
                turns: Tween<double>(
                  begin: 0.0,
                  end: 1.0,
                ).animate(
                  CurvedAnimation(
                    parent: animation,
                    curve: Curves.linear,
                  ),
                ),
                child: child,
              ),
        );
}

Result:

Dimensional transition

More details

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,
                ),
              ),
        );
}

Result:

Shadow transition

More details

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,
              ),
        );
}

Result:

Great! We saw all the main transitions.

Now let’s do something a little more advanced. What if we want to animate both routes. Entry route (new page) and exit route (old page). We can use a stack transition animation and apply it to both routes. One example would be a slide in a new route and a slide from an old route. This is my favorite transition animation. Let’s see how to do this.

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<Offset>(
                      begin: const Offset(1.0, 0.0),
                      end: Offset.zero,
                    ).animate(animation),
                    child: enterPage,
                  )
                ],
              ),
        );
}

And use it like this.

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

Result:

We can also combine multiple transitions to create something awesome like scale and rotation at the same time. First, there is ScaleTransition, its child is RotationTransitionand its child is a page.

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: 1.0,
                  ).animate(
                    CurvedAnimation(
                      parent: animation,
                      curve: Curves.linear,
                    ),
                  ),
                  child: child,
                ),
              ),
        );
}

Result:

Great job guys! That’s all you need to know about Flutter route transition animations. Try to combine some transition and do something great. If you do something interesting, you can share it with me. All source code here at GitHub repo… You can contact me at Twitter, Github and LinkedIn…