当前位置: 首页 > 编程笔记 >

Flutter Android端启动白屏问题的解决

宁浩博
2023-03-14
本文向大家介绍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 中的设置如下:

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

效果对比如下:

白屏

白屏优化

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍Android Splash界面白屏、黑屏问题的解决方法,包括了Android Splash界面白屏、黑屏问题的解决方法的使用技巧和注意事项,需要的朋友参考一下 前言 我相信很多Android开发同学都遇到过这样的需求:  1.实现一个Splash界面,界面上有应用相关的背景图片和一个开始按钮.  2.点击按钮之后进入主页,以后用户再打开应用就不显示这个Splash界面了.  也相信

  • 我已经创建了一个初始屏幕,它一开始工作得很好,但之后,它会向我显示一个白色空白屏幕,而不是我的初始屏幕图像文件。我不知道为什么会发生这种情况。 我试图改变我的风格.xml父主题,但有些主题使我的应用程序崩溃,只有主题.AppCompat.Light.NoActionBar可以工作,并给我一个空白的白屏。 styles.xml 飞溅.java 屏幕序列、线程Hibernate时间和其他一切都正常工作

  • 我使用一个空活动为我的应用程序创建了一个启动屏幕,该活动在背景图像中保持可见3秒钟。通常,应用程序在背景图像变为可见之前以白色屏幕启动,然而,有些应用程序已经以“真实”的初始屏幕图像启动。如何实现这一点?

  • 问题内容: 众所周知,许多Android应用在首次聚焦之前都会非常短暂地显示白屏。在以下情况下会出现此问题: 扩展全局类并在其中执行主要初始化的Android应用。该 对象总是在第一个对象之前创建(这可以在调试器中观察到),因此这很有意义。这是我的案件延误的原因。 在初始屏幕之前显示默认预览窗口的Android应用。 设置显然在这里不起作用。我也无法将初始屏幕的父主题设置为此处所述,因为[不幸的是

  • 当我启动我的应用程序时,我会看到一个白色的屏幕,几秒钟后就会出现闪屏。 我想知道我的应用程序的大小是否会影响它(它是17.7MB)。或者是因为我的测试机是旧的(HTC欲望高清),有点垃圾与太多的数据? 还是正常行为?或者问题在我的代码里,在下面... 舱单的一部分: 飞溅活动: 谢谢

  • 问题背景 使用vue3+vite写了一个内置于一个app里面的小程序,打包上线后Android一切正常,ios打开后发现白屏,经排查后发现,iOS版本15.3.1能打开,17.1.1不能打开,17.1.2能打开但是加载不出来阿里巴巴矢量库引入的图标,但是他又没报错,目前个人觉得是ios版本兼容问题,但是又不太清楚,有高手看看? 尝试过使用@vitejs/plugin-legacy插件