Flutter-------寫一個app啓動頁

在開發app應用的時候一般都會寫一個啓動頁來過渡會在裏面初始化一些東西比如加載廣告圖片之類的。

那麼如何用flutter製作一個啓動頁面並在3秒後自動跳轉到主頁呢？

首先創造一個Splash類，在build方法裏面寫好頁面佈局，然後寫一個countDown()方法用來延遲，設定在3秒後啓動newHomePage()，在右上角添加一個按鈕用於點擊跳轉，onPressed進行首頁的跳轉。

一個簡單的啓動頁就做好了。

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: () {
                  newHomePage();
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

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

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