flutter 普通路由切换动画效果-蒲公英云

1、构造类来继承 PageRouteBuilder
        class xx extends PageRouteBuilder
2、构造函数传入组件，并重写父类构造器
        final Widget x;
        CusRoute(this.x):super(
            transitionDuration:Duration(seconds: 1),    动画时间
            pageBuilder:(BuildContext context,Animation<double> animation1,Animation<double> animation2)
            {
              return x;
            },
            transitionsBuilder:(
              BuildContext context,
              Animation<double> animation1,
              Animation<double> animation2,
              Widget child
            ){
              实现动画
              return
              1、渐变 
               FadeTransition(
                 child: child,   若混合其他动画,child内容直接放其他动画,优先级次于主动画
                 opacity: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.动画曲线)),
               );
              2、缩放
              ScaleTransition(
                 child: child,
                 scale: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve:  Curves.动画曲线)),
               );
              3、旋转
              RotationTransition(
                 child: child,
                 turns: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.动画曲线)),
               );
              4、先旋转后缩放
               RotationTransition(
                 child:ScaleTransition(
                   child: child,
                   scale: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.动画曲线)),
                 ) ,
                 turns: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.动画曲线)),
               );
              5、平滑
              SlideTransition(
                child: child,
                position: Tween<Offset>(begin:Offset(-1.0,0.0),end:Offset(0.0,0.0)).animate(CurvedAnimation(parent: animation1, curve:  Curves.动画曲线)),
                    -1.0代表最小位置
                     0.0代表最大位置
              );
            }
  );
3、使用动画
    先引入动画类,在回调中
         Navigator.of(context).push(xx(路由组件()));

代码示例:
动画类:

import 'package:flutter/material.dart';
class CusRoute extends PageRouteBuilder{ 
  final Widget comp;
  CusRoute(this.comp):super(
    transitionDuration:Duration(seconds: 1),
    pageBuilder:(BuildContext context,Animation<double> animation1,Animation<double> animation2)
    { 
      return comp;
    },
    transitionsBuilder:(
      BuildContext context,
      Animation<double> animation1,
      Animation<double> animation2,
      Widget child
    ){ 
      //实现动画
      return
      //渐变 
      // FadeTransition(
      // child: child,
      // opacity: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.easeIn)),
      // );
      //缩放
      // ScaleTransition(
      // child: child,
      // scale: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.easeIn)),
      // );
      //旋转
      // RotationTransition(
      // child: child,
      // turns: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.easeIn)),
      // );
      //先旋转后缩放
      // RotationTransition(
      // child:ScaleTransition(
      // child: child,
      // scale: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.easeIn)),
      // ) ,
      // turns: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.easeIn)),
      // );
      //平滑
      SlideTransition(
        child: child,
        position: Tween<Offset>(begin:Offset(-1.0,0.0),end:Offset(0.0,0.0)).animate(CurvedAnimation(parent: animation1, curve: Curves.easeIn)),
      );
    }
  );
}

跳转dart:

import "package:flutter/material.dart";
import "drag.dart";
import 'page/1.dart';
import 'page/2.dart';
import 'page/3.dart';
import 'xuan.dart';
void main()
{ 
  runApp(App());
}
class App extends StatelessWidget { 
  const App({ Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) { 
    return App2();
  }
}
class App2 extends StatefulWidget { 
  App2({ Key key}) : super(key: key);
  @override
  _AppState createState() => _AppState();
}
class _AppState extends State<App2> { 
  List _page=[Home3(),Home2(),Home4()];
  int index=0;
  @override
  Widget build(BuildContext context) { 
    return  MaterialApp(
      home:Scaffold(
        appBar:AppBar(
          title: Text('小案例'),
        ),
        body:Home() ,
        floatingActionButton: FloatingActionButton(
          onPressed: (){ },
          tooltip: 'js',
          child: Icon(
            Icons.add,
            color: Colors.white,
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        //导航栏
        bottomNavigationBar:BottomAppBar(
          color: Colors.lightBlue,
          //有缺口的圆形矩阵,用来放置浮动按钮
          shape: CircularNotchedRectangle(),
          child: Row(
            mainAxisAlignment:MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              IconButton(
                icon:Icon(Icons.home),
                color: Colors.white,
                onPressed: (){ },
              ),
              IconButton(
                icon:Icon(Icons.category),
                color: Colors.white,
                onPressed: (){ },
              ),
          ],),
        )
      ),
      routes: { 
        '/test':(context)=>Home4()
      },
      //去掉右上角的debug贴纸
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
      );
  }
}
class Home extends StatefulWidget { 
  @override
  _HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> { 
  Color dragColor=Colors.orange;
  @override
  Widget build(BuildContext context) { 
    return Container(
      width: double.infinity,
      color: Colors.red,
       child: Column(children: <Widget>[
           //跳转
         RaisedButton(
           child: Text('跳转'),
           onPressed: (){ 
             Navigator.of(context).push(CusRoute(Home4()));
           },
         ),
       ],)
    );
  }
}