Flutter学习笔记六(写一个应用启动页)

• 在我们开发应用的时候都会写一个启动页来过渡会在里面初始化一些东西比如加载广告图片之类的，下面我将介绍如何用flutter制作一个启动页面并在3秒后自动跳转到主页。
• 因为比较简单我直贴代码了

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

class Splash extends StatefulWidget {
  @override
  _SplashState createState() => _SplashState();
}

class _SplashState extends State<Splash>{

  @override
  Widget build(BuildContext context) {
    return new Material(
      child: new Scaffold(
        body: new Stack(
          children: <Widget>[
            new Container(
              child: new Image.asset(
                "images/launch.png",
                fit: BoxFit.fill,
              ),
            ),
            new Container(
              alignment: Alignment.topRight,
              padding: const EdgeInsets.fromLTRB(0.0, 45.0, 10.0, 0.0),
              child: OutlineButton(
                child: new Text(
                  "跳过",
                  textAlign: TextAlign.center,
                  style: new TextStyle(color: Colors.white),
                ),
                // StadiumBorder椭圆的形状
                shape: new StadiumBorder(),
                onPressed: () {
                  go2HomePage();
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

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

  // 倒计时
  void countDown() {
    var _duration = new Duration(seconds: 3);
    new Future.delayed(_duration, go2HomePage);
  }
  void go2HomePage() {
    Navigator.pushReplacementNamed(context, '/HomePage');
  }
}

• 如上面所示我们创造了一个Splash类，并在build方法里面写好了我们的布局，countDown()方法是一个延迟执行的方法，设定在3秒后启动go2HomePage(),这是一个首页的跳转，我在右上角添加了一个按钮用于点击跳转，如此一个简单的启动页我们就做好了，自己多动手吧！

  
  image