Flutter Page Transition Package
A Flutter package that provides beautiful page transitions with an easy-to-use API.
Installation
dependencies:
page_transition: ^latest_version
Usage
Using Extensions (Recommended)
// Simple transition
context.pushTransition(
type: PageTransitionType.fade,
child: DetailScreen(),
);
// Using builder pattern
context.pushTransition(
type: PageTransitionType.fade,
childBuilder: (context) => DetailScreen(
id: someId,
title: someTitle,
),
);
// Push replacement
context.pushReplacementTransition(
type: PageTransitionType.rightToLeft,
child: DetailScreen(),
);
// Push and remove until
context.pushAndRemoveUntilTransition(
type: PageTransitionType.fade,
child: HomePage(),
predicate: (route) => false,
);
// Named route with transition
context.pushNamedTransition(
routeName: '/detail',
type: PageTransitionType.fade,
arguments: {'id': 1},
);
Traditional Usage
Navigator.push(
context,
PageTransition(
type: PageTransitionType.fade,
child: DetailScreen(),
),
);
// Or using builder pattern
Navigator.push(
context,
PageTransition(
type: PageTransitionType.fade,
childBuilder: (context) => DetailScreen(id: someId),
),
);
Available Transition Types
fade
rightToLeft
leftToRight
topToBottom
bottomToTop
scale
(with alignment)rotate
(with alignment)size
(with alignment)rightToLeftWithFade
leftToRightWithFade
leftToRightJoined
rightToLeftJoined
topToBottomJoined
bottomToTopJoined
leftToRightPop
rightToLeftPop
topToBottomPop
bottomToTopPop
Additional Features
iOS Swipe Back
Enable iOS-style swipe back gesture:
context.pushTransition(
type: PageTransitionType.rightToLeft,
child: DetailScreen(),
isIos: true,
);
Note: iOS swipe back works only with rightToLeft
and fade
transitions.
Inherit Theme
Use the parent's theme in the transition:
context.pushTransition(
type: PageTransitionType.rightToLeft,
child: DetailScreen(),
inheritTheme: true,
);
Custom Duration and Curve
context.pushTransition(
type: PageTransitionType.fade,
child: DetailScreen(),
duration: Duration(milliseconds: 300),
curve: Curves.easeInOut,
);
Video Tutorial
Check out Johannes Milke's tutorial for a detailed walkthrough.
Contributing
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.