Related Articles

Related Articles

Flutter – Animation in Route Transition
  • Last Updated : 16 Oct, 2020

Routes are simply Pages in Flutter applications. An application often needs to move from one page to another. But to make these transition smoother, Animations can be used. These animations can be used to curve or tween the Animation object of the PageRouteBuilder class to alter the transition animation. We will discuss them in detail here.

Let’s just build a simple app to better understand the concept. Follow the below steps to do so:

  • Add the PageRouteBuilder.
  • Add a tween.
  • Create an AnimatedWidget
  • Create a CurveTween.
  • Combine both tweens

Let’s discuss each step in detail:

Adding the PageRouteBuilder:

By using the PageRouteBuild create two routes with the first route as the “Homepage” with a button “Goto page 2” and the second route with just an empty page named “Page 2”, using the below code:

Dart



filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
  
main() {
  runApp(MaterialApp(
    home: Page1(),
  ));
}
  
class Page1 extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: RaisedButton(
          child: Text('Go to Page 2'),
          onPressed: () {
            Navigator.of(context).push(_createRoute());
          },
        ),
      ),
    );
  }
}
  
Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return child;
    },
  );
}
  
class Page2 extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text('Page 2'),
      ),
    );
  }
}

chevron_right


Adding a tween:

You can build a tween of an animation object by using the below code :

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

transitionsBuilder: (context, animation, secondaryAnimation, child) {
  var begin = Offset(0.0, 1.0);
  var end = Offset.zero;
  var tween = Tween(begin: begin, end: end);
  var offsetAnimation = animation.drive(tween);
  return child;
},

chevron_right


Creating an AnimatedWidget:

The AnimatedWidget has the property of its state once the animation value changes. You can create one like below:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

transitionsBuilder: (context, animation, secondaryAnimation, child) {
  var begin = Offset(0.0, 1.0);
  var end = Offset.zero;
  var tween = Tween(begin: begin, end: end);
  var offsetAnimation = animation.drive(tween);
  
  return SlideTransition(
    position: offsetAnimation,
    child: child,
  );
},

chevron_right


Creating a CurveTween:

Use the below code to create a CurveTween:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

var curve = Curves.ease;
  
var curveTween = CurveTween(curve: curve);

chevron_right


Combining both Tweens:

Use the chain() method to combine two tweens as shown below:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Now use the animation.drive() method to create an Animation object of the combined tweens as shown below:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

return SlideTransition(
  position: animation.drive(tween),
  child: child,
);

chevron_right


Complete Source Code:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
  
main() {
  runApp(MaterialApp(
    home: Homepage(),
  ));
}
  
class Homepage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title : Text('GeeksForGeeks'),
        backgroundColor: Colors.green,
      ),
  
      body: Center(
        child: RaisedButton(
          child: Text('Go to Page 2'),
          onPressed: () {
            Navigator.of(context).push(_createRoute());
          },
        ),
      ),
    );
  }
}
  
Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = Offset(0.0, 1.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,
      );
    },
  );
}
  
class Page2 extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text('Page 2'),
      ),
    );
  }
}

chevron_right


Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :