Flutter boost:?https://github.com/alibaba/flutter_boost
官方方案:https://flutter.dev/docs/development/add-to-app/
背景簡介
新一代Flutter-Native混合解決方案。 FlutterBoost是一個Flutter插件,它可以輕松地為現有原生應用程序提供Flutter混合集成方案。FlutterBoost的理念是將Flutter像Webview那樣來使用。在現有應用程序中同時管理Native頁面和Flutter頁面并非易事。 FlutterBoost幫你處理頁面的映射和跳轉,你只需關心頁面的名字和參數即可(通常可以是URL)。
一:配置flutter sdk版本
官方提示:在繼續之前,您需要將Flutter集成到你現有的項目中。flutter sdk 的版本需要 v1.9.1-hotfixes,否則會編譯失敗.
先去Flutter github查看v1.9.1-hotfixes版本提交記錄,這里選擇下圖的提交記錄
打開終端cd進入到存放flutter sdk目錄,執行回退
git reset --hard 68587a0916366e9512a78df22c44163d041dd5f3
然后執行flutter doctor ,等待重新更新下載
備注:這里有個問題,Flutter升級到1.9.x后 ios打包失敗 Flutter.framework: Permission denied? 這是flutter官方的一個bug,flutter升級到1.10就好了。不升級flutter的情況下,可以改Flutter SDK 的一個文件,flutter/packages/flutter_tools/bin/xcode_backend.sh,打開該文件,第144行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"{}"\;
二:創建Flutter module
請確保iOS和Flutter項目的根目錄必須在同一目錄下
cd到當前原生項目所在目錄,執行:
flutter create -t module flutter_module
如果iOS使用swift語言,請加上 -i swift:
flutter create?-i swift -t module flutter_module
等待Flutter module創建完成,用編輯器打開該項目,修改pubspec.yaml文件,添加flutter_boost依賴,此處選擇0.1.63為較穩定版本。
打開Flutter項目 , 獲取包:
flutter packages get
至此Flutter項目混編基礎配置完成。
三:原生接入Flutter_Boost
打開iOS項目Podfile文件,加入以下代碼,用于引入Flutter_Boost相關模塊。
? flutter_application_path ='../flutter_module'
? load File.join(flutter_application_path,'.ios','Flutter','podhelper.rb')
? install_all_flutter_pods(flutter_application_path)
執行pod install,完成后會引入Development Pods模塊:
接下來在Build Setting中把Enable Bitcode改為NO。
在Build Phases里添加運行腳本,好讓iOS原生運行時自動打包flutter項目
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
備注:加上這兩句腳本后,項目運行有可能會報錯,解決方案:
在Flutter module項目中執行flutter clean,執行完之后再執行?flutter build ios --release,生成iOS項目產物,再去iOS項目中嘗試編譯,即可成功。
下一篇將詳細介紹原生與Flutter頁面相互跳轉的代碼配置,如果有問題歡迎留言交流。