proste_route_animation

Description:

proste route animation

[English] | 中文
Introduction #
Route animation by using flutter's transition widget

Usage #
use Navigator.push() to push route:

Navigator.push(context, ProsteRouteAnimation.fadeRoute(route: DemoPage(), ...));

copied to clipboard
use Navigator.pushNamed() to push route，Can be set onGenerateRoute in MaterialApp
MaterialApp(
onGenerateRoute: (settings) {
Widet widget;
switch(settings.name) {
case '/demo':
widget = DemoPage();
break;
}

return ProsteRouteAnimation.fadeRoute(route: widget, ...);
}
)

...

RaisedButton(
onPressed: () {
Navigator.pushNamed(
context,
'/demo',
arguments: {
'param': param,
},
);
},
child: Text('push'),
);
copied to clipboard
ProsteSlideMode #
Determine the animation path of ProsteRouteAnimation.slideRoute()

fromLeft

page from left to right


fromRight

page from right to left


fromBottom

page from bottom to top


fromTop

page from top to bottom



ProsteRouteAnimation.slideRoute(
route: DemoPage(),
mode: ProsteSlideMode.fromLeft,
...
);
copied to clipboard
ProsteAnimationMode #
Determine which animation method the constructor method uses

fade

fade animation


slideFromLeft

animation use slide and page from left to right


slideFromRight

animation use slide and page from right to left


slideFromBottom

animation use slide and page from bottom to top


slideFromTop

animation use slide and page from top to bottom


scale

animation use scale


rotation

animation use rotation


size

animation use size change



ProsteRouteAnimation(
builder: (context) => DemoPage(),
mode: ProsteAnimationMode.fade,
...
);
copied to clipboard
Api #
Notice that using the constructor method can not control the routing time,other static functions can control the entry and exit time.

ProsteRouteAnimation

ProsteRouteAnimation(
builder: (context) => DemoPage(),
curve: Curves.linear,
useFade: true,
axis: Axis.vertical,
alignment: Alignment.center,
mode: ProsteAnimationMode.fade,
maintainState: true,
fullscreenDialog: false,
);
copied to clipboard

ProsteRouteAnimation.fadeRoute

ProsteRouteAnimation.fadeRoute(
route: DemoPage(),
duration: Duration(milliseconds: 300),
reverseDuration: Duration(milliseconds: 300),
curve: Curves.linear,
)
copied to clipboard

ProsteRouteAnimation.slideRoute

ProsteRouteAnimation.slideRoute(
route: DemoPage(),
mode: ProsteSlideMode.fromLeft,
duration: Duration(milliseconds: 300),
reverseDuration: Duration(milliseconds: 300),
useFade: true,
curve: Curves.linear,
);
copied to clipboard

ProsteRouteAnimation.scaleRoute

ProsteRouteAnimation.scaleRoute(
route: DemoPage(),
alignment: Alignment.center,
duration: Duration(milliseconds: 300),
reverseDuration: Duration(milliseconds: 300),
useFade: true,
curve: Curves.linear,
);
copied to clipboard

ProsteRouteAnimation.rotationRoute

ProsteRouteAnimation.rotationRoute(
route: DemoPage(),
alignment: Alignment.center,
duration: Duration(milliseconds: 300),
reverseDuration: Duration(milliseconds: 300),
useFade: true,
curve: Curves.linear,
);
copied to clipboard

ProsteRouteAnimation.sizeRoute

ProsteRouteAnimation.sizeRoute(
route: DemoPage(),
alignment: Alignment.center,
duration: Duration(milliseconds: 300),
reverseDuration: Duration(milliseconds: 300),
useFade: true,
axis: Axis.vertical,
curve: Curves.linear,
);
copied to clipboard

If you find a bug, please send it to issues, I will fix it as soon as I see it, thinks!!

License

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

Share

• Share on Facebook
• Share on Twitter