Flutter实现启动页

1. 配置启动图

配置启动图使用图片控件Image，Image有两种数据源:加载本地图片和加载网络图片，这个示例中使用本地图片作为启动图的数据源。
加载本地图片有几个步骤:

1. 选取一张图片，将图片放到项目的assets目录下
2. 配置pubspec.yaml,要注意横线前后的空格

assets:
   - assets/icon_splash.png

3. 使用Image.assets()加载图片

2. 添加倒计时

添加倒计时功能可以使用Flutter自带的Timer类，这个类在dart:async包下。
倒计时核心功能的代码如下：

Timer _countTimer;//计时器
int _countDown = 6;//计数
void _startCountDown() {
    _countTimer = Timer.periodic(
      Duration(seconds: 1), //刷新频率
      (timer) {
        setState(() {
          if (_countDown < 1) {
          //倒计时结束，跳转到首页，并且取消倒计时
            Navigator.pushNamed(context, "HomePage");
            _countTimer.cancel();
            _countTimer = null;
          } else {
            _countDown -= 1;//计数器减1
          }
        });
      },
    );
  }

3. 全部代码

这里给出splash.dart的全部代码，供参考。

import 'dart:async';
import 'package:flutter/material.dart';

//启动页
class SpalashPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _SpalashState();
  }
}

class _SpalashState extends State<SpalashPage> {
  Timer _countTimer;
  int _countDown = 6;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: [
          Image.asset(
            "assets/icon_splash.png",
            fit: BoxFit.fill,
          ),
          Positioned(// 定位组件，将倒计时定位到右上角
            child: Container(
              child: RichText(
                text: TextSpan(children: [
                  TextSpan(
                    text: "$_countDown",
                    style: TextStyle(color: Colors.black),
                  ),
                ]),
              ),
              //装饰器
              decoration: BoxDecoration(
                color: Colors.grey[350],
                border: Border.all(width: 1),
                borderRadius: BorderRadius.all(
                  Radius.circular(45),
                ),
              ),
              padding: EdgeInsets.all(15),
            ),
            top: 30,
            right: 30,
          )
        ],
      ),
    );
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _startCountDown();
  }

//倒计时
  void _startCountDown() {
    _countTimer = Timer.periodic(
      Duration(seconds: 1), //刷新频率
      (timer) {
        setState(() {
          if (_countDown < 1) {
            Navigator.pushNamed(context, "HomePage");
            _countTimer.cancel();
            _countTimer = null;
          } else {
            _countDown -= 1; //计数器减1
          }
        });
      },
    );
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _countTimer.cancel();
    _countDown = 0;
  }
}

这个页面的实现过程涉及到的组件有:Stack层叠组件、Positioned定位组件、RichText富文本组件、BoxDecoration装饰器