Description:

flutter page transition

flutter_page_transition #
A rich, convenient, easy-to-use flutter page transition package.




README in Chinese
Some Demos #







Getting Started #
Add this to your package's pubspec.yaml file:
dependencies:
flutter_page_transition: ^0.1.0
copied to clipboard
You can also depend on this package stored in my repository:
flutter_page_transition:
git:
url: git://github.com/handoing/flutter_page_transition.git
copied to clipboard
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()));


copied to clipboard
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);
copied to clipboard
Test #
run test
flutter test
copied to clipboard
Test Driver #
run driver test
cd example/
flutter drive --target=test_driver/app.dart
copied to clipboard
License #
MIT

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter