Flutter实现App倒数启动页

前期准备

将Android和ios的启动页设置都关闭掉

提示说明

页面启动先从服务端api取得json数据再开始倒计时，部分路由和toast弹框代码请替换为自己编写的代码，不提供完整代码。网络请求库推荐使用dio。

JSON样例

{
	"data": {
		"pic": "你的图片url",
		"aid": "广告专题id,用于点击查库打开文章",
		"time": "倒计时时间，单位s"
	}
}

快速了解事件总线代码

import 'package:event_bus/event_bus.dart';  //导入总线依赖
...
EventBus eventBus = new EventBus(); //创建事件总线
...
//定义你的事件
class MyEvent {
  String text;
	//构造函数
  MyEvent(this.text);
}
...
//开始监听MyEvent类型的事件
eventBus.on().listen((MyEvent data) {
	//监听到新事件后，你的操作
}
...
eventBus.fire(MyEvent(time.toString()));  //往消息总线推入一个MyEvent类型的事件
...
eventBus.destroy(); //销毁总线，销毁页面前请先销毁总线

事件总线也适合用于用户登录/注销等全局状态变化事件，如：用户退出后，发送事件，提醒其他需要用户登录才能操作的页面局部刷新变回用户尚未登录的形态。

页面代码

import 'dart:async';
import 'dart:convert';
import 'dart:io' as H;

import 'package:event_bus/event_bus.dart';
import 'package:flutter/material.dart';
import 'package:mall/api/api.dart';
import 'package:mall/utils/navigator_util.dart';
//主页面与右上角跳过按钮通过事件总线传输数据，右上角组件订阅消息更新倒计时秒数
EventBus eventBus = new EventBus();

class MyEvent {
  String text;

  MyEvent(this.text);
}

class SplashView extends StatefulWidget {
  @override
  _SplashViewState createState() => _SplashViewState();
}

class _SplashViewState extends State {
  Timer _timer;
  Map result;
  String url;
  int aid = 264;
  int time = 0;
  int count = 0;
  var period = const Duration(seconds: 1);
  GlobalKey textKey = GlobalKey();

  @override
  void initState() {
    super.initState();
  }

  Future getData() async {
    if (time == 0) {
    //这里写得不好，推荐使用dio库
      var h = H.HttpClient();
      var request =
          await h.getUrl(Uri.parse(Api.DOMAIN + "/index/mall/startUpInfo"));
      var response = await request.close();
      var data = await Utf8Decoder().bind(response).join();
      result = json.decode(data);
      url = result['data']['pic']['key_value'];
      aid = int.parse(result['data']['aid']['key_value']);
      time = int.parse(result['data']['time']['key_value']);
    }
  }

  @override
  void dispose() {
    super.dispose();
    Navigator.pop(context);
    eventBus.destroy();
  }

  //启动页面的build函数
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return FutureBuilder(
        future: getData(),
        builder: (BuildContext context, AsyncSnapshot asyncSnapshot) {
          switch (asyncSnapshot.connectionState) {
            case ConnectionState.none:
            case ConnectionState.waiting:
              return Scaffold(
                body: Container(
                  color: Colors.deepOrangeAccent,
                  child: Text(''),
                ),
              );
            default:
              if (asyncSnapshot.hasError)
                return Container(
                  child: Center(
                    child: Text(
                      "",
                      style: TextStyle(fontSize: 16.0),
                    ),
                  ),
                );
              else
                try {
                	//定时器，period为周期
                  _timer = Timer.periodic(period, (timer) {
                    eventBus.fire(MyEvent(time.toString()));
                    time--;
                    if (time <= 0) {
                      //取消定时器，销毁事件总线对象
                      eventBus.destroy();
                      timer.cancel();
                      timer = null;
                      Navigator.pop(context);  //请替换为自己的路由跳转代码
                      NavigatorUtils.goMallMainPage(context);
                    }
                  });
                } catch (e) {
                  eventBus.destroy();
                }
              return Scaffold(
                body: Container(
                  color: Colors.deepOrangeAccent,
                  child: InkWell(
                      onTap: () {
                        eventBus.destroy();
                        Navigator.pop(context); //请替换为自己的路由跳转代码
                        NavigatorUtils.goMallMainPage(context);
                        NavigatorUtils.goProjectSelectionDetail(
                            context, aid, false);
                        _timer.cancel();
                      },
                      child: Stack(
                        children: [
                          Image.network(
                            url,
                            width: double.infinity,
                            height: double.infinity,
                            fit: BoxFit.fill,
                          ),
                          Positioned(
                            top: 30,
                            left: size.width - 100,
                            child: FlatButton(
                                onPressed: () {
                                  _timer.cancel();
                                  eventBus.destroy();
                                  Navigator.pop(context); //请替换为自己的路由跳转代码
                                  NavigatorUtils.goMallMainPage(context);
                                },
                                child: TextWidget()),
                          )
                        ],
                      )),
                ),
              );
          }
        });
  }
}
//右上角倒计时按钮
class TextWidget extends StatefulWidget {
  int count;

  TextWidget({Key key, this.count}) : super(key: key);

  @override
  State createState() {
    return TextWidgetState();
  }
}

class TextWidgetState extends State {
  String str_sub = '';

  void initState() {
    super.initState();
    //监听MyEvent事件
    eventBus.on().listen((MyEvent data) {
      if (str_sub != data.text) {
        setState(() {
          str_sub = data.text;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        "${str_sub} 跳过",
        style: TextStyle(fontSize: 15, color: Colors.deepOrange),
      ),
    );
  }
}

效果图(支持gif)