Flutter Create Animated Page Transitions
Last updated Nov 02, 2021In this tutorial, we will learn how you can get Animated Page Transitions in Flutter. A transition is nothing but moving an object from one place to another. So in Flutter Page Transition means transition between pages
So Let's Start
Step 1: Create a new Flutter Project.
Step 2: Let's add a new screen as Second Screen in your lib folder.
for example: second_screen.dart
Step 3: Add a Button in your first screen to navigate to your second screen, To navigate in we use Navigator.push method and use MaterialPageRoute by Default.
for example:
Navigator.push(context, MaterialPageRoute(builder: (context)=>SecondScreen())); |
Step 4: Now to get different Animation for your transition we will use a widget called PageRouteBuilder, PageRouteBuilder provides an Animation object. This Animation can be used with Tween and Curve objects to customize the transition animation.
there are different transitions such as
-
FadeTransition
-
SlideTransition
-
ScaleTransition
So using these Transitions inside our PageRouteBuilder we can achieve different animation for our page transition let's see example
FadeTransition
|
Navigator.push( context, PageRouteBuilder( transitionDuration: const Duration(milliseconds: 800), transitionsBuilder: (context, animation, secondaryAnimation, child) { return FadeTransition( opacity: animation, child: child, ); }, pageBuilder: (context, animation, secondaryAnimation) { return const SecondScreen(); })); |
SlideTransition
Navigator.push( context, PageRouteBuilder( transitionDuration: const Duration(milliseconds: 800), transitionsBuilder: (context, animation, secondaryAnimation, child) { final slideAnimation = Tween(begin: Offset(0, 1), end: Offset(0, 0)) .animate(animation); return SlideTransition( position: slideAnimation, child: child, ); }, pageBuilder: (context, animation, secondaryAnimation) { return const SecondScreen(); })); |
ScaleTransition
|
Navigator.push( context, PageRouteBuilder( transitionDuration: const Duration(milliseconds: 800), transitionsBuilder: (context, animation, secondaryAnimation, child) { final curve = CurvedAnimation( parent: animation, curve: Curves.bounceOut); return ScaleTransition( scale: curve, child: child, ); }, pageBuilder: (context, animation, secondaryAnimation) { return const SecondScreen(); })); |
Using these instead of MaterialPageRoute will give us beautiful animated page transition in Flutter.
Complete Source Code to create different animations while navigation to different screens
import 'package:flutter/animation.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import 'package:flutter_custom_route_transition/second_screen.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({Key? key, required this.title}) : super(key: key); final String title; @override State createState() => _MyHomePageState(); } class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ MaterialButton( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(5)), color: Colors.deepOrange, minWidth: MediaQuery.of(context).size.width / 2, height: 50, onPressed: () { Navigator.push(context, MaterialPageRoute(builder: (context)=>SecondScreen())); Navigator.push( context, PageRouteBuilder( transitionDuration: const Duration(milliseconds: 800), transitionsBuilder: (context, animation, secondaryAnimation, child) { return FadeTransition( opacity: animation, child: child, ); }, pageBuilder: (context, animation, secondaryAnimation) { return const SecondScreen(); })); }, child: const Text( 'Example 1', textAlign: TextAlign.center, style: TextStyle( fontSize: 25, color: Colors.white, fontWeight: FontWeight.w500), ), ), const SizedBox( height: 30, ), MaterialButton( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(5)), color: Colors.deepOrange, minWidth: MediaQuery.of(context).size.width / 2, height: 50, onPressed: () { Navigator.push( context, PageRouteBuilder( transitionDuration: const Duration(milliseconds: 800), transitionsBuilder: (context, animation, secondaryAnimation, child) { final slideAnimation = Tween(begin: Offset(0, 1), end: Offset(0, 0)) .animate(animation); return SlideTransition( position: slideAnimation, child: child, ); }, pageBuilder: (context, animation, secondaryAnimation) { return const SecondScreen(); })); }, child: const Text( 'Example 2', textAlign: TextAlign.center, style: TextStyle( fontSize: 25, color: Colors.white, fontWeight: FontWeight.w500), ), ), const SizedBox( height: 30, ), MaterialButton( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(5)), color: Colors.deepOrange, minWidth: MediaQuery.of(context).size.width / 2, height: 50, onPressed: () { Navigator.push( context, PageRouteBuilder( transitionDuration: const Duration(milliseconds: 800), transitionsBuilder: (context, animation, secondaryAnimation, child) { final curve = CurvedAnimation( parent: animation, curve: Curves.bounceOut); return ScaleTransition( scale: curve, child: child, ); }, pageBuilder: (context, animation, secondaryAnimation) { return const SecondScreen(); })); }, child: const Text( 'Example 3', textAlign: TextAlign.center, style: TextStyle( fontSize: 25, color: Colors.white, fontWeight: FontWeight.w500), ), ) ], ), ), ); } } |
.png) |
Conclusion: In this tutorial, we learned how we can achieve different animations for page transition in Flutter.
|
Article Contributed By :
|
|
|
|
|
877 Views |
|