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()));
},
),
],)
);
}
}