文章目录

• 一、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 )的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。