Flutter快速引入与Flutter、Native混合开发探究

阅读须知：

• 1.本篇文章基于 Android 平台
• 2.Flutter测试项目——测试、Flutter容器项目——容器

本文分为以下章节，读者可按需阅读：

• 1.成熟项目的Flutter快速引入——在已有项目中无缝引入Flutter作为开发的一种方式
• 2.Flutter、Native混合开发——在一个页面中同时使用 Flutter 与 Native 两种技术的开发探究
• 3.尾巴

Flutter测试项目Github
Flutter容器项目Github

一、成熟项目的Flutter快速引入

现在很多教程都停留在创建一个新的 Flutter 项目然后开始介绍如何使用这个项目开发 Flutter。但是其实我们目前大部分使用 Flutter 的场景都是基于已经成熟的项目。我们不可能因为使用 Flutter 而将原来的项目推到重来。这一节我就来介绍一种成熟项目无缝接入 Flutter 的方式。本章需要大家结合上面提到的 Github 项目代码食用。 1.闲鱼以及美团的实践

• 1.目前很多厂商都有着自己的成熟项目的 Flutter 接入实践，其中美团、闲鱼的实践应该已经运行的比较久了。他们的接入方式主要分下面几步：
  • 1.理清楚 Flutter App 的构建和运行方式。
  • 2.修改 Flutter 项目的 Gradle 文件，将 Flutter 项目打包成 AAR 文件。
  • 3.将 AAR 文件推送到 Maven 服务器上。
  • 4.主工程引入 Flutter 的 AAR 文件，和主工程一起编译生成主 App。
• 2.美团的实践
• 3.闲鱼的实践

2.我的实践
从上面的介绍来看，闲鱼、美团的实践方式似乎有着一些不方便之处。比如说不能动态更新 Flutter 代码、Flutter 的 AAR 和主工程一起编译太具有侵入性等等(这里只是我自己浅薄的看法，有异议的同学可以在评论区提出)。所以我这一节要介绍一种侵入性非常小的接入 Flutter 的方式，简单来说就一句话：动态加载 Flutter 生成的 Apk。接下来我会结合前面提到的两个 github 项目里的代码进行讲解，大家一定要把这两个项目 clone 下来，当然能点个 star 就更好了。(1).创建Flutter测试项目

图1：Flutter-Test-项目.png

• 1.创建一个 Flutter Project，这个很简单，网上教程很多我就不复述了。

2.创建好了之后如图1所示，我们需要在 app 目录下的 build.gradle 文件中添加一些代码，如代码块1所示。
 
project.afterEvaluate {
    android.applicationVariants.all { variant ->
        def variantName = variant.name.capitalize()
        def buildTask = project.tasks.findByName("assemble${variantName}")
        if (buildTask) {
            def outputApk = variant.outputs[0].outputFile.path
            def classEntry = "*.dex"
            def soEntry = "lib/*"
            def metaEntry = "META-INF/*"
            def licenseEntry = "assets/flutter_assets/LICENSE"
 
            buildTask.doLast {
                println variant.outputs[0].outputFile.length()
                exec {
                    commandine 'sh', '-c', "zip -d ${outputApk} ${classEntry}"
                }
                exec {
                    commandLine 'sh', '-c', "zip -d ${outputApk} ${soEntry}"
                }
                exec {
                    commandLine 'sh', '-c', "zip -d ${outputApk} ${metaEntry}"
                }
                exec {
                    commandLine 'sh', '-c', "zip -d ${outputApk} ${licenseEntry}"
                }
            }
        }
    }
}

• 3.这个代码的主要功能是将 flutter 生成的 apk 中的 classes.dex、libflutter.so、META-INF 等等不需要的文件都删掉，因为我们最终只需要用到 apk 中的 Dart 代码与图片资源。
• 4.代码加好之后，我们用命令行运行 flutter build apk --debug，这样就会生成一个 debug 版的 apk。其大小为 7.3 MB，没有添加代码块1中的代码之前 debug 版的 apk 大小为 33.5 MB。可以看见这个操作还是非常有有效果的。而如果是 release 版的 apk，其大小还会进一步缩小到 1.5 MB。

(2).创建Flutter容器项目

图2：Flutter容器项目目录.png

• 1.有了 Flutter 的精简 apk，接下来我们需要用一个容器来加载这个 Flutter apk。具体代码在前面我提到的Flutter 容器项目中，接下来大家就跟随我来看看这个容器是怎么加载 Flutter apk 的吧。
• 2.如图2，项目中 Flutter 容器是以一个 Android Library 的形式存在的，这样也方便大家能把这个 lib 引入到自己的工程中。我们可以看见 lib 中直接引入的 Flutter.jar，这个 jar 分为 debug 版 和 release 版。jar 中包含了 Flutter 的 java 层代码，与 so 文件。debug 版本大小为 7.3MB ，release 版本则是 3.6MB。这就是最终我们的 apk 会增大的大小，还是可以接受的。而包含 Dart 代码和资源的 apk，我们可以通过动态下载来获取。