flutter添加启动图及设置启动时间

首先贴个官方的设置方法,看这里:https://flutterchina.club/assets-and-images/#%E6%9B%B4%E6%96%B0%E5%90%AF%E5%8A%A8%E9%A1%B5
虽然官方的方法比较简单,但是有时我们可能需要自己配置启动图的生效时间,这时就需要另外实现了。思路就是第一个页面放一张全屏图片,倒数计时结束时再跳转到主页:

 1 import 'dart:async';
 2 import 'package:flutter/material.dart';
 3 import 'package:/pages/home.dart';
 4 import 'package:flutter/services.dart';
 5 
 6 void main() {
 7   runApp(new MaterialApp(
 8     title: '启动图demo',
 9     theme: new ThemeData(
10         brightness: Brightness.light,
11         backgroundColor: Colors.white,
12         platform: TargetPlatform.iOS),
13     home: new SplashScreen(),
14     routes: <String, WidgetBuilder>{
15       '/home': (BuildContext context) => new Home()
16     },
17   ));
18 }
19 
20 class SplashScreen extends StatefulWidget {
21   @override
22   _SplashScreenState createState() => new _SplashScreenState();
23 }
24 
25 class _SplashScreenState extends State<SplashScreen> {
26   startTime() async {
27     //设置启动图生效时间
28     var _duration = new Duration(seconds: 1);
29     return new Timer(_duration, navigationPage);
30   }
31 
32   void navigationPage() {
33     Navigator.of(context).pushReplacementNamed('/home');
34   }
35 
36   @override
37   void initState() {
38     super.initState();
39     startTime();
40   }
41 
42   @override
43   Widget build(BuildContext context) {
44     return new Scaffold(
45       body: new Center(
46         child: new Image.asset('assets/images/launch_image.png'),
47       ),
48     );
49   }
50 }

最后记得将启动图在pubspec.yaml文件声明下,完毕~

猜你喜欢

转载自www.cnblogs.com/pjl43/p/9463358.html