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 提前加载图片。避免图片首次加载的闪烁问题。

相关推荐
好的佩奇11 小时前
Dart 之类型系统
flutter·dart
恋猫de小郭18 小时前
Dart 3.15 新特性:this 终于支持类型提升了
android·前端·flutter
FungLeo2 天前
成为全栈·Flutter App 篇·主题与可访问性:深浅色、大字号和触控体验
flutter·移动开发·深色模式·可访问性·成为全栈·大字号适配
用户95421573334852 天前
只是选个照片,怎么留下了这么多访问记录?Flutter 图片选择器排查与优化实录
flutter
FungLeo3 天前
成为全栈·Flutter App 篇·第四批复盘:复用了什么,移动端又新增了什么
flutter·移动开发·跨端开发·成为全栈·api契约·全栈复盘
jason.zeng@15022073 天前
使用vscode+flutter开发android程序(入门)
android·vscode·flutter
jason.zeng@15022073 天前
Flutter 项目标准分层目录(repository/dto/page,对齐后端思想)
flutter
程序员老刘4 天前
跨平台开发地图 | 2026年10月
flutter·ai编程·客户端
林瞅瞅4 天前
Flutter 开发环境从零搭建与调试记录
flutter
FungLeo5 天前
成为全栈·Flutter App 篇·Markdown 编辑器:编辑、预览与离开保护
flutter·移动开发·markdown编辑器·表单设计·成为全栈·草稿保存