教你快速為 Flutter 設置 Flavor、App Icon 和 Launcher splash — Part 3: flutter_native_splash

Yii Chen

Follow

Published in

Flutter Formosa

6 min readApr 7, 2023

--

設定啟動畫面會很麻煩嗎？

這是教學文章的第三篇。在本文中，透過 flutter_native_splash 套件產生啟動畫面所需的圖檔，並針對 Android 12 進行進階設定，一樣使用自動化生成，協助我們完成任務。如果想查看本系列的其他文章，可以點擊下方提供的連結：

flutter_native_splash

flutter_native_splash | Flutter Package

When your app is opened, there is a brief time while the native app loads Flutter. By default, during this time, the…

pub.dev

針對 Splash 套件可以進行很多細部設定，這邊以最簡單快速的方式設定初始啟動圖片

安裝

dependencies:
  flutter_native_splash: <latest-version>

配置

在根目錄新增一個 flutter_native_splash.yaml 檔案，這邊讓每個環境的初始心面都相同，所以沒有做切分

在官方教學裡有給予 Android 12 需要的圖片尺寸，分別是啟動畫面的 Logo 圖檔是否有底色，都有告知我們需要哪種對應的大小，例如：如果是Logo配透明底色，圖檔的尺寸為 960 * 960，Logo也需要在圖中的範圍內，不能過大

以下是我提供的範例圖檔

Example: Android Logo and Wonderous App Logo

如果需要依照 flavor 環境設定個別的啟動畫面，可以在根目錄新增個別檔案

flutter_native_splash-dev.yaml
flutter_native_splash-prod.yaml

生成設定代碼

// 針對預設 splash 設定檔生成
flutter pub run flutter_native_splash:create

// 針對指定環境生成
flutter pub run flutter_native_splash:create --flavor dev

Android 目錄生成的檔案，在 res 資源目錄裡面，為每個尺寸都創建一個圖檔，所以會有很多 drawable 目錄

iOS 目錄生成的 LaunchImage 圖檔

實際開發

可決定 Splash 啟動畫面的顯示時間。通常當 Flutter 繪製第一幀後，啟動畫面就會消失。但可以使用 preserve() 和 remove() 控制顯示的時長，保持螢幕上的啟動畫面。我們開發時都會在 main() 進行物件和服務的初始化，這時候就可以保持狀態，等待完成後再讓啟動畫面消失。