给你的Flutter页面跳转加上动画

目录传送门：《Flutter快速上手指南》先导篇

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

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();
}));
复制代码

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

目录传送门：《Flutter快速上手指南》先导篇

如何找到我？

传送门：CoorChice 的主页

传送门：CoorChice 的 Github

转载于:https://juejin.im/post/5ca82834e51d4557944b5ffc