Flutter Android端啓動白屏

問題描述

Flutter 應用在 Android 端上啓動時會有一段很明顯的白屏現象,白屏的時長由設備的性能決定,設備性能越差,白屏時間越長。php

問題分析

其實啓動白屏的問題在Android原生應用上也是一個常見問題,大體是由於從用戶點擊 Launcher Icon 到應用首頁顯示之間,Android 系統在完成應用的初始化工做,其流程以下: android

在 Flutter Android 端上,白屏的問題會更加嚴重,由於除了 Android 應用啓動耗時外,還增長了 Flutter 初始化耗時。
直到 Flutter 渲染出第一幀內容,用戶才能感知到App啓動完成。

解決方案

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

  1. 在項目的 android/app/src/main/res/mipmap-xhdpi/ 目錄下添加閃屏圖片;
  2. 打開 android/app/src/main/res/drawable/launch_background.xml 文件,這個文件就是閃屏的背景文件,具體如何設置能夠查閱 Android Drawable,我在 demo 中的設置以下:
<?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>
複製代碼

效果對比

啓動白屏 啓動白屏優化

Flutter練習項目

github.com/zh8637688/F…github

相關文章
相關標籤/搜索