29.Flutter與原生解耦式混合開發

目錄傳送門：《Flutter快速上手指南》先導篇

還記得在 混合開發(一) 章節中，講解了如何將一個 Flutter 工程引入現有原生工程的官方方案。

但這種方案須要修改原生工程配置，在大型合做開發的項目中使用起來不是很方便，你們都須要編譯本身的工程和 Flutter 工程，雖然你可能並不須要負責 Flutter 的開發。

那能不能以依賴庫的形式將 Flutter 項目與原生工程徹底解耦呢？

要用的時候依賴上，須要下線的時候直接去掉依賴庫就好。

當你看到這個章節的時候，答案很明顯啊，就是能夠啊 😑。

你能夠把你的 Flutter 工程打包成一個 aar 包，而後讓原生工程在須要的時候依賴這個 aar，不須要的時候去掉就好。

接下來看看如何實現吧。

1. 改造你的 Flutter 工程

💡提示：把 Flutter 版本升級到最新版。本文使用的版本爲 1.2.1 版本。

1.1 你須要一個 Flutter Application

若是你是從 0 開始，那麼你要作的第一步就是建立一個 Flutter Application。

這很簡單，跟着提示一步步來，你也能夠參考 混合開發(一)。

若是你有一個 Flutter Module 工程，那麼你須要在你的 Flutter Module 工程目錄下的命令行中先輸入：

flutter create temp
複製代碼

這會在你的 Flutter Module 工程下建立一個名爲 temp 的 Flutter Application 工程包。

你須要作的就是把 temp 中的 android 包移動到你的 Flutter Module 工程根目錄，接着刪除 temp 工程包。

而後把工程根目錄下的 pubspec.yaml 進行小修改：

flutter:
    ...
    module:
      androidPackage: com.coorchice.flutter_module
      iosBundleIdentifier: com.coorchice.flutterModule

*********修改後*************
flutter:
    ...
複製代碼

就是把 module: 部分的配置刪除，而後點擊 Packages get 刷新一下就好。

當完成這些操做只後，你應該會在 Flutter 項目目錄中看到有一個 android 工程包：

之因此這樣作，是由於 Flutter 自動生成的 android 工程會有一些專有的配置，本身從新建立一個的話會比較麻煩。

若是你自己就有一個 Flutter Application，就啥都不用幹了。

1.2 改造 android 工程包

如今，咱們須要對這個 android 工程包來點兒改造 🛠。

1.2.1 修改 android 工程根目錄下的 build.gradle

修改剛剛生成的 android 工程包的根目錄下的 build.gradle：

subprojects {
    project.buildDir = "${rootProject.buildDir}/${project.name}"
}

*********修改後*************
subprojects {
    project.buildDir = "${rootProject.buildDir}/app"
}
複製代碼

目的是爲了讓你在 Flutter 中引入的第三方插件可以被打包到最後生成的 aar 中。

不然後面運行的時候會出現找不到第三方插件類的 crash。

1.2.2 修改 app 目錄下的 build.gradle

你須要在剛剛生成的 android 工程包中，找到 app 目錄，而後修改該目錄下的模塊 build.gradle。

1.修改 android 工程爲 module 工程：

apply plugin: 'com.android.application'

*********修改後*************

apply plugin: 'com.android.library'

複製代碼

2.在 android{} 節點中增長：

compileOptions {
   sourceCompatibility 1.8
   targetCompatibility 1.8
}
複製代碼

3.刪除 android{ defaultConfig {} } 中的 applicationId 。

4.在 dependencies{} 節點增長：

implementation 'com.android.support:support-v13:27.1.1'
implementation 'com.android.support:support-annotations:27.1.1'
複製代碼

由於 Flutter 的 sdk 中會用到這些庫。

1.2.3 增長 facade 包

facade 包實際上在 Flutter Module 工程中的 .android 中會被生成。

它包含了兩個封裝好的 Java 代碼文件，好比經常使用的：

FlutterView flutterView = Flutter.createView(
   activity,
   getLifecycle(),
   "route0"
);
複製代碼

就是在這個包中。

你可下載 facade文件.zip 解壓放到 android 工程包的 app/src/main/java/io/flutter/ 下：

1.2.4 修改 AndroidManifest.xml

爲了不後續 aar 包引入原生工程，致使打包時的衝突，須要把 android 工程包的 AndroidManifest.xml 進行修改。

把整個 <application> 節點刪除就能夠了 😐。

2.把 aar 引入原生工程

2.1 打包 aar

完成上面的步驟後，就能夠開始打包 aar 了。

在你的 Flutter 項目根目錄的命令行中輸入：

flutter build apk
複製代碼

等待編譯完成..

生成的 aar 包在 <你的Flutter項目目錄>/build/app/outputs/aar/app-release.aar。

2.2 在原生項目中添加 aar

你能夠把生成的 aar 包放到遠程倉庫，經過 implementation 來依賴。

也能夠把 aar 包複製到 app/libs 下，而後在 app 的 build.gradle 中加入：

implementation fileTree(include: ['*.aar'], dir: 'libs')
複製代碼

接着刷新一下工程就能夠了。

🖼 看個運行起來的效果：

恭喜你！你如今已經把 Flutter 工程解耦成一個 aar 包了，你能夠在你的原生項目中隨時添加和移除了 🎉。

目錄傳送門：《Flutter快速上手指南》先導篇

如何找到我？

傳送門：CoorChice 的主頁

傳送門：CoorChice 的 Github