flutter-路由动画

路由动画的原理，就是重写并继承PageRouterBuilder这个类里的transitionsBuilder方法。

入口文件main.dart

import 'package:flutter/material.dart';
import 'pages.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: FirstPage(),
    );
  }
}

main.dart文件引入的pages.dart文件，生成FirstPage和SecondPage这两个页面：

import 'package:flutter/material.dart';
import 'custom_route.dart';

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueAccent,
      appBar: AppBar(        
        title: Text('FirstPage'),
        leading: Center(),
      ),
      body: Center(
        child: MaterialButton(
          child: Icon(
            Icons.navigate_next,
            color: Colors.white,
            size: 60.0,
          ),
          onPressed: (){
            Navigator.of(context).push(
              CustomRoute(
                SecondPage()
              )
            );
          },
        ),
      ),  
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.redAccent,
      appBar: AppBar(
        // automaticallyImplyLeading: false, // 去掉leading位置的返回箭头
        backgroundColor: Colors.redAccent,
        title: Text('SecondPage'),
        elevation: 0.0,
      ),
      body: Center(
        child: MaterialButton(
          child: Icon(
            Icons.navigate_before,
            color: Colors.white,
            size: 60.0,
          ),
          onPressed: (){
            Navigator.of(context).push(
              CustomRoute(
                FirstPage()
              )
            );
          },
        ),
      ),  
    );
  }
}

注意：AppBar的elevation属性：是AppBar滚动时的融合程度，一般有滚动时默认4.0，设置为0.0，导航部分和内容区域就会完全融合，没有导航下面的下划线效果了。

custom_route.dart是自定义的路由方法，继承通用的路由的构造器类PageRouterBuilder，继承后重写父类的CustomRoute构造方法：

import 'package:flutter/material.dart';

class CustomRoute extends PageRouteBuilder {
  final Widget widget;
  CustomRoute(this.widget):super(
    transitionDuration: Duration(seconds: 1),
    pageBuilder: (context, animation, secondaryAnimation) {
      return widget;
    },
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // 渐隐渐现
      // return FadeTransition(
      //   opacity: Tween(begin: 0.0, end: 1.0).animate(
      //     CurvedAnimation(
      //       parent: animation,
      //       curve: Curves.fastOutSlowIn,
      //     )
      //   ),
      //   child: child,
      // );
      // 缩放
      // return ScaleTransition(
      //   scale: Tween(begin: 0.0, end: 1.0).animate(
      //     CurvedAnimation(
      //       parent: animation,
      //       curve: Curves.fastOutSlowIn
      //     )
      //   ),
      //   child: child,
      // );
      // 旋转+缩放
      // return RotationTransition(
      //   turns: Tween(begin: 0.0, end: 1.0).animate(
      //     CurvedAnimation(
      //       parent: animation,
      //       curve: Curves.fastOutSlowIn
      //     )
      //   ),
      //   child: ScaleTransition(
      //     scale: Tween(begin: 0.0, end: 1.0).animate(
      //       CurvedAnimation(
      //         parent: animation,
      //         curve: Curves.fastOutSlowIn
      //       )
      //     ),
      //     child: child,
      //   ),
      // );
      // 左右滑动
      return SlideTransition(
        position: Tween(
          begin: Offset(-1.0, 0.0), 
          end: Offset(0.0, 0.0)
        ).animate(CurvedAnimation(
          parent: animation,
          curve: Curves.fastOutSlowIn)
        ),
        child: child,
      );
    },
  );
}

• FadeTransition:渐隐渐现过渡效果，主要设置opactiy（透明度）属性，值是0.0-1.0。

• animate:动画的样式，一般使用动画曲线组件（CurvedAnimation）。

• curve:设置动画的节奏，也就是常说的曲线，Flutter准备了很多节奏，通过改变动画曲线可以做出很多不同的效果。

• transitionDuration：设置动画持续的时间，建议1和2之间。