Skip to content

[Flutter] 使用 flutter_native_splash 製作啟動畫面（splash screen）

Last Updated on 2021-03-25 by Clay

不知道大家在開發 App 時，有沒有很羨慕別人在 App 啟動時，都會有著漂亮的啟動畫面？實際上，那是被稱為 splash screen（開機畫面）的一個特定的畫面。

在 Flutter 中，我們可以分別設定 Android 或是 iOS 兩種平台的 splash screen，不過方法比較複雜。若是想要簡單地設定好 splash screen、甚至只需要短短幾行就設定好，那麼推薦使用 flutter_native_splash 這個套件。

以下我簡單紀錄如何使用這個套件。

如何使用 flutter_native_splash 套件

在開始之前，我得先說明：splash screen 是有著兩個階段的。

  • 第一階段的 splash screen 是直到 Flutter 引擎/框架本身完全載入為止
  • 第二階段的 splash screen 是直到 Flutter 引擎/框架將初始頁面的素材載入完成為止

所以這個套件的設定，也分成了這兩個階段。下面就一步步執行看看吧。


Step 1: 取得套件

在 Flutter 專案中的 pubspec.yaml 文件中添加以下套件。

dev_dependencies:
  flutter_native_splash: ^1.1.5+1


在將來，你所使用的版本號可能與我不同，請至 pub.dev 套件頁面確認。


Step 2: 設定 splash screen

將以下內容添加在 pubspec.yaml 文件中，或是新增一個名為 flutter_native_splash.yaml 的文件在專案根目錄中。

當然，你會看到 pubspec.yaml 和 flutter_native_splash.yaml 在同樣的目錄中。

flutter_native_splash:
  color: "#333333"


這裡可以選擇你喜歡的顏色。

接著打開終端機。若是使用 IDE，也可以參考下方圖片的位置開啟 IDE 內建的終端機。

執行以下指令：

flutter pub run flutter_native_splash:create


Output:

run flutter_native_splash:create
[Android] Updating android/app/src/main/res/drawable/launch_background.xml with splash image path
[Android] Updating android/app/src/main/res/drawable-v21/launch_background.xml with splash image path
[Android] Updating styles.xml with full screen mode setting
[Android] No styles.xml file found in your Android project
[Android] Creating styles.xml file and adding it to your Android project
[Android] Updating styles.xml with full screen mode setting
[iOS] Updating LaunchScreen.storyboard with width, and height
[iOS] Updating ios/Runner/Info.plist for status bar hidden/visible
[Web] web/index.html not found.  Skipping Web.

Native splash complete. 👍
Now go finish building something awesome! 💪 You rock! 🤘🤩

看到這個畫面，即代表第一階段的 splash screen 設定完成。


Step 3: 設定 secondary splash screen

接著是第二階段，這裡需要使用程式設定。這裡的 Demo 我使用了內建的 Icon，實務上或許需要使用 App 產品相關的圖片才好。

import 'package:flutter/material.dart';

// Main
void main() => runApp(MyApp());

// MyApp
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: Future.delayed(Duration(seconds: 3)),
      builder: (context, AsyncSnapshot snapshot) {
        // Loading
        if (snapshot.connectionState == ConnectionState.waiting) {
          return MaterialApp(
            home: SplashPage(),
          );
        }
        
        // Main
        else {
          return MaterialApp(
            home: HomePage(),
          );
        }
      },
    );
  }
}

// SplashPage
class SplashPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF333333),
      body: Center(
        child: Icon(
          Icons.pets,
          size: MediaQuery.of(context).size.width * 0.7,
        ),
      ),
    );
  }
}


// HomePage
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 100,
          width: 100,
          color: Colors.grey[400],
          child: Text(
            "This is HomePage!",
          ),
        ),
      ),
    );
  }
}


Output:

這樣一來，我們就設定好了 App 啟動時的畫面了。

References

Read More

Tags:

Leave a Reply