Flutter – Animation in Route Transition

20 Jun, 2022
Routes are simply Pages in Flutter applications. An application often needs to move from one page to another. But to make these transitions 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:
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
import 'package:flutter/material.dart'; main() {  runApp(const MaterialApp(    home: Page1(),  ));} class Page1 extends StatelessWidget {  const Page1({Key? key}) : super(key: key);  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(),      body: Center(          child: ElevatedButton(        onPressed: () {          Navigator.of(context).push(_createRoute());        },        child: const Text('Go to Page 2'),      )           // RaisedButton is deprecated          // We should use ElevatedButton instead           // child: RaisedButton(          // child: const Text('Go to Page 2'),          // onPressed: () {          //     Navigator.of(context).push(_createRoute());          // },          // ),          ),    );  }} Route _createRoute() {  return PageRouteBuilder(    pageBuilder: (context, animation, secondaryAnimation) => const Page2(),    transitionsBuilder: (context, animation, secondaryAnimation, child) {      return child;    },  );} class Page2 extends StatelessWidget {  const Page2({Key? key}) : super(key: key);  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(),      body: const Center(        child: Text('Page 2'),      ),    );  }}
You can build a tween of an animation object by using the below code :
Dart
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;},
The AnimatedWidget has the property of its state once the animation value changes. You can create one like below:
Dart
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,  );},
Use the below code to create a CurveTween:
Dart
var curve = Curves.ease; var curveTween = CurveTween(curve: curve);
Use the chain() method to combine two tweens as shown below:
Dart
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));
Now use the animation.drive() method to create an Animation object of the combined tweens as shown below:
Dart
return SlideTransition(  position: animation.drive(tween),  child: child,);
Complete Source Code:
Dart
import 'package:flutter/material.dart'; main() {  runApp(const MaterialApp(    home: Homepage(),  ));} class Homepage extends StatelessWidget {  const Homepage({Key? key}) : super(key: key);  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: const Text('GeeksForGeeks'),        backgroundColor: Colors.green,      ),      body: Center(          child: ElevatedButton(        onPressed: () {          Navigator.of(context).push(_createRoute());        },        child: const Text('Go to Page 2'),      )           // RaisedButton is deprecated          // We should use ElevatedButton instead           // child: RaisedButton(          // child: const Text('Go to Page 2'),          // onPressed: () {          //     Navigator.of(context).push(_createRoute());          // },          // ),           ),    );  }} Route _createRoute() {  return PageRouteBuilder(    pageBuilder: (context, animation, secondaryAnimation) => const Page2(),    transitionsBuilder: (context, animation, secondaryAnimation, child) {      var begin = const 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 {  const Page2({Key? key}) : super(key: key);  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(),      body: const Center(        child: Text('Page 2'),      ),    );  }}
Output:
ankit_kumar_
android
Flutter
Flutter-widgets
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - DropDownButton Widget
Listview.builder in Flutter
Flutter - Custom Bottom Navigation Bar
Splash Screen in Flutter
Flutter - Asset Image
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter - Checkbox Widget
Flutter - Stack Widget
Flutter - Search Bar