Flutter 闪屏页实现

导入图片

在lib同级目录新建images目录，放入闪屏图片。

image.png

更新配置文件

打开pubspec.yaml文件，添加如下asstes:

assets:
-images/splash.png

main.dart做一个逻辑，直接启动闪屏页，并且提供一个跳转到主页的路由。创建两个页面分别为闪屏及主页面

import 'package:flutter/material.dart';
import 'index/index.dart';
import 'index/splash.dart';

/**
 * 程序主入口
 */
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: ThemeData.light(),
      home: new SplashPage(), // 闪屏页
      routes: <String, WidgetBuilder>{ // 路由
        '/index': (BuildContext context) => Index()
      },
    );
  }
}

这里使用了MaterialApp控件，home为默认打开的页面，routes为配置的路由。

编写SplashPage.dart

创建一个StatefulWidget控件，当控件initState以后开始倒计时，倒计时结束后进入HomePage。异步倒计时使用Dart的Future处理。

import 'package:bigtoe/utils/imgae_utils.dart';
import 'package:flutter/material.dart';

import 'index.dart';

/**
 * Created with IntelliJ IDEA.
 * Package: index
 * Author: sirai
 * Create Time: 2019-06-22 09:49
 * QQ: 785716471
 * Email: 785716471@qq.com
 * Description:闪屏
 */

class SplashPage extends StatefulWidget {
  @override
  _SplashPageState createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  @override
  void initState() {
    super.initState();
    countDown();
  }
  @override
  Widget build(BuildContext context) {
    return  Image.asset(
      ImageUtils.getImgPath('splash'),
      width: double.infinity,
      fit: BoxFit.fill,
      height: double.infinity,
    );
  }


  /**
   * 倒计时
   */
  void countDown() {
    var _duration = Duration(seconds: 3);
    new Future.delayed(_duration, goHomePage);
  }

  /**
   * 页面跳转
   */
  void goHomePage() {
    Navigator.of(context).pushReplacementNamed('/index');
  }


}

随便写一个index.dart

主页中间显示文字

class Index extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.white),
      child: new Center(
        child: Text(
          '消息',
          textDirection: TextDirection.ltr,
          style: TextStyle(fontSize: 30, color: Colors.black),
        ),
      ),);
  }
}

参考文章 https://blog.csdn.net/qq_15602635/article/details/80677526

最后编辑于：2019.06.22 10:52:29