跳到主內容

為你的 Android 應用新增啟動畫面

瞭解如何為你的 Android 應用新增啟動畫面。

A graphic outlining the launch flow of an app including a splash screen

概述

#

啟動畫面(也稱為啟動螢幕)在你的 Android 應用載入時提供一個簡單的初始體驗。它為你的應用程式奠定基礎,同時允許應用引擎載入並初始化你的應用程式。

你有幾種選擇來實現啟動畫面

  1. 你可以使用 pub.dev 上提供的其中一個包。

  2. 你可以手動實現它,如 啟動畫面示例應用 所示。本頁的其餘部分假定手動方法。

應用初始化

#

每個 Android 應用都需要初始化時間,而作業系統會設定應用的程序。Android 提供了 啟動螢幕 的概念,以便在應用初始化時顯示一個 Drawable

Drawable 是一個 Android 圖形。要了解如何在 Android Studio 中將 Drawable 新增到你的 Flutter 專案中,請檢視 Android 開發者文件中的 將可繪製物件匯入到你的專案中[]。

預設的 Flutter 專案模板包含啟動主題和啟動背景的定義。你可以透過編輯 styles.xml 來自定義它,你可以在其中定義一個主題,其 windowBackground 設定為應顯示為啟動螢幕的 Drawable

xml
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <item name="android:windowBackground">@drawable/launch_background</item>
</style>

此外,styles.xml 定義了一個普通主題,用於在啟動畫面消失後應用於 FlutterActivity。普通主題背景僅在啟動畫面消失後、方向更改和 Activity 恢復期間顯示很短的時間。因此,建議普通主題使用與 Flutter UI 的主要背景顏色相似的純色背景。

xml
<style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <item name="android:windowBackground">@drawable/normal_background</item>
</style>

在 AndroidManifest.xml 中設定 FlutterActivity

#

AndroidManifest.xml 中,將 FlutterActivitytheme 設定為啟動主題。然後,向所需的 FlutterActivity 新增一個元資料元素,以指示 Flutter 在適當的時候從啟動主題切換到普通主題。

xml
<activity
    android:name=".MyActivity"
    android:theme="@style/LaunchTheme"
    // ...
    >
    <meta-data
        android:name="io.flutter.embedding.android.NormalTheme"
        android:resource="@style/NormalTheme"
        />
    <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
    </intent-filter>
</activity>

現在,Android 應用將在應用初始化時顯示所需的啟動畫面。

SplashScreen API

#

Android 12 引入了 SplashScreen API。在你的 styles.xml 檔案中使用 SplashScreen API。例如

xml
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <item name="android:windowSplashScreenBackground">@color/bgColor</item>
    <item name="android:windowSplashScreenAnimatedIcon">@drawable/launch_background</item>
</style>

有些應用可能希望繼續在 Flutter 中顯示 Android 啟動畫面的最後一幀。例如,這保留了單幀的錯覺,而額外的載入在 Dart 中繼續進行。要實現這一點,以下 Android API 可能有所幫助

MainActivity.kt
kotlin
import android.os.Build
import android.os.Bundle
import androidx.core.view.WindowCompat
import io.flutter.embedding.android.FlutterActivity

class MainActivity : FlutterActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    // Aligns the Flutter view vertically with the window.
    WindowCompat.setDecorFitsSystemWindows(getWindow(), false)

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
      // Disable the Android splash screen fade out animation to avoid
      // a flicker before the similar frame is drawn in Flutter.
      splashScreen.setOnExitAnimationListener { splashScreenView -> splashScreenView.remove() }
    }

    super.onCreate(savedInstanceState)
  }
}
MainActivity.java
java
import android.os.Build;
import android.os.Bundle;
import android.window.SplashScreenView;
import androidx.core.view.WindowCompat;
import io.flutter.embedding.android.FlutterActivity;

public class MainActivity extends FlutterActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // Aligns the Flutter view vertically with the window.
        WindowCompat.setDecorFitsSystemWindows(getWindow(), false);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
            // Disable the Android splash screen fade out animation to avoid
            // a flicker before the similar frame is drawn in Flutter.
            getSplashScreen()
                .setOnExitAnimationListener(
                    (SplashScreenView splashScreenView) -> {
                        splashScreenView.remove();
                    });
        }

        super.onCreate(savedInstanceState);
    }
}

然後,你可以在 Flutter 中重新實現第一幀,該幀顯示 Android 啟動畫面上的元素在螢幕上的相同位置。有關示例,請檢視 啟動畫面示例應用