Flutter 路由跳转效果 快进慢出

1、main.dart

import 'package:flutter/material.dart';

import 'Pages.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: FirstPage(),
    );
  }
}

2、animation_page.dart

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

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //设置背景颜色
      backgroundColor: Colors.amberAccent,
      appBar: AppBar(
        title: Text('第一个页面', style: TextStyle(fontSize: 36.0),),
        //跟底部的appBar的融合情况
        elevation: 4.0,
      ),
      body: Center(
        child: MaterialButton(
          onPressed: () {
            Navigator.of(context).push(
                CustomRouter(SecondPage()));
          },
          child: Icon(
            Icons.navigate_next,
            color: Colors.white,
            size: 64.0,
          ),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.pinkAccent,
      appBar: AppBar(
        title: Text('第二个页面', style: TextStyle(fontSize: 36.0),),
        backgroundColor: Colors.pink,
        leading: Container(),
        elevation: 4.0,
      ),
      body: Center(
        child: MaterialButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Icon(
            Icons.navigate_before,
            color: Colors.white,
            size: 64.0,
          ),

        ),
      ),
    );
  }
}

3、animate_router.dart

重写Flutter的动画效果

import 'package:flutter/material.dart';

class CustomRouter extends PageRouteBuilder {
  final Widget widget;

    //构造方法
  CustomRouter(this.widget)
    :super(
    //过度时间
    transitionDuration:Duration(seconds: 2),
    pageBuilder:(
        BuildContext context,
        Animation<double> animation1,
        Animation<double> animation2
        ){
      return widget;
    },
      transitionsBuilder:(
      BuildContext context,
      Animation<double> animation1,
      Animation<double> animation2,
      Widget child
  ){
      //FadeTransition渐隐渐现
    return FadeTransition(
      opacity: Tween(begin: 0.0,end: 2.0)
      //fastOutSlowIn快出慢进
      .animate(CurvedAnimation(parent: animation1, curve: Curves.fastOutSlowIn)),
      child: child,
    );
  }
  );


}

4、效果展示