A rich, convenient, easy-to-use flutter page transition package
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