Flutter Module添加到iOS项目示例详解.docx

第

Flutter?Module添加到iOS项目示例详解

目录1.创建fluttermodule2.flutter模块嵌入原生应用3.flutter模块和原生通信小结

1.创建fluttermodule

摘要：我们实际开发开始作为混合开发，可能会把一个模块使用flutter开发，之后嵌入到iOS项目中。比如说我们的商城模块使用flutter开发，这样android和iOS都可以使用。

我们通常会把iOS项目和fluttermodule在同一目录，我们创建一个商城的module

fluttercreate--templatemodulemall_flutter_module

目录结构如下我们的flutter的module和原生工程

.ios是隐藏目录，可以单独运行Fluttermodule，测试此模块的功能，iOS代码添加到现有应用程序的项目或插件中，而不是添加到模块的.ios目录中。

由于.ios目录是自动生成的，因此请勿对其进行源代码控制。在新机器上构建模块之前，请先在mall_flutter_module目录中运行flutterpubget来重新生成.ios目录，然后再使用Flutter模块构建iOS项目。

或者使用AndroidStudio创建Module

下面的原生工程的目录结构如图

2.flutter模块嵌入原生应用

flutter_module嵌入原生通常有2种方式，一种是通过Cocoapods，这种对iOS开发比较推荐，使用CocoaPods和已安装的FlutterSDK，该方法需要我们安装了Flutter环境。我们看下podfile，这里主要是要看下你flutter的模块的位置，自己根据实际调整flutter_application_path。

source/CocoaPods/Specs.git

platform:ios,13.0

flutter_application_path=../../mall_flutter_module

loadFile.join(flutter_application_path,.ios,Flutter,podhelper.rb)

targetMallExampleForIOSdo

use_frameworks!

install_all_flutter_pods(flutter_application_path)

之后执行podinstall后打开我们workspace进行相关交互

当在mall_flutter_module/pubspec.yaml中更改Flutter插件的依赖性或者第一次运行时，请在Flutter模块目录中运行flutterpubget来刷新podhelper.rb脚本读取的插件列表。然后，从应用程序目录再次运行podinstall。

podhelper.rb脚本将插件Flutter.framework和App.framework嵌入到项目中。

首先我们pubget后运行下

修改后最好运行下fluttermodule，之后我们使用Xcode编译成功后

这个我们一般iOS开发进入三方都知道，可以通过手动拖入Framework进行编译在Xcode中拖入FlutterFrameworks，首先要通过命令创建

flutterbuildios-framework--output=./Flutter/

里面包括一些三方的插件生成的Framework，之后将frameworks链接到iOS应用程序。

将文件夹的frameworks拖入BuildSettingsBuildPhasesLinkBinaryWithLibraries或者脱如下图位置

之后添加路径

在BuildSettings-SearchPaths-FrameworkSearchPaths中添加${PODS_ROOT}/../mall_flutter_module/Flutter/Release

这里使用cocoapods就不用手动了，这里就不手动展示了。

3.flutter模块和原生通信

我们在main.storyboard中添加些原生界面和元素

在flutter页面嵌入原生iOS程序要使用flutter引擎进行渲染，FlutterEngine是Dart，VM和fl