Flutter 路由跳转动画效果

缩放动画.gif 旋转动画.gif 左右动画.gif 渐变动画.gif

main

import 'package:flutter/material.dart';
import 'firstpage.dart';
main(){
  runApp(new MyApp());
}
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       title:'Flutter Demo',
      // 自定义主题样本
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstPage(),
    );
  }
}

firstpage

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

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      appBar:AppBar(
        title:Text('FirstPage',style: TextStyle(fontSize: 36.0)),
       // 模式是4.0设置成0.0是完全和main布局融合
        elevation: 0.0,
      ),
      body:Center(
        child: MaterialButton(
          child: Icon(
            Icons.navigate_next,
            color:Colors.white,
            size:64.0,
          ),
          // 点击开启路由
          onPressed: (){
                                  // 调用自定义的路由方法
             Navigator.of(context).push(CustomRoute(SecondPage()));
          },
        ),
      )
    );
  }
}
class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.pinkAccent,
      appBar: AppBar(
        title: Text('SecondPage',style:TextStyle(fontSize:36.0),),
        backgroundColor: Colors.pinkAccent,
        leading:Container(),
        elevation: 0.0,
      ),
      body:Center(
        child: MaterialButton(
          child: Icon(
            Icons.navigate_before,
            color:Colors.white,
            size:64.0
          ),
          onPressed: ()=>Navigator.of(context).pop(),
        ),
      )
    );
  }
}

自定义的custom_router

import 'package:flutter/material.dart';
class CustomRoute extends PageRouteBuilder{
  final Widget widget;

  CustomRoute(this.widget)
  :super(
    // 设置过度时间
    transitionDuration:Duration(seconds: 1),
    // 构造器
    pageBuilder:(
      // 上下文和动画
      BuildContext context,
      Animation<double> animaton1,
      Animation<double> animaton2,
    ){
      return widget;
    },
    transitionsBuilder:(
      BuildContext context,
      Animation<double> animaton1,
      Animation<double> animaton2,
      Widget child,
    ){
    
    // 需要什么效果把注释打开就行了
      // 渐变效果
      return FadeTransition(
        // 从0开始到1
        opacity: Tween(begin: 0.0,end: 1.0)
        .animate(CurvedAnimation(
          // 传入设置的动画
          parent: animaton1,
          // 设置效果，快进漫出   这里有很多内置的效果
          curve: Curves.fastOutSlowIn,
        )),
        child: child,
      );
      
      // 缩放动画效果
      // return ScaleTransition(
      //   scale: Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(
      //     parent: animaton1,
      //     curve: Curves.fastOutSlowIn
      //   )),
      //   child: child,
      // );

      // 旋转加缩放动画效果
      // return RotationTransition(
      //   turns: Tween(begin: 0.0,end: 1.0)
      //   .animate(CurvedAnimation(
      //     parent: animaton1,
      //     curve: Curves.fastOutSlowIn,
      //   )),
      //   child: ScaleTransition(
      //     scale: Tween(begin: 0.0,end: 1.0)
      //     .animate(CurvedAnimation(
      //       parent: animaton1,
      //       curve: Curves.fastOutSlowIn
      //     )),
      //     child: child,
      //   ),
      // );

      // 左右滑动动画效果
      // return SlideTransition(
      //   position: Tween<Offset>(
      //     // 设置滑动的 X , Y 轴
      //     begin: Offset(-1.0, 0.0),
      //     end: Offset(0.0,0.0)
      //   ).animate(CurvedAnimation(
      //     parent: animaton1,
      //     curve: Curves.fastOutSlowIn
      //   )),
      //   child: child,
      // );
    }
  );
}