Flutter 與 iOS 混合項目初探

背景

大廠小廠都在搞Flutter，就問你慌不慌！

國內一些混合集成方案的文章大部分都太老了，參考價值不高，而且很容易讓初學者頭大。

前言

本文非闡述Flutter相關的原理，優點，發展示狀等問題，只介紹在與現有的iOS項目作混合開發的實踐，以及混合過程當中的一些坑。目前混合開發已有2個頁面開發完成，等待用戶檢驗。

開發工具

1. Xcode版本 10.2
2. Visual Studio Code 1.41.0

環境依賴

Flutter開發環境配置過程就不細說了，官網文檔已經寫的很詳細了。

目前使用Flutter SDK版本爲 v1.9.1+hotfix.6

環境配置完成後執行 flutter doctor 作下檢查

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel unknown, v1.9.1+hotfix.6, on Mac OS X 10.14.4 18E226,
    locale zh-Hans-CN)
 
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[!] Xcode - develop for iOS and macOS (Xcode 10.2)
    ! CocoaPods out of date (1.6.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform sides plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade:
        sudo gem install cocoapods
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.41.0)
[✓] Connected device (1 available)

! Doctor found issues in 2 categories.

複製代碼

能夠看到要求CocoaPods版本爲1.6.0及以上，目前咱們在使用1.5.3版本，不過這只是個警告，影響不大，後續升級CocoaPods天然會解決這個問題。

混合方案

混合方案這一塊官方也是經歷了好幾個版本的變動，最初混合的方案比較麻煩，官方文檔寫的也不是很詳細，不過在Flutter1.12 發佈後，混合方案文檔作了更新，2種混合方案寫的也很簡單易懂。 這裏咱們也是採用了官方推薦的方案（使用CocoaPods依賴管理）。

• 建立Flutter模塊（Flutter相關頁面的代碼都在這裏）。

cd some/path/
flutter create --template module my_flutter
複製代碼

這裏推薦將Flutter模塊跟iOS工程模塊放在同級目錄下

some/path/
├── my_flutter/
└── MyApp/
複製代碼

• 修改Podfile

1. CocoaPods依賴本地Flutter模塊

flutter_application_path = '../my_flutter'
 load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
複製代碼

2. 每一個target嵌入Flutter

target 'MyApp' do
   install_all_flutter_pods(flutter_application_path)
 end
複製代碼

3. 執行pod install這裏是經過podhelper.rb腳本將Flutter工程裏面.ios目錄下相關的產物嵌入到iOS工程。

• Flutter.framework（Flutter engine bundle）
• App.framework（Dart code）
• Flutter plugins

相關產物的生成記得在Flutter模塊下執行flutter build ios操做。

按照上面3步操做完成後咱們能夠看到Flutter產物已經集成到iOS工程了

Analyzing dependencies
Fetching podspec for `Flutter` from `../../finance-flutter-module/.ios/Flutter/engine`
Fetching podspec for `FlutterPluginRegistrant` from `../../finance-flutter-module/.ios/Flutter/FlutterPluginRegistrant`
Fetching podspec for `connectivity` from `../../finance-flutter-module/.ios/Flutter/.symlinks/connectivity/ios`
Fetching podspec for `flutter_boost` from `../../finance-flutter-module/.ios/Flutter/.symlinks/flutter_boost/ios`
Fetching podspec for `rrd_flutter` from `../../finance-flutter-module/.ios/Flutter`
Fetching podspec for `url_launcher` from `../../finance-flutter-module/.ios/Flutter/.symlinks/url_launcher/ios`
Downloading dependencies
Installing Flutter (1.0.0)
Installing FlutterPluginRegistrant (0.0.1)
Installing Reachability (3.2)
Installing connectivity (0.0.1)
Installing flutter_boost (0.0.2)
Installing rrd_flutter (0.0.1)
Installing url_launcher (0.0.1)
Generating Pods project
Integrating client project
複製代碼

解決報錯

完成混合後run工程出現以下error

/Build/Products/Debug-iphonesimulator/investment.app/Frameworks/Flutter.framework: Permission denied
複製代碼

這裏應該是Flutter1.9的簽名衝突Bug，官方在1.10.2已經修復這個問題。

解決方案有兩種：

1. 執行 channel master 或者 channel dev 先換個channel用。
2. 修改Flutter SDK文件，打開flutter/packages/flutter_tools/bin/xcode_backend.sh文件，將

RunCommand find "${derived_dir}/engine/Flutter.framework" -type f -exec chmod a-w "{}" \;
複製代碼

替換爲

RunCommand find "${derived_dir}/engine/Flutter.framework" -type f -iname '.h' -exec chmod a-w "{}" \;
複製代碼

咱們採用了第二種方案，修改後再次run發現工程已經能夠運行了，到這裏Flutter和iOS的初步混合已經完成了。

調試和Hot Reload

flutter attach以後使用終端或者VSCode作Flutter頁面調試很是方便，這裏仍是推薦使用VSCode，畢竟在代碼和終端之間來回切換不停的按r很煩。

bogon:my_flutter yin$ flutter attach
Checking for advertised Dart observatories...
Waiting for a connection from Flutter on iPhone X...
Done.
Syncing files to device iPhone X...                              1,328ms

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild
state), press "R".
An Observatory debugger and profiler on iPhone X is available at:
http://127.0.0.1:63823/uO5BqqTmOrE=/
For a more detailed help message, press "h". To detach, press "d"; to quit,
press "q".
複製代碼

不過Android Studio對Flutter開發調試支持的要更好，畢竟是同廠出品，會有一些新的調試功能和特性可使用，感興趣的同窗能夠研究下。做爲一個用慣了Xcode的人，目前來講VSCode已經能夠知足個人開發需求了，就不去折騰Android Studio，畢竟開發React Native也仍是要用VSCode，搞太多IDE怕本身凌亂～

這裏有一點須要注意下就是 flutter attach 以後可能會一直爲等待狀態

Checking for advertised Dart observatories...
Waiting for a connection from Flutter on iPhone X...
複製代碼

這時咱們殺掉APP進程從新啓動就能夠鏈接了。這裏猜想是每次Native工程作Flutter相關初始化時候纔會作一次attach。

總結

咱們目前使用的方案是Flutter官方推薦的混合方案，優勢缺點並存：

• 優勢：混合集成簡單，混合過程不少事情Flutter官方已經幫咱們作好了
• 缺點：雖然iOS工程倉庫和Flutter Module工程倉庫是分離的，但牢牢作到了代碼分離，實際運行兩個工程是相互依賴的，也就是iOS和Android端的開發者本地都要安裝一套Flutter環境。

目前這套混合方案還比較適合咱們（iOS和Android都爲3人）這種較小的團隊，若是團隊人員比較多或者還有Flutter單獨的項目組的話，這種混合方案可能就比較笨重了，固然網上還有一些Flutter混合開發工程化的方案，這裏咱們暫時不作討論，後續若是去研究了在作補充吧～

相關連接

Flutter環境配置

官方混合文檔