flutter_page_transition
A rich, convenient, easy-to-use flutter page transition package.
Some Demos
Getting Started
Add this to your package’s pubspec.yaml file:
dependencies:
flutter_page_transition: ^0.1.0
You can also depend on this package stored in my repository:
flutter_page_transition:
git:
url: git://github.com/handoing/flutter_page_transition.git
You should then run flutter packages upgrade.
Transition Type
| Page Transition Type | Direction |
|---|---|
| slideInLeft | ⬅️ |
| slideInLeft | ➡️ |
| slideInUp | ⬆️ |
| slideInDown | ⬇️ |
| slideLeft | ⬅️ |
| slideRight | ➡️ |
| slideUp | ⬆️ |
| slideDown | ⬇️ |
| slideParallaxLeft | ⬅️ |
| slideParallaxRight | ➡️ |
| slideParallaxUp | ⬆️ |
| slideParallaxDown | ⬇️ |
| slideZoomLeft | ⬅️ |
| slideZoomRight | ➡️ |
| slideZoomUp | ⬆️ |
| slideZoomDown | ⬇️ |
| rippleRightUp | ↖️ |
| rippleLeftUp | ↗️ |
| rippleLeftDown | ↘️ |
| rippleRightDown | ↙️ |
| rippleMiddle | ? |
| transferRight | ⬅️ |
| transferUp | ⬆️ |
| fadeIn | ❌ |
| custom | ❌ |
Example
Use PageRouteBuilder Widget
initialRoute: 'Home',
onGenerateRoute: (RouteSettings routeSettings){
return new PageRouteBuilder<dynamic>(
settings: routeSettings,
pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
switch (routeSettings.name){
case 'Home':
return HomePage();
case 'Other':
return OtherPage();
default:
return null;
}
},
transitionDuration: const Duration(milliseconds: 300),
transitionsBuilder: (BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation, Widget child) {
return effectMap[PageTransitionType.slideInLeft](Curves.linear, animation, secondaryAnimation, child);
}
);
}
// use Navigator
Navigator.of(context).pushNamed('Other');
// or
Navigator.of(context).push(PageTransition(type: PageTransitionType.slideInLeft, child: FirstPage()));
Create custom methods:
transitionEffect.createCustomEffect(
handle: (Curve curve, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
return new SlideTransition(
position: new Tween<Offset>(
begin: const Offset(1.0, 0.0),
end: const Offset(0.0, 0.0),
).animate(CurvedAnimation(parent: animation, curve: curve)),
child: child,
);
}
);
// use custom
effectMap[PageTransitionType.custom](Curves.linear, animation, secondaryAnimation, child);
Test
run test
flutter test
Test Driver
run driver test
cd example/
flutter drive --target=test_driver/app.dart
