Flutter's default page transitions are not very good. In fact they ruin user experience. Therefore, adding animations to page transitions is very important. To do so, page_transition package version 2.0.9  is used. Which is very simple and easy to use.

Animated page transitions in Flutter

Animated page transitions in Flutter Poster

Let's dive in to see how to implement the animations on transitions:

Step 1:

Create a project and remove all the default code. for counter you can keep build methods and classes just remove floating button, count text and counting function.

Step 2:

Install page_transiton package by running command:

flutter pub add page_transition

Step 3:

Create a button.dart file in lib folder and create a text button with text and click event as below:

import 'package:flutter/material.dart';

class ButtonSimple extends StatelessWidget {
const ButtonSimple({super.key, required this.event, required this.text});
final event;
final text;
@override
Widget build(BuildContext context) {
return TextButton(onPressed: event, child: Text(text));
}
}

You can avoid this step and directly use TextButton but if you add any styling you will have to do repeatedly therefore creating it as a custom widget is always be a good idea.

Step 4:

Create a new_page.dart file that will have a simple page to indicate that we have performed a transition.

import 'package:flutter/material.dart';

class NewPage extends StatelessWidget {
const NewPage({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: const Center(
child: Text("New page"),
),
);
}
}

Step 5:

Now, open main.dart file again and create a function inside _MyHomePageState class that will perform transition which takes two just one argument that will be transition to be performed. However, if it is reused for multiple pages in real world scenario page argument will be required so it can work across different pages in the application.

pagePush(PageTransitionType transitionName) {
Navigator.push(
context, PageTransition(child: const NewPage(), type: transitionName));
}

Step 6:

Now, inside the scaffold in main.dart file set body as:

body: Center(
child: Column(
children: [
ButtonSimple(
event: () {
pagePush(PageTransitionType.bottomToTop);
},
text: "Bottom to top"),
ButtonSimple(
event: () {
pagePush(PageTransitionType.topToBottom);
},
text: "Top to bottom"),
ButtonSimple(
event: () {
pagePush(PageTransitionType.leftToRight);
},
text: "Left To right"),
ButtonSimple(
event: () {
pagePush(PageTransitionType.rightToLeft);
},
text: "Right to left"),
ButtonSimple(
event: () {
pagePush(PageTransitionType.fade);
},
text: "Fade"),
ButtonSimple(
event: () {
pagePush(PageTransitionType.leftToRightWithFade);
},
text: "Left to right with fade"),
ButtonSimple(
event: () {
pagePush(PageTransitionType.rightToLeftWithFade);
},
text: "Right to left with fade"),
ButtonSimple(
event: () {
pagePush(PageTransitionType.rightToLeftWithFade);
},
text: "Right to left with fade"),
],
),
),

You will get following design and transitions:



You can watch this tutorial in video as well.


You can find code here.

For more tutorials follow on social platforms and share for knowledge.