20.原生專案和Flutter的混合開發(一)

CoorChice發表於2019-03-19

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

對於大部分團隊來說,使用 Flutter 更希望能夠和現有的專案相結合,一點點的切換。

而不是從頭用 Flutter 把整個專案重寫一遍,那樣成本就太高了。

Flutter 目前能夠支援和原生 Android 進行混合開發,接下來就看看如何在現有的原生 Android 應用中加入 Flutter 吧。

1.準備 Flutter Module

通常,你可能存在兩種情況:

1. 還沒有 Flutter 專案
2. 有現成的 Flutter 專案
複製程式碼

現在,來看看如何處理這些情況吧。

1.1 沒有 Flutter 專案

這種情況只需要從頭開始建立一個 Flutter Module 就行。

你可以選擇任何目錄(這裡選擇和現有原生 Android 專案同級的目錄),建立一個 Flutter Module

$ cd <現有的原生 Android 專案同級的目錄>
$ flutter create -t module my_flutter
複製程式碼

這樣一個 Flutter Module 就建立好了。

當然,你也可以通過 Android Studio 的 File > New > New Flutter Projects.. 開啟如下彈窗:

選擇 Flutter Module,然後選擇下一步。

配置好 Module 資訊(注意路徑),然後點選 Finish,一個新的 Flutter Module 就建立完成了。

2.2 有現成的 Flutter 專案

如果你已經有一個現成的 Flutter 專案,只需要稍作改動,把它變成一個 Flutter Module 即可。

開啟 pubspec.yaml 檔案:

name: flutter_app
description: A new Flutter module.
---改為如下內容:---
name: flutter_app
description: A new Flutter application.


flutter:
    ---新增如下內容:---
    module:
      androidPackage: <包名>
      iosBundleIdentifier: <包名>
複製程式碼

點選 Packages get 觸發重新整理一下就好了。

2. 將 Flutter Module 引入原生專案

首先,先編譯出一個 Flutter Module 的 .aar 包備用。

// 進入你 Flutter Module 專案中的 .android 目錄下
$ cd .android/
// 編出 .aar 包
$ ./gradlew flutter:assembleDebug
複製程式碼

編好後,你能夠在 .android/Flutter/build/outputs/aar/ 中找到 .aar 包。

接著,需要配置原生Android專案的主 module (一般名叫 app)的 build.gradle

android{
    ... 
     
    compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
    }
    
    // 客戶端通常要 armeabi-v7a 就好
    ndk {
        abiFilters "armeabi-v7a"
    }

    ...
}


dependencies {
  ...
  implementation project(':flutter')
  ...
}

複製程式碼

然後,需要到專案根目錄下的 setting.gradle 中增加如下配置:

include ':app'  
     
---以下是新增:---  
                            
setBinding(new Binding([gradle: this])) 

// 以下需要根據你的 FlutterModule 的實際目錄來配置,最終需要的路徑是 FlutterModule 專案裡的 .android/include_flutter.groovy                            
evaluate(new File(                                                      
  settingsDir.parentFile,                                               
  'flutter_module/.android/include_flutter.groovy'                          
))    
複製程式碼

重新整理一下專案,就將 Flutter 引入到專案中了。

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

如何找到我?

傳送門:CoorChice 的主頁

傳送門:CoorChice 的 Github



相關文章