嚮應用新增閃屏頁

Add Splash Screen Header

閃屏頁(也稱為啟動頁)是你的應用在啟動時給使用者的第一印象。它們就像是你的應用的基礎,同時允許你在它展示的時間裡,載入你的引擎和初始化你的應用。本指南將展示如何在 Flutter 編寫的移動應用中恰當地使用閃屏頁。

iOS 啟動頁

所有應用在交付到 Apple 應用商店之前 必須使用 Xcode storyboard 以提供應用啟動頁面。

預設的 Flutter 範本包括一個名為 LaunchScreen.storyboard 的 Xcode storyboard,可以根據您的選擇進行客製你自己的資源。預設情況下,storyboard 將顯示空白影象,但你可以修改它。在專案根目錄下執行 open ios/Runner.xcworkspace 開啟 Flutter 應用程式的 Xcode 專案。然後從專案導航器中選擇 Runner/Assets.xcassets,並將所需影象拖拽至 LaunchImage 影象集中。

Apple 在 人機介面指南 部分中為釋出啟動頁提供了詳細的指南。

Android 啟動頁

在 Android 中,你有兩個可以分開控制的頁面:在 Android 應用初始化時的 啟動頁,以及在 Flutter 初始化時的 閃屏頁

應用初始化

所有 Android 應用在作業系統準備應用處理序時都需要一定的初始化時間。因此 Android 提供了 啟動介面 的概念,在應用初始化的時候顯示 Drawable

預設的 Flutter 專案範本定義了啟動主題和啟動背景。你可以在 styles.xml 中自訂一個主題,將一個 Drawable 配置給該主題的 windowBackground,它將作為啟動頁被展示。

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

定義一個普通主題

此外,在 styles.xml 中定義一個 普通主題,當啟動頁消失後,它會應用在 FlutterActivity 上。普通主題的背景僅僅展示非常短暫的時間,例如,當啟動頁消失後、裝置方向改變或者 Activity 恢復期間。因此建議普通主題的背景顏色使用與 Flutter UI 主要背景顏色相似的純色。

<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 在適當的時機從啟動主題切換到普通主題。

<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 應用程式就會在在初始化時展示對應的啟動頁面。

Android S

請先檢視 Android 閃屏頁面 瞭解如何在 Android S 上配置閃屏頁。

從 Android S 開始,你必須在你的 styles.xml 檔案中使用新的閃屏 API 了。你需要考慮為 Android 12 和更高版本建立一個備用的資原始檔,還要確保你的背景圖片符合圖示指南。檢視文件 Android 閃屏頁面 瞭解更多。

<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>

確保 io.flutter.embedding.android.SplashScreenDrawable 未在 manifest 中設定,且 provideSplashScreen 也沒有具體實現,這些 API 已被廢棄。如此一來 Android 的閃屏頁可以在應用啟動時平滑過渡到 Flutter。

某些應用可能希望在 Flutter 中繼續顯示 Android 閃屏頁的最後一幀。例如,保持一幀的展示,同時 Dart 繼續載入其他內容。想達到這樣的效果,以下 API 可能有幫助:

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);
    }
}
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)
  }
}

然後你可以重新實現 Flutter 的第一幀,將元素擺放在與 Android 閃屏頁相同的位置。關於這個的範例,請參考 Android 閃屏頁範例應用