flutter page transition
a rich, convenient, easy-to-use flutter page transition package.
getting started with flutter page
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 | ↗️ |
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
ce example/
flutter drive --target=test_driver/app.dart
Comments are closed.