main函数
import 'package:flutter/material.dart';
import 'first_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch:Colors.blue,
),
home: FirstPage(),
);
}
}
FirstPage
import 'package:flutter/material.dart';
import 'custome_router.dart';
class FirstPage extends StatefulWidget {
@override
_FirstPageState createState() => _FirstPageState();
}
class _FirstPageState extends State<FirstPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(title: Text('First Page',
style: TextStyle(fontSize: 36.0)),
elevation: 0.0,),
body: Center(
child: MaterialButton(
child: Icon(
Icons.navigate_next,
color: Colors.white,
size: 64.0,
),
onPressed: (){
Navigator.of(context).push(CustomeRoute(SecondPage()));
},
),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.pinkAccent,
appBar: AppBar(title: Text('Second Page',
style: TextStyle(fontSize: 36.0)),
backgroundColor: Colors.pinkAccent,
leading: Container(),
elevation: 0.0,),
body: Center(
child: MaterialButton(
child: Icon(
Icons.navigate_before,
color: Colors.white,
size: 64.0,
),
onPressed: (){
Navigator.of(context).pop();
},
),
),
);
}
}
动画组件
import 'package:flutter/material.dart';
class CustomeRoute extends PageRouteBuilder{
final Widget widget;
CustomeRoute(this.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).animate(CurvedAnimation(
// parent: animation1,
// curve: Curves.fastOutSlowIn
// )),
// child: child,
// );
//旋转加缩放动画效果
// return ScaleTransition(scale: Tween(begin:0.0,end:1.0).animate(CurvedAnimation(
// parent: animation1,
// curve: Curves.fastOutSlowIn,)),
// child: 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,
// ),
// );
//左右滑动动画效果
return SlideTransition(position: Tween<Offset>(
begin: Offset(-1.0,0.0),
end: Offset(0.0,0.0),).animate(CurvedAnimation(
parent: animation1,
curve: Curves.easeInOutCirc
)),
child: child,
);
}
);
}
参考文献: