iOS 现有工程接入 Flutter

前言

本篇文章将会指引你如何在原有 iOS 工程中接入 Flutter。

我会介绍两种方法：

1. 简单集成：Flutter 相关库分散在 Pod 里去管理
2. Framework集成：Flutter 相关库集成为一个 Pod 去管理

原文见连接：Add Flutter to existing apps

请注意你的 Flutter 版本，须要大于1.8.4

先看一下个人版本：

1、简单集成

1.建立 Flutter 模块

假设当前项目路径为 ~/Desktop/MyProject/Apach3Project，那么咱们须要在 Apach3Project 的同级目录下，新建 Flutter Module，即在~/Desktop/MyProject。

cd ~/Desktop/MyProject/Apach3Project
cd ..
flutter create -t module flutter_module_for_ios
复制代码

当前同级目录能看到以下：

2.建立 Flutter 的依赖

这里用 Cocoapods 的方式来管理依赖。未安装 Cocoapods 的，请自行安装。 我这里进行一下 pod 的初始化。

cd ~/Desktop/MyProject/Apach3Project
pod init
pod install
复制代码

能够看到如今是这样的目录结构：

打开 Podfile

咱们在这里添加对 Flutter 的依赖，添加这句话：

flutter_application_path = '../flutter_module_for_ios'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
复制代码

再添加这句：

install_all_flutter_pods(flutter_application_path)
复制代码

添加以后的 Podfile 长这样：

而后咱们执行：

cd ~/Desktop/MyProject/Apach3Project
pod install
复制代码

结果以下：

能够打开项目的 workspace 看一下，Development Pods 里引入了 Flutter.framework、 App.framework和 FlutterPluginRegistrant：

其中 Flutter.framework是 Flutter 所提供的基础库，里面包含一个强大的 Flutter 引擎， App.framework是咱们的 dart 文件最后生成的产物，这个很重要。 每次对 flutter 进行操做后，都要进行 flutter pub get和 flutter build ios --release和 pod install。

3.试一下

进行了上述配置后，咱们还须要选择运行的设备和证书来进行测试一下，这边我选择的是真机：

AppDelegate.m里是这样：

ViewController.m里是这样：

效果以下：

点击按钮后：

2、Framework 集成

本集成方式考虑到多人开发中，全部开发人员的电脑不必定都安装了 Flutter 环境，因而咱们就把 Flutter 相关集成一个 Framework，用 Cocoapods 来管理。

1.建立 Pod 库

这里，我选择在~/Desktop/PodProject目录下面建立一个 pod。

cd ~/Desktop/PodProject
pod lib create MyFlutterPod
复制代码

而后按顺序回答问题，以下：

Cloning `https://github.com/CocoaPods/pod-template.git` into `MyFlutterPod`.
Configuring MyFlutterPod template.

------------------------------

To get you started we need to ask a few questions, this should only take a minute.

If this is your first time we recommend running through with the guide: 
 - https://guides.cocoapods.org/making/using-pod-lib-create.html
 ( hold cmd and double click links to open in a browser. )


What platform do you want to use?? [ iOS / macOS ]
 > iOS

What language do you want to use?? [ Swift / ObjC ]
 > ObjC

Would you like to include a demo application with your library? [ Yes / No ]
 > Yes

Which testing frameworks will you use? [ Specta / Kiwi / None ]
 > None

Would you like to do view based testing? [ Yes / No ]
 > No

What is your class prefix?
 > Apach3

Running pod install on your new library.

Analyzing dependencies
Fetching podspec for `MyFlutterPod` from `../`
Downloading dependencies
Installing MyFlutterPod (0.1.0)
Generating Pods project
Integrating client project

[!] Please close any current Xcode sessions and use `MyFlutterPod.xcworkspace` for this project from now on.
Sending stats
Pod installation complete! There is 1 dependency from the Podfile and 1 total pod installed.

 Ace! you're ready to go! We will start you off by opening your project in Xcode open 'MyFlutterPod/Example/MyFlutterPod.xcworkspace' To learn more about the template see `https://github.com/CocoaPods/pod-template.git`. To learn more about creating a new pod, see `https://guides.cocoapods.org/making/making-a-cocoapod`. 复制代码

这里我选择了须要 Example Project 的方式，这时会自动打开这个 WorkSpace，咱们能够点开 Pods 里面的 Podfile 或 Development Pods，咱们能够发现咱们的 Pod 库MyFlutterPod就在这里：

咱们再看一下文件目录，刚才打开的 WorkSpace 就在这里：

2.建立 Flutter 对应 Module

同方法一同样，咱们须要执行flutter create -t module flutter_module_for_ios，可是我选择将 Flutter 相关的内容所有用 Pod 来管理，因而我选择将目录选择为 MyFlutterPod。 执行下面命令：

cd ~/Desktop/PodProject/MyFlutterPod
flutter create -t module flutter_module_for_ios
复制代码

理所应当的，目录变成了下面的样子：

3.移动所须要的 Framework

首先，咱们要将须要的东西，打包成 Framework，因此咱们打开.ios文件夹：

执行：

cd ~/Desktop/PodProject/MyFlutterPod/flutter_module_for_ios/.ios
pod init
pod install
复制代码

