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