android和ios混合开发工具,Flutter与已有iOS工程混合开发与脚本配置

运行一个原生的Flutter工程(也就是纯Flutter)非常简便，不过现在Flutter属于试水阶段，要是想在商业app中使用Flutter，目前基本上是将Flutter的页面嵌入到目前先有的iOS或者安卓工程，目前讲混合开发的文章有很多：

不过这些文章大多讲的是安卓和flutter混合开发的，没有iOS和Flutter混合开发的比较详细的步骤实操，上周试了一下iOS和Flutter混合，有一些坑，总结给大家

1.目的

既然用Flutter混合开发，那肯定是希望写一套代码，安卓iOS都能无负担运行，所以在开发的时候，需要满足如下需求：

Flutter、iOS、安卓工程的目录在同一级，互相之前平级、无嵌套

开发iOS的时候，不用操心Flutter部分，只用xcode点击运行就可以(即修改编译iOS项目时，使用编译好的Flutter产物)

开发Flutter的时候，不用操心iOS部分，只用android studio点击运行就可以

支持模拟器和真机

混合开发最权威的指南当然是flutter自己的wiki，但是缺陷是iOS部分，自动运行脚本的内容不够详细，项目结构也不利于混合开发，本文以其为基础，又对目录结构和脚本做了一些修改，使其便于维护

2.项目搭建

2.1 文件目录搭建

HybridFlutter

|-iOS

|-Android

|-Flutter

|-build

2.2 iOS项目搭建

建立完了上图文件目录，添加iOS工程(安卓工程暂时忽略)

image

并且在第一页VC上增加一个Next按钮，集成好Flutter以后，点击Next可以进入Flutter页面

image

因为我们要推入flutter页面，所以需要有navigation controller：

image

目前Flutter混合开发还不支持bit code，所以在iOS工程里关闭

image

2.3 Flutter Module搭建

这里有一个坑，按照flutter官方文档，下载的flutter工具对应其beta分支，是不支持生成Flutter module的，而混合开发的wiki里说，需要建立这么个module，通过咨询大牛，需要切换到master分支，而flutter有个channel命令，可以切换工具分支:

image

如果你不在master分支，请执行flutter channel master

之后在Flutter目录下执行flutter create -t module flutter_module

image

这样就创建好了flutter module

目前为止的目录结构

2.4 添加胶水文件

混合开发最关键的是将两个项目衔接起来，所以需要一些配置

2.4.1 xcconfig文件

首先是xcode工程配置的衔接，打开ios工程，在xcode中点击File->New->File添加Configuration Settings File文件，命名为FlutterConfig.xcconfig，

image

注意添加的路径是HybridFlutter/Flutter/flutter_module

image

此时可能xcode会在ios工程里添加了一个FlutterConfig.xcconfig文件的引用，为了项目干净，可以删除这个引用(但是不要删除文件)

在FlutterConfig.xcconfig里添加

#include "./.ios/Flutter/Generated.xcconfig"

引用flutter_module下的ios插件里的Generated.xcconfig文件

上面是给flutter添加xcconfig文件，下载添加ios工程里的xccofig文件Debug.xcconfig，并引用FlutterConfig.xcconfig(如果iOS工程里已经有了xcconfig文件，那么直接在已有的xcconfig里添加)

image

添