iOS原生混编Flutter路由指南及解决Flutter首页闪白屏问题

最新推荐文章于 2025-05-27 18:19:13 发布

Jerry逸风

最新推荐文章于 2025-05-27 18:19:13 发布

阅读量2.1k

点赞数

分类专栏： iOS技术分享 Flutter技术分享文章标签： ios flutter swift

本文链接：https://blog.youkuaiyun.com/fanjiarong_919/article/details/126076328

版权

本文详细介绍了如何在iOS项目中接入Flutter，并实现FlutterBoost路由，同时针对启动时的闪白屏问题提出解决方案。通过在原生代码中注册Flutter引擎和路由，以及在Flutter端注册路由表，成功实现混合开发。对于闪白屏，作者提供了两种方案，包括使用原生VC作为背景和通过UIImage渲染背景色，有效改善用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

公司iOS项目自从20年从原生引入了Flutter以来，生产力来说不可谓提升不大，毕竟1个人就可以干两端，其他端的适配只需要简单的适配即可。从Flutter1.22.6开始一直适配到现在的2.10.5,期间大大小小产生的坑也不少。Flutter混编的路由方案我们采用的是阿里的flutter_boost方案，最近项目也是登录模块用Flutter进行了重构，和原先只在二级页面使用相比，应用冷启动就进入Flutter页面其实十分有挑战，毕竟引擎的启动要时间。这不，当你的启动图和登录界面使用了特殊的背景图就会有短暂的闪白屏的效果，如下，其实就是Flutter引擎还没渲染完毕的真空时间。如是就有了下面的解决方案。

iOS接入Flutter及解决首页闪白屏全过程

一、创建flutter module项目

我们通过xcode新建一个demo ios项目，然后在项目目录下创建flutter module项目

//创建flutter module项目
flutter create -t module flutter_module

//pubspec文件引入flutter_boost，我这里采用本地引入方式

flutter_boost:
    path: flutter_boost-3.0-null-safety-release.2.1

初始化ios项目 Pod


pod init

Podfile配置代码如下


flutter_application_path = './flutter_module'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target 'NaviteMixinFlutterDemo' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!
  install_all_flutter_pods(flutter_application_path)
  # Pods for NaviteMixinFlutterDemo

end

然后pod install。这样子我们的混编flutter项目就构建完成了