May

Flutter Page Transition

Flutter Page Transition:

In this tutorial, we are going to learn to create a page Transition in Flutter. Page Transitions are the beautiful effects/animations that are viewed or applied when the user moves from one page to another page then this page transition is applied to these pages. It is very easy to use page transition in Flutter.

Creating Page Transition In Flutter:

Follow the below procedure to create a page transition in the Flutter app.

Add the dependency package:

adding the dependency package to pubspec.yaml file. use the below code to add dependency package. After adding the dependency package run the get package method to import all the required files to the app.

dependencies:
page_transition: ^1.0.9

Install the package:

You can install the package from the command line using the below code as shown.

$ flutter packages get

Importing the Package:

After Adding the dependency package to the pubspec.yaml file, you can now import the package into the dart code by using the below code. without adding the dependency package to the pubspec.yaml file if you import it will show package not found an error.

import 'package:page_transition/page_transition.dart';

Sample Page Transitions in Flutter:

We are providing the list of page transitions below, you can use them into your flutter app according to your app requirements,

Navigator.push(context, PageTransition(type: PageTransitionType.fade, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.leftToRight, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeft, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.upToDown, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.downToUp, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.scale, alignment: Alignment.bottomCenter, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.size, alignment: Alignment.bottomCenter, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.rotate, duration: Duration(second: 1), child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeftWithFade, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.leftToRightWithFade, child: DetailScreen()));

Using predefined routes for Flutter Page Transition:

Use the below code to use predefined routes in flutter page transition as shown.

onGenerateRoute: (settings) {
switch (settings.name) {
case '/second':
return PageTransition(child: SecondPage(), type: PageTransitionType.scale);
break;
default:
return null;
}
},

Use the below method to create a new route in flutter page transition.

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

List of Page Transitions in Flutter:

fade
rightToLeft
leftToRight
upToDown
downToUp
scale (with alignment)
rotate (with alignment)
size (with alignment)
rightToLeftWithFade,
leftToRightWithFade,

Complete Example code for Flutter Page transition:

Copy and paste the below code into your main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
title: Text('Page Transition'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
RaisedButton(
child: Text('Fade Second Page'),
onPressed: () {
Navigator.push(
context, PageTransition(type: PageTransitionType.fade, child: SecondPage()));
},
),
RaisedButton(
child: Text('Left To Right Slide Second Page'),
onPressed: () {
Navigator.push(context,
PageTransition(type: PageTransitionType.leftToRight, child: SecondPage()));
},
),
RaisedButton(
child: Text('Size Slide Second Page'),
onPressed: () {
Navigator.push(
context,
PageTransition(
alignment: Alignment.bottomCenter,
curve: Curves.bounceOut,
type: PageTransitionType.size,
child: SecondPage()));
},
),
RaisedButton(
child: Text('Rotate Slide Second Page'),
onPressed: () {
Navigator.push(
context,
PageTransition(
curve: Curves.bounceOut,
type: PageTransitionType.rotate,
alignment: Alignment.topCenter,
child: SecondPage()));
},
),
RaisedButton(
child: Text('Scale Slide Second Page'),
onPressed: () {
Navigator.push(
context,
PageTransition(
curve: Curves.linear,
type: PageTransitionType.scale,
alignment: Alignment.topCenter,
child: SecondPage()));
},
),
RaisedButton(
child: Text('Up to Down Second Page'),
onPressed: () {
Navigator.push(
context,
PageTransition(
curve: Curves.linear,
type: PageTransitionType.upToDown,
child: SecondPage()));
},
),
RaisedButton(
child: Text('Down to Up Second Page'),
onPressed: () {
Navigator.push(
context,
PageTransition(
curve: Curves.linear,
type: PageTransitionType.downToUp,
child: SecondPage()));
},
),
],
),
),
);
}
}

class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Page Transition SecondPage'),
),
body: Center(
child: Text('Second Page'),
),
);
}
}

Congratulations You Have Learned Flutter Page Transition….!!!

If It Is Helpful Share It With Your Friends….!!!

PrevNext