1、main.dart设置导航到登录界面
import 'package:flutter/material.dart';import 'package:flash_chat/screens/welcome_screen.dart';import 'package:flash_chat/screens/login_screen.dart';import 'package:flash_chat/screens/registration_screen.dart';import 'package:flash_chat/screens/chat_screen.dart';void main() => runApp(FlashChat());class FlashChat extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData.dark().copyWith(textTheme: TextTheme(body1: TextStyle(color: Colors.black54),),),initialRoute: WelcomeScreen.id,routes: {WelcomeScreen.id: (context) => WelcomeScreen(),LoginScreen.id: (context) => LoginScreen(),RegistrationScreen.id: (context) => RegistrationScreen(),ChatScreen.id: (context) => ChatScreen(),},);}}
由上面可知默认导航到的是WelcomeScreen界面
2、welcome_screen.dart
AnimationController :设置特效的持续时间
ColorTween : 设置从哪个颜色渐变到哪个颜色
controller.forward(); :执行动画backgroundColor: animation.value :将程序的背景颜色设置为animation.value
import 'package:flutter/material.dart';import 'login_screen.dart';import 'registration_screen.dart';class WelcomeScreen extends StatefulWidget {static String id = 'welcome_screen';@override_WelcomeScreenState createState() => _WelcomeScreenState();}class _WelcomeScreenState extends State<WelcomeScreen>with SingleTickerProviderStateMixin {AnimationController controller;Animation animation;@overridevoid initState() {super.initState();controller = AnimationController(duration: Duration(seconds: 1), vsync: this); //AnimationControlleranimation = ColorTween(begin: Colors.blueGrey, end: Colors.white).animate(controller);controller.forward();controller.addListener(() {setState(() {});print(animation.value);});}@overrideWidget build(BuildContext context) {return Scaffold(backgroundColor: animation.value,body: Padding(padding: EdgeInsets.symmetric(horizontal: 24.0),child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.stretch,children: <Widget>[Row(children: <Widget>[Hero(tag: 'logo',child: Container(child: Image.asset('images/logo.png'),height: 60.0,),),Text('Falsh Chat',style: TextStyle(fontSize: 45.0,fontWeight: FontWeight.w900,),),],),SizedBox(height: 48.0,),Padding(padding: EdgeInsets.symmetric(vertical: 16.0),child: Material(elevation: 5.0,color: Colors.lightBlueAccent,borderRadius: BorderRadius.circular(30.0),child: MaterialButton(onPressed: () {Navigator.pushNamed(context, LoginScreen.id);},minWidth: 200.0,height: 42.0,child: Text('Log In',),),),),Padding(padding: EdgeInsets.symmetric(vertical: 16.0),child: Material(color: Colors.blueAccent,borderRadius: BorderRadius.circular(30.0),elevation: 5.0,child: MaterialButton(onPressed: () {Navigator.pushNamed(context, RegistrationScreen.id);},minWidth: 200.0,height: 42.0,child: Text('Register',),),),),],),),);}}
效果:
颜色从蓝灰色渐变到白色
