Animation in Route Transition - Flutter

For Flutter apps, routes are just Pages. It is common for an application to have to navigate between pages. But animations can be utilised to improve the smoothness of these transitions. The PageRouteBuilder class's Animation object can be curved or tweened with the use of these animations to change the transition animation.

In this article, you will learn how to create your Animation Route transition  in Flutter. So let’s take Animation Route transition widget​ example of the Animation Route transition  in Flutter of Mobile application.

Video example of Animation Route transition mentioned below


Creating an Animatedwidget:
 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,
       );
     },
   );
 }
Step-by-Step Implementation
Step 1: Create a New Project in Android Studio (File >new flutter project).
Step 2: Adding material package 

Import method the runApp method in the main function call first while run the application.

 import 'package:flutter/material.dart';

 void main() {

     runApp(RunMyApp());

 }

Step 3: Creating a stateless widget 

 We can create a stateless widget that contains MaterialApp widget,AppBar,etc.

 class RunMyApp extends StatelessWidget {

     const RunMyApp({super.key});  

    @override

    Widget build(BuildContext context) {

    return MaterialApp(home);

     }

 }

Step 4: Final code of Animatedwidget.
 import 'package:flutter/material.dart';

 void 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('CandidRoot Solutions'),
         backgroundColor: Colors.blue,
       ),
       body: Center(
           child: ElevatedButton(
             onPressed: () {
               Navigator.of(context).push(_createRoute());
             },
             child: const Text('Go to Page 2'),
           )
       ),
     );
   }
 }

 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 of above example

                                             

Happy coding!

365Bloggy July 3, 2024
Share this post
Tags
SUBSCRIBE THIS FORM

Subscribe Thanks

Recent Posts
How to add a Snackbar in Android
0 1218
Zoom In and Out to TextView in Android
0 418
How to underline text in textview
0 347
Shine Effect in Android
0 297
How to Create Marquee Text in Android?
0 268
Our blogs
Archive