文章目錄

• 一、Flutter 啟動白屏問題
• 二、在 launch_background.xml 中設置啟動過渡 UI
• 三、博客源碼

一、Flutter 啟動白屏問題

---

啟動 Flutter 應用 , 在 Launcher 主界面中 , 點擊 Flutter 應用圖標 , 之后出現白屏 1 ~ 5 秒 , 才能顯示 Flutter 界面 ;

手機性能越高 , 白屏時間越短 ;

上述啟動白屏問題 , 是 Flutter 框架自身的問題 , 不論是 Android 還是 iOS , 都會有上述問題 ;

Flutter 應用啟動時 , 會先初始化 Flutter SDK , 然后將 Flutter 代碼和資源加載到內存中 , 在內存中進行圖像渲染 ;

從 Flutter 啟動 , 到 渲染完畢 , 這個過程之間 , 沒有任何內容顯示 , 因此會出現白屏 ;

解決上述問題 , 與 Android 啟動優化類似 , 給其加載一個默認背景界面 , 讓 Flutter 應用在白屏的這幾秒 , 顯示一個圖片 ;

直接參考 Android 啟動優化方案 【Android 性能優化】應用啟動優化 ( 主題背景圖片設置 | 設置透明主題背景 | 設置應用啟動主題背景、啟動后恢復主題 ) ;

二、在 launch_background.xml 中設置啟動過渡 UI

---

目前 Flutter 解決上述問題 , 已經比較完善 , 不需要做過多的設置 ;

打開 Flutter 工程下的 Android 工程的 , 可以看到如下注釋 :

<!-- Specifies an Android theme to apply to this Activity as soon asthe Android process has started. This theme is visible to the userwhile the Flutter UI initializes. After that, this theme continuesto determine the Window background behind the Flutter UI. --><meta-dataandroid:name="io.flutter.embedding.android.NormalTheme"android:resource="@style/NormalTheme"/><!-- Displays an Android View that continues showing the launch screenDrawable until Flutter paints its first frame, then this splashscreen fades out. A splash screen is useful to avoid any visualgap between the end of Android's launch screen and the painting ofFlutter's first frame. --><meta-dataandroid:name="io.flutter.embedding.android.SplashScreenDrawable"android:resource="@drawable/launch_background"/>

配置的 io.flutter.embedding.android.SplashScreenDrawable 參數 , 就是在 Android 啟動過后到 Flutter 渲染之前 , 顯示的 Android 視圖 , 該視圖會慢慢淡出 ;

將 launch_background.xml 設置為如下配置 , 打開 第二個 item 注釋 , 然后配置一個圖片 ;

<?xml version="1.0" encoding="utf-8"?> <!-- Modify this file to customize your launch splash screen --> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@android:color/white" /><!-- You can insert your own image assets here --><item><bitmapandroid:gravity="center"android:src="@mipmap/ic_launcher" /></item> </layer-list>

注意 , 有 $2$ 個 launch_background.xml 配置文件 , 都需要修改 , 不要漏掉 ;

Flutter 的啟動變成下面的樣式 : 在 Flutter 渲染完成之前 , 顯示一張圖像 ; 這里也可以顯示動畫 ;

三、博客源碼

---

GitHub : https://github.com/han1202012/flutter_startup

總結

以上是生活随笔為你收集整理的【Flutter】Flutter 启动白屏问题 ( 问题描述 | 在 launch_background.xml 中设置启动过渡 UI )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。