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 對您有幫助，而您願意捐贈 😆，能夠用下面的二維碼。