iOS通过cocoapods集成flutter

参考：

iOS和flutter交互

当某天我们的公司需要在原生项目的基础上集成flutter，那么这时候我们需要怎么办呢？

下面我给大家介绍通过cocoapods集成的方式，前提是安装了flutter的运行环境哦

iOS通过pod的方式接入Flutter项目

flutterxcconfig内容如下：

debugxcconfig内容如下：

releasexcconfig内容如下：

下面我说一说我在使用原生加flutter的混合开发中总结的经验

由于我们的电脑中安装了flutter的环境，所以断开了xcode之后，模拟器还可以从电脑上找到flutter的运行环境所以可以运行。

由于没有断开xcode开发工具，它运行在电脑端，会去在电脑上找到flutter的运行环境，所以可以运行

由于直接运行xcode打包在真机上的项目没有打包flutter的运行环境，所以不行

由于打包成ipa文件的时候已经打包了flutter的运行环境，所以可以跑

本文对比的是 UIWebView、WKWebView、flutter_webview_plugin（在iOS中使用的是WKWebView）的加载速度，内存使用情况。

测试网页打开的速度，只需要获取 WebView 在开始加载网页和网页加载完成时的时间戳，时间戳的差即为打开网页的时间

为了使差异更明显，我们选择较为复杂的 新浪首页 进行加载的对比，为了减小网络对加载速度的影响，我们让手机连接同一个网络，分别进行 10 次测试然后取平均值，另外，我们需要关闭 WebView 的缓存，防止缓存对加载速度产生影响

下面使笔者进行 10 次测试所得到的数据

结果让我有点惊讶，一直以为 WKWebView 会是个王者。结果看，速度上 WKWebView 略慢一点，不过总体差异不大（该结果仅仅是测试新浪的结果，仅供参考啦）

在这里，笔者又加了一个测试，尝试记录从 viewController 的 viewDidLoad 到 webview 的 didFinish 时间，测试了新浪的数据，如下：

UIWebViewA ： 4970、3808、3815、4250、3556 avg(40798) （加载完所有页面）

UIWebViewB ： 4103、3124、3070、3256、2835 avg(32776)（加载sina完毕）

WKWebView ： 3672、3032、2892、2912、2739 avg(30494)

flutter_webView ： 4532、3901、4310、3496、3378 avg(39234)

其中可以看到，webView 有两行，UIWebViewB 的数据就是加载 sina 主站的时间；UIWebViewA 的数据是因为在加载完 sina 主站之后，新浪又加载了一个 >

在编写几个 Flutter 项目后，发现 Flutter 的强大之处在于业务中所有用到的控件以及场景都有对应的处理方案；而 Dart 语言也与 Java 、 Kotlin 类似，所以对 Android 开发者来说门槛非常低；特意记录一下常用的控件及其使用：

StatelessWidget 不需要额外的创建 State

StatefulWidget 创建 State 类，并可以在其中保存一些状态

only 可以单独设置每个方向的内边距

类似于 LinearLayout 中的 orientation 设置为 vertical ， mainAxisAlignment 表示竖向的一个对齐方式， crossAxisAlignment 表示横向的对齐方式

与 Column 相反，主轴是横向，对齐方式类似， crossAxisAlignment 表示竖向的对齐方式

类似 SizedBox ，一个容器，但是主要功能是有一个 decoration —— 装饰器，作用是绘制背景，或者使用 item 中的阴影

栈，先入后出，类似于 Android 上的 FrameLayout

通常配合 Stack 使用，固定显示在某一个位置

配合多 child 使用，会填充剩余的空间

Image 功能强大，使用不同的方法可以加载不同来源的

看到这些方法，突然觉得 Flutter 太香了，而且 Image 可以配置 clip 等裁剪出不同形状的，无论是圆形还是五角星都不在话下，然而 Android 要实现不规则的形状，可是要下不少功夫的。

名字和 Android 的一模一样，但是用法却比 Android 的简单很多：

主要就是 itemCount 与 itemBuilder ,其余就是配置样式， itemBuilder 需要返回一个 widget ，当然了，每个 ListView 都有其对应的 item ，在里面的方法中编写 widget 即可

与 ListView 类似，但是需要有一个 delegate 类，作用是设置有多少列，每一列之间的间距是多少

GridView 没有 build ， children 表示所有的子 view

最常用的控件之一，有非常多的样式， Flutter 中通常是使用装饰器来处理控件的，如背景使用 BoxDecoration , TextFiled 使用 InputDecoration ; 使用如下

通过以下命令解决

执行完毕后，Flutter module将会创建在ios项目/my_flutter目录下

将Flutter模块嵌入到现有iOS应用程序中有两种方式：

此方法需要所有的相关开发的人员安装 Flutter 环境。

需要在my_flutter文件夹下执行一下

把ios和android等flutter配置生成出来。

AppDelegateh:

AppDelegatem:

控制器：

flutter：

注册路由

通过全局FlutterEngine实例化FlutterViewController，并setInitialRoute设置初始化路由，这里发现设置的初始化路由路由并不管用

控制器：

设置FlutterViewController的pushRoute

这里其实只是让flutter方面push一次

新建一个FlutterViewController并把setInitialRoute设置为跳转的路由，不通过全局的FlutterEngine创建

放一个之前自己学习时写的demo，希望可以帮助新入门的老铁们，有好的建议可以提一下，我们一起进步，奥利给！！！

>

以上就是关于iOS通过cocoapods集成flutter全部的内容，包括:iOS通过cocoapods集成flutter、Flutter 与 iOS 原生 webView 对比、Flutter初学 —— 常用控件使用等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！