重写过渡动画代码：
import 'package:flutter/material.dart';
class CustomRoute extends PageRouteBuilder {
final Widget widget;
CustomRoute(this.widget)//重写构造方法----调用此方法直接调用的就是这个方法 类似于重写init 此处的widget 传递过来的就是页面 因为本类是重写了压栈的方法
:super(
transitionDuration:Duration(seconds: 1),//过渡时间
pageBuilder:(//页面构造器
BuildContext context,//上下文
Animation <double> animation1,
Animation <double> animation2,
){
return widget;
},
transitionsBuilder:(//过渡构造器，主要的实现
BuildContext context,
Animation <double> animation1,//猜想是父页面的动画
Animation <double> animation2,//猜想是子页面的动画
Widget child//子文件
)
{
//动画实现
return FadeTransition(
opacity: Tween(begin: 0.0,end: 1.0)//类似于alpha 透明度效果
.animate(CurvedAnimation(
parent: animation1,//默认就是animation1
curve: Curves.fastOutSlowIn//动画曲线 先快后慢 ,快出慢进等
)),
child: child,//传入子页面
);//渐隐渐现
}
);
}
使用代码：
import 'package:flutter/material.dart';
import 'second_page.dart';
import 'custom_route.dart';
class FirstPage extends StatelessWidget {
const FirstPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.orange,
appBar: AppBar(
title: Text('First Page',style: TextStyle(fontSize: 36.0)),
elevation: 1.0,//默认4.0 导航栏浮层效果
),
body: Center(
child: MaterialButton(
child: Icon(
Icons.navigate_next,
color:Colors.white,
size:64.0
),
onPressed: (){
Navigator.of(context).push(CustomRoute(SecondPage()));
}
),
),
);
}
}
总结：
//过渡动画
重写PageRouteBuilder{
transitionsBuilder ()//过渡构造器{
return FadeTransition{//过渡方法
//alpha 的更改
opacity:Tween(begin:xx,end:xxx).animate(CurvedAnimation
){
curve: Curves.fastOutSlowIn//动画曲线 先快后慢 ,快出慢进等
}
}
}
}
导航
elevation:xxx 导航栏浮层效果 0 是无效果内嵌到页面中，默认4.0
appbar
leading: Container(),//字体居中