轻松玩转Flutter混合开发

Flutter自推出以来备受欢迎，国内最先引入使用的是闲鱼团队的闲鱼App。好多同学都知道Flutter是一套跨平台UI框架，最常见的运用则是一套代码同时可以编译出Android、iOS、H5等多种形式，但是实际开发中一般只有新项目我们才会用flutter进行直接编译打包，针对老项目谁都也不愿意完全推翻再用flutter重新写一遍，更多的是采用混合开发模式，即将flutter的产物嵌入到Android或者iOS项目中一同编译。本文我就总结一下Flutter混合开发的那些事。

方案选择

目前flutter混合开发非常类似组件化，有两种主流形式：

1. 源码集成
2. 产物集成

源码集成：主Native工程（Android、iOS）创建一个子flutter模块进行依赖。这种方式优点就是flutter代码更改可以及时同步到主工程；缺点就是flutter代码容易被改动，提交也容易冲突。

产物集成：单独建立flutter项目，然后构建产物，例如android可以构建出aar包，然后由原生进行远程依赖或者本地引入。这种方式的优点是flutter工程独立，可以有多环境开发者共同开发，主项目干净清爽解耦合；缺点就是每次都要先构建产物，主项目再更新依赖，比较麻烦。

针对android平台，接入之前需要注意从 Flutter v1.12 开始每个应用一次集成Flutter有以下限制：

1. 不支持多个Flutter库打包到一个应用程序中
2. 主项目支持java8
3. 从 v1.17 开始，Flutter 模块仅支持 Android 上的 AndroidX 应用程序。

下边我就针对android平台接入flutter混合开发分别对这两种方案接入过程细说一下。

源码集成

源码集成注意以下几个步骤即可：

第一步：新建Flutter Module

新建Flutter Module有两种方式：第一种通过命令行方式，第二种是主工程项目可视化创建。

针对VSCode三方开发工具可采用命令行方式创建，建议切到原生项目的父目录进行创建，这样flutter模块不与原生耦合，flutter模块将来可单独构建产物也可被ios项目依赖，这样更灵活一些（下同）。

flutter create -t module flutter_module

针对AndroidStodio开发工具可直接采用主工程项目可视化创建，依次点击左上角的File --> New --> New Flutter Project，然后选择Flutter Module，并依次填写下一步信息：

第二步：主项目依赖Flutter Module

首先在主项目根目录setting.gradle文件中配置，这一步主要目的工程项目中引入flutter模块：

setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir,
        '../flutter_module/.android/include_flutter.groovy'
))

当然，如果想在主工程开发过程中直接修改flutter_module而不用另外打开窗口可以加入如下代码，指定到flutter_module：

include ':flutter_module'
project(':flutter_module').projectDir = new File('../flutter_module')

最后在主工程的app模块的build.gradle文件中添加该flutter的依赖：

implementation project(':flutter')

这里的依赖是唯一的，google只允许一个项目中添加一个flutter模块，因此这条依赖也就不需要指明具体是哪个flutter模块了，添加依赖后主项目就能准确的找到flutter模块主入口。

到此源码集成就ok了，剩下的就是主项目与flutter项目的相互通信。通信过程会在下文讲到。

产物集成

大家都知道在新建flutter项目的时候有四种形式，其中只有Flutter Module形式可以打包成aar。

单独新建一个Flutter Module，然后命令行执行

flutter bulid aar

然后在build->host->outputs->repo->可以找到相应的产物：

怎么引入呢？

这时候有同学可能会说，直接把aar包像android一样拷贝到lib文件下不就可以了。但是这样是不行的，我们解压aar：

正常我们flutter构建apk解压后的文件结构：

我们大家也知道flutter架构主要分三部分：

1. framework 主要有Dart开发业务逻辑和各种UI组件。
2. engine 主要使用 C++ 编写，提供了 Flutter 核心 API 的底层实现。
3. embedder 充当着宿主操作系统和 Flutter 之间的粘合剂的角色，类似java和c通信的jni层。

我们会发现原来我们aar包中armeabi-v7a、x86-64等平台库中缺少了flutter引擎相关的库包和flutter引擎embedding，只有flutter打包的资源文件，即Framwork，因此在原生项目中也就不能直接引用FlutterActivity等桥梁进一步使用。

这里有两种方式可以进行引入：

第一种，直接依赖构建aar所在maven仓库，这里根据官方指示，我们可以依赖本地的maven仓库：
构建aar成功的时候我们会看到控制台已经给出了示例：

两步过程即可：

1. 原生项目根目录的build.gradle中maven配置

   String storageUrl = System.env.FLUTTER_STORAGE_BASE_URL ?: "https://storage.googleapis.com"
       repositories {
           maven {
               url 'F:\Workspaces\project_android\project_flutter\android_add_flutter\flutter_module\build\host\outputs\repo'
           }
           maven {
               url "$storageUrl/download.flutter.io"
           }
       }
   

2. 在原生项目app模块中进行依赖：

    dependencies {
        debugImplementation 'com.demo.flutter_module:flutter_debug:1.0'
        profileImplementation 'com.demo.flutter_module:flutter_profile:1.0'
        releaseImplementation 'com.demo.flutter_module:flutter_release:1.0'
    }
   

接入原理是，通过maven把所有的依赖包下载下来，进而可以被原生使用，我们可以打开构建aar时产出的maven配置(例如：flutter_debug-1.0.pom)：

以上的依赖方式是本地依赖方式，也可以构建产物整体上传到远程Maven进行依赖，这也是常规做法。

第二种，可以通过fat-aar将所有的依赖以及三方的依赖一起打包构建出aar，引入到lib即可使用。

这里推荐一篇采用fat-aar集成flutter module教程：https://juejin.cn/post/6850037282884452360

fat-aar的官方文档：https://github.com/adwiv/android-fat-aar

参考

• 闲鱼技术-Flutter混合工程改造实践
• https://flutter.dev/docs/development/add-to-app
• https://juejin.cn/post/6850037282884452360