Flutter & Native 混合開發

Flutter & Native 混合開發

項目集成方案

問題

1. 項目中仍有大量業務使用 Native 開發。項目引入 Flutter 後，要求全部 Native 開發者都配置 Flutter 開發環境並改動項目工程結構，會對開發效率形成影響。
2. 引入 Flutter 後，混合項目的構建流程會發生變更。打包環境須要配置 Flutter 開發環境，且 Native 項目沒法單獨構建。

需求

1. 獨立開發環境
2. 獨立構建

Flutter 項目模式

1. Flutter 模式就是純 Flutter 開發模式，原生項目被包在 Flutter 項目中，經過 Flutter 命令啓動項目，命令會先編譯 Flutter 工程，而後將 Flutter 編譯產物複製到 Native 項目中，接着編譯 Native ，最後啓動 Native ，Native 調用 Flutter 。

2. module 模式，Flutter 工程只負責產出 Flutter 編譯產物，提供給 Native 工程使用。Flutter 和 Native 工程沒有代碼和環境依賴，Native 工程只依賴 Flutter 的編譯產物。Flutter 工程和 Native 工程能夠獨立編譯。

咱們經過 flutter create 命令建立新的 Flutter 工程。這個命令有一個 --type 參數，經過傳入 module 這個參數 , 命令會爲咱們建立一個 module 類型的 Flutter 項目。它和普通的 Flutter 項目只有些許不一樣，咱們能夠經過項目結構窺探一二。

從上面的圖片可知，Flutter 項目模式和 module 模式在項目結構和文件上差很少，但在 iOS 和 Android 這兩個和 Native 相關的文件夾上，Flutter 項目是直接將兩個文件夾暴露出來，而 module 模式則是選擇隱藏這兩個 Native 文件夾。很顯然，對於 Flutter 項目而言，Native 項目直接包在了 Flutter 項目中，必然須要在其中直接進行 Native 頁面和邏輯的開發。而 module 模式中，，整個 Flutter 工程是和 Native 工程隔離開的，原則上不該該有 Native 的邏輯代碼，於是隱藏了 Native 相關文件，不讓用戶有機會觸碰或者添加 Native 代碼。

既然 module 模式和 Native 項目徹底隔離， 爲何還要保留一個隱藏的 Native 的項目呢？由於在 Native 平臺上，Flutter 沒法獨立運行， 始終須要依附於一個 Native 項目纔可以啓動。所以爲了在 module 模式下運行 App 進行調試，一定須要一個 Native App 的空殼來調起 Flutter 頁面。

Native 調用 Flutter

要理解 module 模式如何工做，咱們首先須要瞭解，一個純 Flutter 工程是如何被 Native App 引用並調用的。

Flutter for iOS 的產物：

1. App.framework：Dart 業務源碼相關文件，以及項目依賴的靜態資源，如字體，圖片等
2. Flutter.framework：Flutter 引擎庫文件
3. pubs 插件目錄及用於索引的文件：Flutter 下的插件，包括各類系統的和自定義的channels

iOS Native 項目經過引入 Flutter.framework ，即可以調用 Flutter 項目中的代碼，將 Flutter 嵌入到項目中。

Flutter for Android 的產物則是一個 flutter.aar，其中一樣包含了 Flutter 引擎庫以及項目中用到的靜態資源等。Android 工程經過直接引入 flutter.aar ，即可以調用 Flutter 項目中的代碼。

從上面的實踐可知，只要咱們取得了 Flutter for Native 的編譯產物，即可以輕鬆的將 Flutter 工程嵌入到現有的 Native 項目中。其中，iOS 相對簡單，直接將 Flutter 編譯出的幾個產物（Framwork、配置文件） 拖入 Native 項目中便可調用。安卓則須要修改 Native 工程中的 gradle，添加 aar 中的 Flutter 依賴。

Native 接入 Flutter 實踐

目錄結構以下

some/path/ flutter_host_android/ flutter_host_ios/ flutter_module/

保持 Native 和 Flutter 工程入口在同一目錄下，三個工程各自由本身的 Git 進行版本管理。

flutter_module 目錄下包含了 Flutter 開發人員編寫的 Flutter 代碼和 Flutter 的編譯產物。對於 Native 工程而言，他們不關心其中的 Flutter 代碼，他們只須要將資源定位到其中的編譯產物，而後引入項目便可。

Android 引入 Flutter

在工程 settings.gradle 文件中添加

//增長內容

setBinding(new Binding([gradle: this]))

evaluate(new File( settingsDir.parentFile,'flutter_module/.android/include_flutter.groovy' ))
複製代碼

在工程 build.gradle 文件中添加

dependencies {
.
.
implementation project(':flutter')
}
複製代碼

固然配置完 gradle 後不要忘記同步。

須要注意的是，Flutter 開發人員在編寫完代碼提交到 Git 以前，須要執行一次完整的 Flutter 項目，以便生成最新的編譯產物，不然 Native 端在調用 Flutter 時不會執行最新的代碼。

固然，結偶性更好的方案是，只給 Native 開發人員提供 Flutter 產物，甚至使用 Cocoapods 這類包管理工具進行自動導入和版本控制。你們能夠根據本身的需求來實現具體的工程配置。