20.原生項目和Flutter的混合開發(一)

目錄傳送門：《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