Flutter Create Animated Page Transitions

Last updated Nov 02, 2021


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),

              ),

            )

          ],

        ),

      ),

    );

  }

}

 

Flutter Animated Page Transition

 

Video Tutorial

 

Conclusion: In this tutorial, we learned how we can achieve different animations for page transition in Flutter.

 

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

25 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions