Flutter-现有iOS工程引入Flutter

作者:王小树

链接:https://juejin.im/post/5bda622f6fb9a022523c4da8

前言

Flutter 是一个很有潜力的框架,但是目前使用Flutter的APP并不算很多,相关资料并不丰富,介绍现有工程引入Flutter的相关文章也比较少。项目从零开始,引入Flutter操作比较简单,但是现有工程引入Flutter 需要费很多精力和时间,这里是我在完成现有iOS工程引入Flutter后写的一次总结文章。

Flutter 环境搭建

首先是要搭建Flutter环境,之前也写了一篇相关文章搭建Flutter-iOS开发环境https://juejin.im/post/5bda6202e51d456864354d03,可以参考一下

可以去官网查看:https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps比较简单,这里不做赘述。

现有iOS工程引入Flutter

一、建立Flutter module

首先建立flutter module,主要是用于获取改flutter app中的Generated.xcconfig和framework

也可以用

建立flutter app,flutter app中也有Generated.xcconfig和framework

二、新建配置文件

根据官网,需要在工程中建立三个配置文件:

Flutter.xcconfig 、Debug.xcconfig、Release.xcconfig

在XCode工程对应目录,右击,选择新建文件(New File),选中创建xcconfig文件,如图:

在Flutter.xcconfig中填写:

在 Debug.xcconfig中填写:

在 Release.xcconfig中填写:

如果工程中用cocoapods管理,需要在 Debug.xcconfig和Release.xcconfig添加pod的路径:

例如 Release.xcconfig中

在准备好这些xcconfig文件后,需要到XCode工程PROJECT(注意是PROJECT,不是Target)中的Configuration选项里,将对应的target选择成前面的xcconfig文件,Debug用Debug.xcconfig, Release用 Release.xcconfig

注意:进行Archive打包的时候,无论是Debug包还是Release包,需要切换到Release.xcconfig,不然会报错。

三、为编译Dart引入相关build phase

在工程的Build Phase中新建一个Run Script,用于编译时运行脚本,

建立方法如图:

建立Run Script后,需要移动其对应的位置,需要在Target dependencies之后,如果用cocoapods管理工程需要在,Check Pods Manifest.lock之后:

在脚本框中,填入以下代码,用于引进Flutter中的xcode_backend脚本:

如图:

四、生成和添加Framework

完成前面的配置后,便可以在XCode对工程进行编译build (Command+B),在提示“ Build Success ” 后,在iOS工程文件夹中会生成一个Flutter文件夹,将其加入工程目录中,建议和刚才xcconfig所在目录并列,

右键项目目录 ,选择 Add Files to 'xxx' ,Options选Create groups,添加编译生成的Flutter文件夹。需要注意但是:Flutter目录下有个flutter_assets文件,不能使用Create groups的方式添加,只能用Creat folder references的Options, 否则Flutter页面会空白渲染不出来。可以删了flutter_assets在用Creat folder references重新添加。

在添加完Flutter 文件夹之后,去Embeded Binaries中添加App.framework和Flutter.framework

五、AppDelegate改造

Flutter需要和APP进行交互,需要对AppDelegate 进行改造:

AppDelegate.h文件中:

AppDelegate.m 文件中:

六、新建FlutterViewController

主要配置基本上已经完成,只要在main.dart实现Flutter的业务代码即可

在原有工程中 ,建立FlutterViewController来承载main.dart实现的Flutter页面,如:

后语

到这里现有iOS工程引入Flutter的工作就完成了,一些细节上的修改需要根据场景进行修改,例如Flutter和Native的数据通信等。

●编号328,输入编号直达本文

●输入m获取文章目录

推荐↓↓↓

Web开发

更多推荐《25个技术类微信公众号》

涵盖:程序人生、算法与数据结构、黑客技术与网络安全、大数据技术、前端开发、Java、Python、Web开发、安卓开发、iOS开发、C/C++、.NET、Linux、数据库、运维等。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181113B0Q2GM00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券