引用：https://blog.csdn.net/whqwjb/article/details/87925588

?

main.dart:

import 'package:flutter/material.dart';
import 'custom_route.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.green,
),
home: Container(
child: FirstView(),
),
);
}
}


//設置父頁
class FirstView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text("第一頁"),

elevation: 4.0,
),

body: Center(
/*按鈕一
//IconButton
child: IconButton(
icon: Icon(Icons.navigate_next,color: Colors.green,),
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context){return SecondView();}));
},
),
*/
//按鈕二
child: RaisedButton(
child: Icon(Icons.navigate_next),
onPressed: (){
//Navigator.push(context, MaterialPageRoute(builder: (context){return SecondView();}));
Navigator.push(context, CustomRouteJianBian(SecondView()));
},
),
),
)
);
}
}




class SecondView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
backgroundColor: Colors.green,
appBar: AppBar(
title: Text("第二頁"),
elevation: 1.0,
),
body: Center(
/*
child: IconButton(
icon:Icon(Icons.navigate_before,color: Colors.blue,),
onPressed: (){
Navigator.pop(context);
},
),
*/
//按鈕三
child: MaterialButton(
child: Icon(
Icons.navigate_before, color: Colors.white, size: 60.0,),
onPressed: () {
Navigator.pop(context);
},
),
),
),
);
}
}


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

//漸變效果
class CustomRouteJianBian extends PageRouteBuilder{
final Widget widget;
CustomRouteJianBian(this.widget)
:super(
transitionDuration:const 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 :2.0).animate(CurvedAnimation(
parent:animation1,
curve:Curves.fastOutSlowIn
)),
child: child,
);
}
);
}



//縮放效果
class CustomRouteZoom extends PageRouteBuilder{
final Widget widget;
CustomRouteZoom(this.widget)
:super(
transitionDuration:const 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 ScaleTransition(
scale:Tween(begin:0.0,end:1.0).animate(CurvedAnimation(
parent:animation1,
curve: Curves.fastOutSlowIn
)),
child:child
);

}
);
}



//旋轉+縮放效果
class CustomRouteRotateZoom extends PageRouteBuilder{
final Widget widget;
CustomRouteRotateZoom(this.widget)
:super(
transitionDuration:const 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 RotationTransition(
turns:Tween(begin:0.0,end:1.0)
.animate(CurvedAnimation(
parent: animation1,
curve: Curves.fastOutSlowIn
)),

child:ScaleTransition(
scale:Tween(begin: 0.0,end:1.0)
.animate(CurvedAnimation(
parent: animation1,
curve:Curves.fastOutSlowIn
)),
child: child,
)
);

}
);
}




//滑動效果
class CustomRouteSlide extends PageRouteBuilder {
final Widget widget;

CustomRouteSlide(this.widget)
:super(
transitionDuration: const 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 SlideTransition(
position: Tween<Offset>(
begin: Offset(-1.0, 0.0),
end: Offset(0.0, 0.0)
)
.animate(CurvedAnimation(
parent: animation1,
curve: Curves.fastOutSlowIn
)),
child: child,

);
}
);
}

轉載于:https://www.cnblogs.com/braveheart007/p/11135322.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的flutter 导航页面转换动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。