如何進行Flutter混合開發

Flutter 安卓開發 · 發表 2018-10-31 15:10:53

摘要：所以從上面的分析可以看出,為了實現Flutter的平臺無差異性，Google主要在 PlatForm Integration和Dart:UI部分做了適配工作。 APK(Android應用)結構我們通過解壓一個release的混合開發APK包，來探索一下加入了Flu...

所以從上面的分析可以看出,為了實現Flutter的平臺無差異性，Google主要在 PlatForm Integration和Dart:UI部分做了適配工作。

APK(Android應用)結構

我們通過解壓一個release的混合開發APK包，來探索一下加入了Flutter之後的包到底發生了哪些變化以及這些變化對應的作用是什麼。

從上圖的標記中可以清楚的看出變化點

變化1

未在圖中標出，但是我相信大部分的開發者應該可以猜的到，就是在dex中打入了 PlatForm Integration的程式碼(FutterActivity，FlutterApplication，FlutterView etc.)
變化2

assets下面的4個檔案,內容均為arm指令
- isolate_snapshot_data/isolate_snapshot_instr
  
  對應了我們的Flutter程式碼進行AOT編譯，用於建立一個新isolate
- vm_snapshot_data/vm_snapshot_instr
  
  用於初始化Dart VM,提供 runTime,gc等服務
由於該部分內容通過gen_snapshot編譯生成，且存放在App的data目錄下面，所以

為以後的動態更新提供了可能。
變化3

ICU Dart Language包，提供語言相關的資料資訊。
變化4

Flutter Engine層的程式碼

Flutter混合模式

相信對於絕大多數應用來說，從零開始重新做一個App的成本是相當高的，所以混合開發成了它們嘗試Flutter的首選。

閒魚模式

雙Branch共存（Flutter模式 && Standalone模式）

Standalone模式：純Native開發或者是平臺打包下的模式

Flutter模式：進行flutter相關功能的開發，庫生成，編譯和除錯走的都是Flutter定義的流程。

優點

在Standalone模式下，純Native開發者和打包平臺，對Flutter是無感知的。在這種情況下，Flutter相關的程式碼可以認為是一個常規的第三方庫檔案。

前期準備

理清Standalone模式下對Flutter的依賴並將它們提取成一個aar庫。
開發步驟
1. 在Flutter模式下進行flutter相關功能的開發。
2. 將程式碼打包成一個aar庫上傳到repository中去進行版本控制。
3. 切換分支到Standalone模式，修改相關依賴包的版本號。
當然這種方法在實際的開發過程中還會遇到很多其他問題，比如複雜流程下生成aar庫指令碼的編寫，比如兩個模式下的程式碼同步等。

Google模式

對與方便的進行Flutter的混合模式開發呼聲有多高，Google專門為了這個問題建立了Wiki並且進行了持續4個月42個版本的更新。

建立Flutter Module模式

1.1.1 切換flutter分支

假如直接使用

$ cd some/path/
$ flutter create -t module my_flutter
複製程式碼

會出現無法識別 command module的錯誤,查詢其原因發現我們預設clone的分支是flutter的beta版本並不支援module命令所以首先需要

flutter channel
flutter channel master
flutter upgrade
複製程式碼

將分支切換到master並且進行upgrade操作。

1.1.2 建立Flutter module模版

flutter create -t module flutter_module
複製程式碼

這個時候會看到project中新增加了一個flutter_module，其中包含了.android,.ios和關鍵的include_flutter.groovy檔案

1.1.3 將Flutter新增到現有工程中

在android工程的根目錄的settings.gradle中新增

include ':app'// assumed existing content
setBinding(new Binding([gradle: this]))// new
evaluate(new File(// new
settingsDir.parentFile,// new
'flutter_module/.android/include_flutter.groovy'// new
)) 
複製程式碼

在app的build.gradle中新增依賴

dependencies {
implementation project(':flutter')
複製程式碼

1.1.4 總而言之

簡單的說，Google在兼顧維護成本和開發成本的前提下，為了Insert flutter module ,建立了一個邏輯依賴鏈

flutter_module/.android/include_flutter.groovy ->
flutter_module/.android/Flutter/build.gradle ->
$flutterRoot/packages/flutter_tools/gradle/flutter.gradle 
複製程式碼

利用 $flutterRoot/packages/flutter_tools/lib/中的flutter command &&

$AndroidRoot/build-tools/buildToolsVersion/中的android command

完成混合開發模式下的打包操作。