flutter_page_transition
一个丰富、便捷、易于使用的 Flutter 页面过渡包。
一些演示
入门
将此添加到您的包的pubspec.yaml文件中
dependencies:
flutter_page_transition: ^0.1.0
您也可以依赖我存储在我的存储库中的这个包
flutter_page_transition:
git:
url: git://github.com/handoing/flutter_page_transition.git
然后你应该运行 flutter packages upgrade。
过渡类型
| 页面过渡类型 | 方向 |
|---|---|
| slideInLeft | ⬅️ |
| slideInLeft | ➡️ |
| slideInUp | ⬆️ |
| slideInDown | ⬇️ |
| slideLeft | ⬅️ |
| slideRight | ➡️ |
| slideUp | ⬆️ |
| slideDown | ⬇️ |
| slideParallaxLeft | ⬅️ |
| slideParallaxRight | ➡️ |
| slideParallaxUp | ⬆️ |
| slideParallaxDown | ⬇️ |
| slideZoomLeft | ⬅️ |
| slideZoomRight | ➡️ |
| slideZoomUp | ⬆️ |
| slideZoomDown | ⬇️ |
| rippleRightUp | ↖️ |
| rippleLeftUp | ↗️ |
| rippleLeftDown | ↘️ |
| rippleRightDown | ↙️ |
| rippleMiddle | ? |
| transferRight | ⬅️ |
| transferUp | ⬆️ |
| fadeIn | ❌ |
| 自定义 | ❌ |
示例
使用 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()));
创建自定义方法
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);
测试
运行测试
flutter test
测试驱动
运行驱动器测试
cd example/
flutter drive --target=test_driver/app.dart
