页面转场动画对于一个成熟的应用来说，是十分重要的。

Flutter 提供了很便捷的方式实现页面转场动画。

通常，在页面跳转的时候会使用 Flutter 提供的 MaterialPageRoute，它提供了默认的页面跳转动画。

当然，我们也可以定义自己的页面跳转动画。

1. 使用 PageRouteBuilder

使用 PageRouteBuilder，可以快速的自定义一个页面跳转动画。

Navigator.push(context, PageRouteBuilder(pageBuilder:                      (BuildContext context, Animation animation,                          Animation secondaryAnimation) {                    return ScaleTransition(                        scale: animation,                        alignment: Alignment.bottomRight,                        child: AnimPage());复制代码

2.继承 PageRoute

通过继承 PageRoute，也可以自定义页面跳转动画。

class FadeRoute extends PageRoute {  FadeRoute({    @required this.pageBuilder,    this.transitionDuration = const Duration(milliseconds: 300),    this.opaque = true,    this.barrierDismissible = false,    this.barrierColor,    this.barrierLabel,    this.maintainState = true,  });  final WidgetBuilder pageBuilder;  @override  final Duration transitionDuration;  @override  final bool opaque;  @override  final bool barrierDismissible;  @override  final Color barrierColor;  @override  final String barrierLabel;  @override  final bool maintainState;  @override  Widget buildPage(BuildContext context, Animation
    
      animation,      Animation
     
       secondaryAnimation) => pageBuilder(context);  @override  Widget buildTransitions(BuildContext context, Animation
      
        animation,      Animation
       
         secondaryAnimation, Widget child) {    return FadeTransition(      opacity: animation,      child: pageBuilder(context),    );  }}复制代码
       
      
     
    

关键就是实现 buildPage() 和 buildTransitions() 两个函数。

在 buildTransitions() 中添加转场 Widget 。

使用：

Navigator.push(context, FadeRoute(builder: (context) {  return AnimPage();}));复制代码

定义起来不是很方便，但是便于封装统一的转场动画。

如何找到我？