Flutter Android端啟動(dòng)白屏

問(wèn)題描述

Flutter 應(yīng)用在 Android 端上啟動(dòng)時(shí)會(huì)有一段很明顯的白屏現(xiàn)象,白屏的時(shí)長(zhǎng)由設(shè)備的性能決定,設(shè)備性能越差,白屏?xí)r間越長(zhǎng)。

問(wèn)題分析

其實(shí)啟動(dòng)白屏的問(wèn)題在Android原生應(yīng)用上也是一個(gè)常見(jiàn)問(wèn)題,大致是因?yàn)閺挠脩酎c(diǎn)擊 Launcher Icon 到應(yīng)用首頁(yè)顯示之間,Android 系統(tǒng)在完成應(yīng)用的初始化工作,其流程如下:

在 Flutter Android 端上,白屏的問(wèn)題會(huì)更加嚴(yán)重,因?yàn)槌?Android 應(yīng)用啟動(dòng)耗時(shí)外,還增加了 Flutter 初始化耗時(shí)。

直到 Flutter 渲染出第一幀內(nèi)容,用戶才能感知到App啟動(dòng)完成。

解決方案

解決方案很簡(jiǎn)單,Android原生的白屏問(wèn)題可以通過(guò)為 Launcher Activity 設(shè)置 windowBackground 解決,而 Flutter 也是基于此辦法,同時(shí)優(yōu)化了 Flutter 初始化階段的白屏問(wèn)題(覆蓋一個(gè)launchView),只用兩步設(shè)置便能解決 Flutter 中白屏問(wèn)題。

  1. 在項(xiàng)目的 android/app/src/main/res/mipmap-xhdpi/ 目錄下添加閃屏圖片;
  2. 打開(kāi) android/app/src/main/res/drawable/launch_background.xml 文件,這個(gè)文件就是閃屏的背景文件,具體如何設(shè)置可以查閱 Android Drawable,我在 demo 中的設(shè)置如下:
<?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>

效果對(duì)比如下:

白屏
白屏優(yōu)化
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容