1. 程式人生 > >Flutter Android端啟動白屏問題的解決

Flutter Android端啟動白屏問題的解決

Flutter 應用在 Android 端上啟動時會有一段很明顯的白屏現象,白屏的時長由裝置的效能決定,裝置效能越差,白屏時間越長。這篇文章主要介紹了Flutter Android端啟動白屏問題的解決。感興趣的小夥伴們可以參考一下

問題描述

Flutter 應用在 Android 端上啟動時會有一段很明顯的白屏現象,白屏的時長由裝置的效能決定,裝置效能越差,白屏時間越長。

問題分析

其實啟動白屏的問題在Android原生應用上也是一個常見問題,大致是因為從使用者點選 Launcher Icon 到應用首頁顯示之間,Android 系統在完成應用的初始化工作,其流程如下:

在 Flutter Android 端上,白屏的問題會更加嚴重,因為除了 Android 應用啟動耗時外,還增加了 Flutter 初始化耗時。

直到 Flutter 渲染出第一幀內容,使用者才能感知到App啟動完成。

解決方案

解決方案很簡單,Android原生的白屏問題可以通過為 Launcher Activity 設定 windowBackground 解決,而 Flutter 也是基於此辦法,同時優化了 Flutter 初始化階段的白屏問題(覆蓋一個launchView),只用兩步設定便能解決 Flutter 中白屏問題。

在專案的 android/app/src/main/res/mipmap-xhdpi/ 目錄下新增閃屏圖片;

開啟 android/app/src/main/res/drawable/launch_background.xml 檔案,這個檔案就是閃屏的背景檔案,具體如何設定可以查閱 Android Drawable,我在 demo 中的設定如下:

?

1

2

3

4

5

6

7

8

9

10

11

12

<?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/background_dark" />

 

  <!-- You can insert your own image assets here -->

  <item

    android:bottom="84dp">

    <bitmap

      android:src="@mipmap/launch_image" />

  </item>

</layer-list>

效果對比如下:

白屏