import 'package:flutter/material.dart';
import 'package:flutter_app/pages/FirstPage.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green, //定义主题风格 primarySwatch
),
home: FirstPage(),
);
} }
import 'package:flutter/material.dart';
import 'package:flutter_app/CustomRoute.dart';
import 'package:flutter_app/pages/SecondPage.dart'; class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
appBar:AppBar(
title:Text('FirstPage',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(
CustomRoute(SecondPage())); //使用自定义路由动画 },
),
)
);
}
}
import 'package:flutter/material.dart';
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.pinkAccent,
appBar: AppBar(
title: Text('SecondPage',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 CustomRoute extends PageRouteBuilder {
final Widget widget;
CustomRoute(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
// );
//旋转+缩放路由动画
// 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.fastOutSlowIn)),
// child: child,
// );
return FadeTransition(
opacity: Tween(begin:0.0,end :1.0).animate(CurvedAnimation(
parent:animation1,
curve:Curves.fastOutSlowIn
)),
child: child,
);
});
}效果：