flutter自定义页面路由动画

相信很多android的小伙伴都听过flutter了，甚至很多已经开始使用flutter了。但一般使用flutter都是用MaterialApp，然后像下面这样跳转:

Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
  return new SecondPage();
}))；

那么我们怎么给跳转的页面加动画呢，代码如下：

return PageRouteBuilder<T>(
  pageBuilder: (BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return new SecondPage();
  },
  transitionsBuilder: (_, animation, __, child) {
    return ScaleTransition(
      scale: animation,
      child: child,
    );
  },
);

一般页面动画是全局的，大家应该发现了，第一次用的MaterialPageRoute，第二次改成PageRouteBuilder了，为啥呢。因为MaterialApp的全局动画实在PageTransitionsTheme里设置的。感兴趣的可以自己研究下。为啥我不说呢，因为MaterialApp是在WidgetsApp上封了一层，虽然更像安卓，但也导致我们学习的东西要增多，所以我们来看底层的WidgetsApp是怎么设置全局页面动画的：

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    return WidgetsApp(
      routes: {
        //效果等同home:MyHomePage();
        '/': (context) => MyHomePage(),
        '/Second': (context) => SecondPage(),
      },
      pageRouteBuilder: <T>(RouteSettings settings, WidgetBuilder builder) {
        return PageRouteBuilder<T>(
          settings: settings,
          pageBuilder: (BuildContext context, Animation<double> animation,
              Animation<double> secondaryAnimation) {
            return builder(context);
          },
          transitionsBuilder: (_, animation, __, child) {
            return ScaleTransition(
              scale: animation,
              child: child,
            );
          },
        );
      },
      textStyle: Styles.getAppTextStyle(),
      color: Colors.white,
      title: 'Flutter Demo',
    );
  }
}

好了，设置页面路由动画就是这样，这里我们用的是静态路由。下节我们说下静态和动态路由，及其传值问题。