Flutter與Android混合編碼配置筆記

卻把清梅嗅發表於2019-07-11
FlutterAndroid筆記

學習Flutter一小段時間，對純Flutter專案有了一些基本的瞭解，但更趨近實際開發的應該是將Flutter模組作為一個依賴庫新增到原生的Android專案中。

本文筆者將嘗試分享個人針對Flutter與Android混編時的配置步驟，以及踩坑過程。

一、初始化Flutter-Module

參考 官方文件 ，首先需要確認Flutter-Module依賴庫資料夾的位置，簡單來說，這裡有兩種方式：

  • 1.建立在專案的根目錄下（內部）；
  • 2.建立和專案資料夾的同一層級（外部），這也是官方推薦的方式。

其實這些方式沒什麼區別，但是個人更傾向於第二種，我們在專案資料夾的目錄層級下對Flutter-Module資料夾進行 建立 並 初始化：

$ flutter create -t module module_flutter
複製程式碼

成功後，Flutter-Module和Android專案本身應該是這樣的（紅框內的兩個專案）：

Flutter與Android混合編碼配置筆記

二、配置Android專案

接下來我們需要將這個專案和剛剛建立的module-flutter進行依賴，我們先開啟Android原生專案，併為專案根目錄下的settings.gradle檔案中新增如下配置：

setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'module_flutter/.android/include_flutter.groovy'
))
複製程式碼

如果module-flutter模組是建立在專案內部，那麼需要稍微改一改：

setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.path,
        'module_flutter/.android/include_flutter.groovy'
))
複製程式碼

然後，我們需要開啟app的build.gradle檔案，新增對flutter的依賴：

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.0.0'
    implementation 'androidx.annotation:annotation:1.0.0'

    ......

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

這樣，對於簡單的Android原生專案而言，Flutter已經配置成功了。

三、AndroidX的遷移

由於筆者的專案遷移了AndroidX, 但是低版本的Flutter命令生成的module預設依賴的是support包, 因此我們需要將預設support的依賴手動遷移到AndroidX。

截止筆者發文前，FlutterV1.7已經提供了對AndroidX的支援，當建立 Flutter 專案的時候，你可以通過新增 --androidx 來確保生成的專案檔案支援AndroidX，詳情參考這裡。

手動遷移的方式有兩種：

  • 1.通過Android Studio 自動遷移 過去。

首先通過Android Studio開啟flutter-module，這時候是不能直接遷移AndroidX的，需要通過flutter - Open Android module in AS 方式新開啟一個視窗。

Flutter與Android混合編碼配置筆記

這樣編譯成功後，就可以點選Refactor - Migrate to AndroidX進行遷移了，後續步驟網上有很多，不贅述。

Flutter與Android混合編碼配置筆記

  • 2.手動配置過去，這個方式也很簡單，開啟Flutter-build.gradle檔案，對依賴進行更新：
android {
    //...
    defaultConfig {
      // ...
      testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
   }
   // ...
 }

dependencies {
    testImplementation 'junit:junit:4.12'
    implementation 'androidx.appcompat:appcompat:1.0.0'
    implementation 'androidx.annotation:annotation:1.0.0'

    // ...
}
複製程式碼

手動配置網上有很多部落格，不贅述。

需要注意的是，一定要保證Flutter模組中對AndroidX相關依賴的版本和實際原生專案中相關依賴的版本是一致的，否則可能會導致依賴衝突。

四、多模組專案的配置

上文說到，簡單的專案已經配置完畢了，但是多模組的專案來說則稍顯複雜，比如筆者的專案：

Flutter與Android混合編碼配置筆記

首先，需要在底層library(本文中是library-core)的build.gradle檔案中新增對flutter的依賴：

dependencies {
    // ...
    api project(':flutter')
}
複製程式碼

新增之後並進行同步，原生的專案就會對settings.gradle檔案中指向的module-flutter資料夾進行依賴。

同步、編譯成功後，我執行了專案，但我很快遇到了問題：

[ERROR:flutter/runtime/dart_vm_data.cc(19)] VM snapshot invalid and could not be inferred from settings.
[ERROR:flutter/runtime/dart_vm.cc(241)] Could not setup VM data to bootstrap the VM from.
[ERROR:flutter/runtime/dart_vm_lifecycle.cc(89)] Could not create Dart VM instance.
[FATAL:flutter/shell/common/shell.cc(218)] Check failed: vm. Must be able to initialize the VM.
複製程式碼

這個問題糾結了很久，最後在 這個issue中 找到了答案:

Flutter與Android混合編碼配置筆記

經 @yk3372 大佬提示，原來是以為專案中配置了ProductFlavors, 因此，Flutter模組中對應的build.gradle檔案也需要進行對應的配置，比如這樣：

buildTypes {
    release {}
    debug {}
}
flavorDimensions "environment"
productFlavors {
    dev {}
    qa {}
    prod {}
}
複製程式碼

配置好之後，還需要手動將相關module的ProductFlavors配置相同，否則會提示一堆錯誤，比如我的一個原生的module依賴了flutter的module，它們就必須都保持同一個狀態：

Flutter與Android混合編碼配置筆記

？？？這是不是意味著所有的module的build.gradle都配置相同的productFlavors資訊？

實踐給予我答案，是的。

Flutter與Android混合編碼配置筆記

雖然折騰了很久，還好前人栽樹，後人乘涼，解決了問題還是happy ending, Github大法好。

最後：更多Flutter混合開發姿勢

本文提供了 官方文件 提供混合開發的整合方式，實際上，國內很多大廠都分享過相關的技術文章，這裡也一併放出來：

關於我

Hello，我是卻把清梅嗅，如果您覺得文章對您有價值，歡迎 ❤️，也歡迎關注我的部落格或者Github。

如果您覺得文章還差了那麼點東西，也請通過關注督促我寫出更好的文章——萬一哪天我進步了呢？

相關文章