代碼:
import 'package:flutter/material.dart';
import 'home_test.dart';
class SplashScreen extends StatefulWidget {
SplashScreen({Key key}) : super(key: key);
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> with SingleTickerProviderStateMixin{
AnimationController _controller;
Animation _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync:this,duration: Duration(milliseconds: 3000));//垂直動態演示 -- 毫秒
_animation = Tween(begin: 0.0,end: 1.0).animate(_controller);
_animation.addStatusListener((status){//監聽 動畫狀態
if (status == AnimationStatus.completed) {//動畫結束
//路由跳轉
Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context)=>MyHome()),(route) => route == null );//跳轉下一頁 並把動畫結束
}
});
_controller.forward();//播放動畫
}
@override
void dispose() {
super.dispose();
d
_controller.dispose();//銷毀控制器
}
@override
Widget build(BuildContext context) {
return FadeTransition(//動畫過渡控件
opacity: _animation,
child: Image.network('http://img.mp.itc.cn/upload/20170413/bf3c5c6a69264f08b66cabe456c460e1_th.jpg',fit: BoxFit.cover,scale: 2.0),
);
}
}
總結:
//啟動圖 —— 有點類似於我們的廣告到首頁
1.繼承SingleTickerProviderStateMixin
2.聲明兩個變量 AnimationController 和 Animation
重寫state
初始化
2.1 _animitionController = AnimationController(vsync:this,Duration(xx));;//垂直動態演示 和 時間
2.2 _ animation = Animation(Tween(begin:0,end:1).animate(_animationController)
_animation.addStatusListener(status)//監聽狀態
If(status == AnimationStatus.completed){
//動畫結束
//路由跳轉到下一頁 並把當前動畫結束 因為很耗資源
Navigator.of(context).pushAndRemoveUtil(MaterialPageRoute(build:(context)=>CCC()),(route)=>route == null)
}
