flutter 路由动画
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, ); }); }
效果:
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!