ios启动页与flutter启动页无缝衔接,无闪烁和黑屏解决

1、首先需要配置原生的 LaunchScreen 如下图:

注意:LaunchScreen中View的SafeArea 一定要有。如果这里没有SafeArea就会出现flutter渲染第一帧和native衔接时出现闪烁的现象。splash.png也尽量放在根目录中,不要放在Assets中。

2、flutter启动页配置

flutter 中可以考虑使用stack 或者overlay遮罩层来显示启动页,这样可以在加载首页页面和数据的同时显示启动页。设置好启动页的时长,最后显示首页。当然其他方式或者chatGPT给的方式也是可行的要自己斟酌。

这里配置主要是splash.png要跟native端中LaunchScreen中的splash.png是一样的图。这样显示出来的效果很好。

代码中也可以使用 precacheImage 提前加载图片。避免图片首次加载的闪烁问题。

相关推荐
FungLeo5 小时前
Flutter fl_chart 0.70 破坏性 API 迁移实录:duration/getTooltipColor/withValues 全解
flutter·fl_chart
FungLeo11 小时前
Flutter 吸顶分组列表实战:语义桶分组 + 点击头平滑滚动
android·flutter
FungLeo12 小时前
Flutter 超长 StatefulWidget 拆分术:part of + extension on State 实战
android·flutter·dart
GitLqr14 小时前
Impeller 时代:Shader Jank 消失了,但渲染性能的战场也变了
flutter·面试·性能优化
恋猫de小郭16 小时前
Flutter 的另外一种形态?社区 DartNative 要来了。
android·前端·flutter
阿里云云原生1 天前
还原一次用户等待:深度解析 Flutter RUM SDK 如何打通 Dart 到 Native 的观测链路
flutter
_阿南_1 天前
flutter 展示的字体突然奔放了
android·flutter·ios
GitLqr2 天前
玩转 Dart typedef:不仅是函数别名那么简单
flutter·面试·dart
FungLeo2 天前
Flutter 两个反直觉布局坑:ListTile 水波纹 / VerticalDivider 踩坑实录
android·flutter
年小个大2 天前
受 go-zero 启发,我给 Flutter 写了一套 CLI 脚手架
android·flutter·架构