前言:
Flutter 因其自建的渲染引擎，背靠谷歌的支持，近來俘獲了不少的開發小伙伴，越來越多的開發者嘗試使用Flutter進行開發，在原生項目中嵌入Flutter來完成復雜度不高的頁面成為了一個不錯的選擇。本篇文章記錄了一次在原生項目中嵌入Flutter的過程。
準備工作：搭建好 Flutter 的開發環境
[簡書抽風可能無法顯示]
在原生項目中加入Flutter模塊
之前網上對混合開發有一些現成的庫，目前效果不是很理想，本文采用的是官方文檔中的方法。
1. 創建 Flutter 模塊
到需要創建模塊的文件夾下（本文為原生項目下），執行創建模塊的命令：
$: flutter create --template module flutter_moudle
// 此處根據網絡狀況可能會耗時很久，耐心等待即可。
創建成功后，能在目下看到一個 flutter_moudle 的文件:
Tips:
- 使用"shift+cmd+."可查看文件夾隱藏文件
2. 配置 Flutter 模塊
官方在項目中啟用Flutter模塊提供了多種方法，本文主要介紹其中兩種：
（1）方法1: CocoaPods
在Podfile中添加定義，并配置對應的Target
添加如下兩句到定義：
# flutter模塊的路徑(本文的flutter模塊與Podfile在同一目錄下)
flutter_application_path = 'flutter_moudle'
# 加載podhelper.rb
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb’)
# 配置對應Target：
target 'MyApp' do
install_all_flutter_pods(flutter_application_path)
end
添加完畢后執行更新項目的pod
$: pod install
完成后打開原生項目的 xxx.xcworkspace ，可以看到Pods新增DevelopmentPods文件:
（2）方法2: Framework
進入到我們第一步創建的Flutter組件的文件中，將相應的模塊添加到原生項目的Framework即可，對應模塊為：
- flutter.framework (路徑：/flutter_moudle/.ios/Flutter/App.framework)
- app.framework （路徑：/flutter_moudle/.ios/Flutter/engine/Flutter.framework）
使用兩種方法任何一種均可，配置完成后執行編譯(cmd+b)，編譯成功后表示我們已經成功將Flutter加入到了原生項目中。
Tips1:
【Bitcode 相關】
默認情況下，原生項目是開啟了Bitcode選項的，而 Flutter 目前并不支持，需要手動關閉（Build Setting -> Enable Bitcode 設置為 NO）
Tips2:**
【編譯報錯：Command PhaseScriptExecution failed with a nonzero exit code】**：
這個錯誤發生在原生項目的文件名改變后，錯誤信息還提示了“flutter/XXXX/XXX no such file found”的內容，說明找不到Flutter路徑了，我們看到在 .ios/Flutter/Generated.xcconfig 中看到了Flutter的各種路徑，而我們改變文件名后，還需要更新Flutter配置，可在 “.ios” 目錄下使用自動更新命令：
$: flutter pub get
Tips3:**
【編譯卡死在：/Users/xurenjie/Desktop/AppStore/ProjectName/flutter_moudle/.ios/Flutter/flutter_export_environment.sh: line 8: inherited: command not found】**
該問題在多次編譯項目后出現，頻率較高，可臨時通過清除項目緩存解決。
使用Flutter
預熱并配置 Flutter 引擎
調用Flutter頁面
然后在需要展示 Flutter 頁面的時候使用 FlutterViewController：
至此，我們就完成了在原生應用中加入Flutter模塊的配置
熱重載
熱重載是 Flutter 的一大特性，在VSCode，AndroidStudio中開發時可以很容易的使用，而在Xcode下，打開熱重載的方式：
[方法1]
此方法必須等APP中成功啟動了FlutterEngin后才能生效，本文的FlutterEngin在AppDelegate中項目啟動時就啟動了，所以運行項目后，可直接在flutter模塊的文件中（本文模塊文件為flutter_moudle）運行命令：
$ flutter attach
調試時需要使用：
$ flutter attach --isolate-filter='debug'
[方法2]
此方法可以等待項目中的flutter engin啟動，不同1那種需要在啟動的情況下才可以啟用：
在VSCode中運行:
$ Attach to Flutter on Device
Tips:
【isolate相關錯誤】
需要在main.dart的main函數添加如下設置：
isolate錯誤解決方式
總結
- 可以看到，將Flutter加入到原生項目中非常簡單。
- Flutter 也給項目的開發增加了復雜度，一方面使得開發團隊必須形成規范，以在Android、iOS、Flutter、Web均存在的項目中不會發生混合開發的坑。
- Flutter的優點在于一次開發，多處使用，且借助其自建引擎在不同平臺上都有接近于原生的表現。
- 明顯的是，引入Flutter會明顯直接增大包體積。
- 加入Flutter的原生項目的編譯速度降低，尤其是初次編譯非常明顯，不嚴謹的用小項目測試多次，加入前初次編譯不到20s左右，而加入后最長的一次等待了5分鐘，（可能是提醒我該換電腦了）。
- 鑒于上述情況，將Flutter加入開發中，需要根據項目當下的實際情況（團隊成員技術構成，項目業務特點等等）確定，不可一概而論，也不可能一勞永逸。
