提问的大致意思:页面导航过渡时间。
整理了渐变、缩放、旋转+缩放、滑动
import 'package:flutter/material.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 StackOverFlow Page Transition',
theme: ThemeData(
//设置主题
primarySwatch: Colors.green,
),
home: Container(
child: FirstPage(),
),
);
}
}
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text("First Page"),
elevation: 4.0,
),
body: Center(
child: RaisedButton(
child: Text("Nav To SecondPage"),
onPressed: (){
Navigator.push(context, CustomRouteSlide(SecondPage()));
},
),
),
)
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
backgroundColor: Colors.green,
appBar: AppBar(
title: Text("SecondPage"),
elevation: 1.0,
),
),
);
}
}
渐变效果
//渐变效果
class CustomRouteGradient extends PageRouteBuilder{
final Widget widget;
CustomRouteGradient(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,
);
}
);
}
下载案例:flutter_stackoverflow_page_transition