这个时候，咱们打包再 build 一下：

cd ~/Desktop/PodProject/MyFlutterPod/flutter_module_for_ios
flutter packages get
flutter build ios --release
复制代码

咱们须要的就是下面的这几个 Framework：

因此咱们须要把这几个 Framework 加入到 MyFlutterPod里面的 MyFlutterPod.podspec。 下面咱们要写一个脚本，来执行移动的操做。 咱们将 MyFlutterPod.podspec 改成以下：

Pod::Spec.new do |s|
  s.name             = 'MyFlutterPod'
  s.version          = '0.1.0'
  s.summary          = 'A short description of MyFlutterPod.'
  s.description      = <<-DESC
TODO: Add long description of the pod here.
                       DESC

  s.homepage         = 'https://github.com/apach3q/MyFlutterPod'
  # s.screenshots = 'www.example.com/screenshots_1', 'www.example.com/screenshots_2'
  s.license          = { :type => 'MIT', :file => 'LICENSE' }
  s.author           = { 'apach3q' => '4725873@qq.com' }
  s.source           = { :git => 'https://github.com/apach3q/MyFlutterPod.git', :tag => s.version.to_s }
  # s.social_media_url = 'https://twitter.com/<TWITTER_USERNAME>'

  s.ios.deployment_target = '8.0'
  s.static_framework = true
  p = Dir::open("ios_frameworks")
  arr = Array.new
  arr.push('ios_frameworks/*.framework')
  s.ios.vendored_frameworks = arr
end
复制代码

4.编写脚本

咱们能够将下面的脚本，放到刚刚建立的flutter_module_for_ios内，此脚本命名为move_file.sh，此脚本的功能为移动文件到 MyFlutterPod 里。

out='ios_frameworks'

echo "准备输出全部文件到目录: $out"

echo "清除全部已编译文件"
find . -d -name build | xargs rm -rf

rm -rf $out

mkdir $out

cp -r .ios/Flutter/App.framework $out
cp -r .ios/Flutter/engine/Flutter.framework $out

echo "复制framework库到临时文件夹: $out"

libpath='../'

rm -rf "$libpath/ios_frameworks"
cp -r $out $libpath

echo "复制库文件到: $libpath"
复制代码

5.试一下

通过上述操做后，咱们须要在flutter_module_for_ios目录下执行脚本：

cd ~/Desktop/PodProject/MyFlutterPod/flutter_module_for_ios
sh move_file.sh
复制代码

这样咱们会发现，在 MyFlutterPod里，会有对应的 ios_framework文件夹，里面的内容就是咱们须要的framework。

咱们不用 Example 工程作测试，在 PodProject 下面的目录，新建一个 Xcode 工程 FlutterPodTest。

咱们在 FlutterPodTest 的 pod 里，添加对刚刚 MyFlutterPod 的依赖，修改 podfile：

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'FlutterPodTest' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  pod 'MyFlutterPod', :path => '../MyFlutterPod'

end
复制代码

而后执行 pod install。能够发现咱们刚刚建立的 pod 被添加进来了！

关于 FlutterViewController 的测试使用，在方法一有写，这里再也不叙述。 咱们还能够将咱们刚刚制做的 pod 托管在 git 上，这样别人想使用的时候，直接添加这个库的依赖，而后 pod install就 OK 了。

经过这种方法接入，管理 Flutter 的相关人员只须要维护对应的这个 Pod就能够了。

管理 Flutter Pod 的流程：

1. 修改对应 dart 代码
2. flutter clean
3. flutter packages get
4. flutter build ios --release
5. sh move_file.sh
6. push 到托管的 git

Q&A

1.碰见报错：

Xcode's output: ↳ error: Failed to create provisioning profile. The app ID "com.example.flutterModuleForIos" cannot be registered to your development team. Change your bundle identifier to a unique string to try again. (in target 'Runner') error: No profiles for 'com.example.flutterModuleForIos' were found: Xcode couldn't find any iOS App Development provisioning
    profiles matching 'com.example.flutterModuleForIos'. (in target 'Runner')
    note: Using new build systemnote: Planning buildnote: Constructing build description


It appears that your application still contains the default signing identifier.
Try replacing 'com.example' with your signing id in Xcode:
  open ios/Runner.xcworkspace
Encountered error while building for device.
复制代码

咱们须要打开 module 下的.ios文件夹，打开Runner.xcworkspace，而后选择对应的证书。

2.碰见报错：

Xcode's output: ↳ diff: /Podfile.lock: No such file or directory diff: /Manifest.lock: No such file or directory error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation. note: Using new build systemnote: Planning buildnote: Constructing build description It appears that your application still contains the default signing identifier. Try replacing 'com.example' with your signing id in Xcode: open ios/Runner.xcworkspace Encountered error while building for device. 复制代码

咱们须要按下图操做，将这几个 Configurations 设置为对应的：

---

项目 git 地址：github.com/Apach3Q/iOS…

若是有任何疑问，能够联系我 QQ：4725873，期待共同进步。

若是个人 blog 对您有帮助，而您愿意捐赠 😆，能够用下面的二维码。