In 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 :
|
|
|
|
|
692 Views |
|