Add page transition animation in Flutter

original

https://medium.com/@aayushkedawat/adding-page-transition-animations-in-flutter-8886a04fea3c

refer to

• https://pub.dev/packages/page_animation_transition

text

Hi all, in this article we will learn how to add animations simultaneously from one page to other in Flutter. We'll cover different types of animations and implement basic animation transitions in Flutter using wraparound animations.

page_animation_transition

introduction

Animation plays a vital role in enhancing user experience, but what exactly is animation?

Design languages, such as Material, define standard behavior when transitioning between routes (or screens). Sometimes, though, customizing transitions between screens can make an application more unique.

In this tutorial, we will use the package page page_animation_transition to simplify adding transitions on the page.

Explore different transformations with plugins

Step 1: Add page animation transitions in pubspec.yaml

page_animation_transition

Step 2: Import the library on PageOne

Suppose you are transitioning from PageOne to PageTwo

The following are the animation types supported by the library:

_BottomToTopTransition
TopToBottomTransition
RightToLeftTransition
LeftToRightTransition
FadeAnimationTransition
ScaleAnimationTransition
RotationAnimationTransition
TopToBottomFadedTransition
BottomToTopFadedTransition
RightToLeftFadedTransition
LeftToRightFadedTransition_

Bottom to Up Transition Bottom Transition Right Transition Left / Right Transition lower / upper /
Go right to /ftfaded/transition
left/right/insert/transform

Step 3: Add the following lines of navigation code

 Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: BottomToTopTransition()));

For predefined routes:

 onGenerateRoute: (settings) {
    switch (settings.name) {
      case '/pageTwo':
        return PageAnimationTransition(child: PageTwo(), pageAnimationType: LeftToRightFadedTransition());
        break;
      default:
        return null;
    }
  }

Navigator.pushNamed(context, '/pageTwo');

Pushnamed (context,'/pageTwo') ;

Output:

output:

Complete code for other type conversions:

 import 'package:page_animation_transition/animations/bottom_to_top_faded_transition.dart';
import 'package:page_animation_transition/animations/bottom_to_top_transition.dart';
import 'package:page_animation_transition/animations/fade_animation_transition.dart';
import 'package:page_animation_transition/animations/left_to_right_faded_transition.dart';
import 'package:page_animation_transition/animations/left_to_right_transition.dart';
import 'package:page_animation_transition/animations/right_to_left_faded_transition.dart';
import 'package:page_animation_transition/animations/right_to_left_transition.dart';
import 'package:page_animation_transition/animations/rotate_animation_transition.dart';
import 'package:page_animation_transition/animations/scale_animation_transition.dart';
import 'package:page_animation_transition/animations/top_to_bottom_faded.dart';
import 'package:page_animation_transition/animations/top_to_bottom_transition.dart';
import 'package:page_animation_transition/page_animation_transition.dart';
import 'page_two.dart';
import 'package:flutter/material.dart';class PageOne extends StatelessWidget {
  const PageOne({Key? key}) : super(key: key);[@override](http://twitter.com/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page Animation Transition'),
        centerTitle: true,
      ),
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: BottomToTopTransition()));
                },
                child: const Text('Bottom To Top')),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: TopToBottomTransition()));
                },
                child: const Text('Top to bottom')),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: RightToLeftTransition()));
                },
                child: const Text('Right To Left')),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: LeftToRightTransition()));
                },
                child: const Text('Left to Right')),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: FadeAnimationTransition()));
                },
                child: const Text('Faded')),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: ScaleAnimationTransition()));
                },
                child: const Text('Scale')),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: RotationAnimationTransition()));
                },
                child: const Text('Rotate')),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: TopToBottomFadedTransition()));
                },
                child: const Text('Top to Bottom Faded')),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: BottomToTopFadedTransition()));
                },
                child: const Text('Bottom to Top Faded')),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: RightToLeftFadedTransition()));
                },
                child: const Text('Right to Left Faded')),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: LeftToRightFadedTransition()));
                },
                child: const Text('Left to Right Faded')),
          ],
        ),
      ),
    );
  }
}

output:

Summarize

Hopefully this blog has given you an insight into Flutter's transformation. thanks for reading! If there are any mistakes, please let me know in the comments so I can improve. If this blog was helpful to you, give it a round of applause!

---

© Cat Brother

• WeChat ducafecat
• Blogducafecat.tech
• github
• bilibili