如何進行Flutter混合開發

Flutter程式設計指南發表於2018-10-30
Flutter

[TOC]

Why Flutter ?

如何進行Flutter混合開發

Flutter框架與應用

框架與Source Code

整體框架

如何進行Flutter混合開發

Source Code

如何進行Flutter混合開發

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

APK(Android應用)結構

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

如何進行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

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

相關文章