Introduction:
Page transitions can enhance the user experience in your Flutter app by providing smooth animations between different screens. The `page_transition` package simplifies the process of adding transitions. This guide will walk you through the steps to implement a page transition.
Content:
Step 1: Add Dependency Ensure you have the `page_transition` package added to your `pubspec.yaml` file.
Run the following command in your terminal:
page_transition: ^2.0.0
Run flutter pub get to fetch the package.
Step 2: Import Dependencies
In your Dart file, import the necessary packages:
import 'package:flutter/material.dart';
import 'package:page_transition/page_transition.dart';
Step 3: Create Destination Page
Create the page you want to navigate to. For example:
class DestinationPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Destination Page'),
),
body: Center(
child: Text('This is the destination page.'),
),
);
}
}
Step 4: Implement Page Transition
Use the following Dart code as an example for implementing page transition:
void main() {
runApp(PageTransitionApp());
}
class PageTransitionApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Page Transition Example'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
PageTransition(
type: PageTransitionType.fade, // Choose the transition type
child: DestinationPage(),
),
);
},
child: Text('Navigate to Destination Page'),
),
),
),
);
}
}
Step 5: Choose Transition Type
Select the desired transition type from PageTransitionType. For example, PageTransitionType.fade will provide a fade transition.
Sample Code:
// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';
import 'package:page_transition/page_transition.dart';
///Example App
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,
pageTransitionsTheme: PageTransitionsTheme(builders: {
TargetPlatform.iOS: PageTransition(type: PageTransitionType.fade, child: this).matchingBuilder,
}),
),
home: MyHomePage(),
onGenerateRoute: (settings) {
switch (settings.name) {
case '/second':
return PageTransition(
child: SecondPage(),
type: PageTransitionType.theme,
settings: settings,
reverseDuration: Duration(seconds: 8),
);
default:
return null;
}
},
);
}
}
/// Example page
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
centerTitle: true,
elevation: 2,
title: Text("Page Transition"),
backgroundColor: Colors.blue[200],
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Center(
child: ListView(
children: <Widget>[
ElevatedButton(
child: Text('Fade Second Page - Default'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondPage(),
),
);
},
),
ElevatedButton(
child: Text('Left To Right Transition Second Page'),
onPressed: () {
Navigator.push(
context,
PageTransition(
type: PageTransitionType.leftToRight,
child: SecondPage(),
),
);
},
),
ElevatedButton(
child: Text('Right To Left Transition Second Page Ios SwipeBack'),
onPressed: () {
Navigator.push(
context,
PageTransition(
type: PageTransitionType.rightToLeft,
isIos: true,
child: SecondPage(),
),
);
},
),
ElevatedButton(
child: Text('Left To Right with Fade Transition Second Page'),
onPressed: () {
Navigator.push(
context,
PageTransition(
type: PageTransitionType.leftToRightWithFade,
alignment: Alignment.topCenter,
child: SecondPage(),
),
);
},
),
ElevatedButton(
child: Text('Right To Left Transition Second Page'),
onPressed: () {
Navigator.push(
context,
PageTransition(
type: PageTransitionType.leftToRight,
child: SecondPage(),
),
);
},
),
ElevatedButton(
child: Text('Right To Left with Fade Transition Second Page'),
onPressed: () {
Navigator.push(
context,
PageTransition(
type: PageTransitionType.rightToLeftWithFade,
child: SecondPage(),
),
);
},
),
ElevatedButton(
child: Text('Top to Bottom Second Page'),
onPressed: () {
Navigator.push(
context,
PageTransition(
curve: Curves.linear,
type: PageTransitionType.topToBottom,
child: SecondPage(),
),
);
},
),
ElevatedButton(
child: Text('Bottom to Top Second Page'),
onPressed: () {
Navigator.push(
context,
PageTransition(
curve: Curves.linear,
type: PageTransitionType.bottomToTop,
child: SecondPage(),
),
);
},
),
ElevatedButton(
child: Text('Scale Transition Second Page'),
onPressed: () {
Navigator.push(
context,
PageTransition(
type: PageTransitionType.scale,
alignment: Alignment.topCenter,
duration: Duration(milliseconds: 400),
isIos: true,
child: SecondPage(),
),
);
},
),
ElevatedButton(
child: Text('Rotate Transition Second Page'),
onPressed: () {
Navigator.push(
context,
PageTransition(
curve: Curves.bounceOut,
type: PageTransitionType.rotate,
alignment: Alignment.topCenter,
child: SecondPage(),
),
);
},
),
ElevatedButton(
child: Text('Size Transition Second Page'),
onPressed: () {
Navigator.push(
context,
PageTransition(
alignment: Alignment.bottomCenter,
curve: Curves.bounceOut,
type: PageTransitionType.size,
child: SecondPage(),
),
);
},
),
ElevatedButton(
child: Text('Right to Left Joined'),
onPressed: () {
Navigator.push(
context,
PageTransition(
alignment: Alignment.bottomCenter,
curve: Curves.easeInOut,
duration: Duration(milliseconds: 600),
reverseDuration: Duration(milliseconds: 600),
type: PageTransitionType.rightToLeftJoined,
child: SecondPage(),
childCurrent: this));
},
),
ElevatedButton(
child: Text('Left to Right Joined'),
onPressed: () {
Navigator.push(
context,
PageTransition(
alignment: Alignment.bottomCenter,
curve: Curves.easeInOut,
duration: Duration(milliseconds: 600),
reverseDuration: Duration(milliseconds: 600),
type: PageTransitionType.leftToRightJoined,
child: SecondPage(),
childCurrent: this),
);
},
),
ElevatedButton(
child: Text('Top to Bottom Joined'),
onPressed: () {
Navigator.push(
context,
PageTransition(
alignment: Alignment.bottomCenter,
curve: Curves.easeInOut,
duration: Duration(milliseconds: 600),
reverseDuration: Duration(milliseconds: 600),
type: PageTransitionType.topToBottomJoined,
child: SecondPage(),
childCurrent: this),
);
},
),
ElevatedButton(
child: Text('Bottom to Top Joined'),
onPressed: () {
Navigator.push(
context,
PageTransition(
alignment: Alignment.bottomCenter,
curve: Curves.easeInOut,
duration: Duration(milliseconds: 600),
reverseDuration: Duration(milliseconds: 600),
type: PageTransitionType.bottomToTopJoined,
child: SecondPage(),
childCurrent: this),
);
},
),
ElevatedButton(
child: Text('Right to Left Pop'),
onPressed: () {
Navigator.push(
context,
PageTransition(
alignment: Alignment.bottomCenter,
curve: Curves.easeInOut,
duration: Duration(milliseconds: 600),
reverseDuration: Duration(milliseconds: 600),
type: PageTransitionType.rightToLeftPop,
child: SecondPage(),
childCurrent: this));
},
),
ElevatedButton(
child: Text('Left to Right Pop'),
onPressed: () {
Navigator.push(
context,
PageTransition(
alignment: Alignment.bottomCenter,
curve: Curves.easeInOut,
duration: Duration(milliseconds: 600),
reverseDuration: Duration(milliseconds: 600),
type: PageTransitionType.leftToRightPop,
child: SecondPage(),
childCurrent: this),
);
},
),
ElevatedButton(
child: Text('Top to Bottom Pop'),
onPressed: () {
Navigator.push(
context,
PageTransition(
alignment: Alignment.bottomCenter,
curve: Curves.easeInOut,
duration: Duration(milliseconds: 600),
reverseDuration: Duration(milliseconds: 600),
type: PageTransitionType.topToBottomPop,
child: SecondPage(),
childCurrent: this),
);
},
),
ElevatedButton(
child: Text('Bottom to Top Pop'),
onPressed: () {
Navigator.push(
context,
PageTransition(
alignment: Alignment.bottomCenter,
curve: Curves.easeInOut,
duration: Duration(milliseconds: 600),
reverseDuration: Duration(milliseconds: 600),
type: PageTransitionType.bottomToTopPop,
child: SecondPage(
title: "SecondPage",
),
childCurrent: this),
);
},
),
ElevatedButton(
child: Text('PushNamed With arguments'),
onPressed: () {
Navigator.pushNamed(
context,
"/second",
arguments: "with Arguments",
);
},
),
],
),
),
),
);
}
}
///Example second page
class SecondPage extends StatelessWidget {
/// Page Title
final String? title;
/// second page constructor
const SecondPage({Key? key, this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
final args = ModalRoute.of(context)?.settings.arguments;
return Scaffold(
appBar: AppBar(
title: Text(args.toString()),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Second Page'),
SizedBox(height: 10),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
PageTransition(
duration: Duration(milliseconds: 300),
reverseDuration: Duration(milliseconds: 300),
type: PageTransitionType.topToBottom,
child: ThirdPage(
title: 'Second Page',
),
),
);
},
child: Text('Go Third Page'),
)
],
),
),
);
}
}
/// third page
class ThirdPage extends StatelessWidget {
/// Page Title
final String title;
/// second page constructor
const ThirdPage({Key? key, required this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Page Transition Plugin"),
),
body: Center(
child: Text('ThirdPage Page'),
),
);
}
}
Output:
Conclusion:
Congratulations! You’ve successfully implemented a page transition in your Flutter app using the page_transition package. Explore different transition types and customize the transition based on your app’s design.
Feel free to experiment with various transition types and parameters to achieve the desired visual effect.
