成熟项目的Flutter快速引入以及Flutter、Native混合开发探究

本文首发于微信公众号——世界上有意思的事，搬运转载请注明出处，否则将追究版权责任。

又有两个月没有发文了，最近我司逐渐开始在成熟的项目中引入 Flutter 作为一种新的开发方式。作为比较早吃螃蟹的人，我也在组内为三四十个同学做了一次 Flutter 相关的分享。因为涉及了一些内部信息所以等我脱敏整理好之后会用专门的一篇文章进行相关的分享，大家可以开始期待了，哈哈。至于本篇文章，我会讲一些有意思的东西——成熟项目的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.闲鱼以及美团的实践

2.我的实践

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

(1).创建Flutter测试项目

• 1.创建一个 Flutter Project，这个很简单，网上教程很多我就不复述了。
• 2.创建好了之后如图1所示，我们需要在 app 目录下的 build.gradle 文件中添加一些代码，如代码块1所示。

• 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容器项目

• 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，我们可以通过动态下载来获取。

• 3.接下来我们看代码块2，这是一个例子。可以看见 FlutterContainer 就是容器库暴露出来的 api，用于初始化 Flutter 环境以及升级 Flutter Apk。
• 4.代码块2中调用了 init，所以我们来看看代码块3 FlutterContainer 中的 api。
  • 1.init：方法用于第一次需要初始化 Flutter apk 的时候调用一次，有多个不同的 api。
  • 2.upgradeFlutterPackage：则是用于重新加载 Flutter apk，比如我们需要发布新的 Flutter 版本，就可以使用这个 api 来重新加载一个新的 Flutter apk。

• 5.FlutterContainer 相当于初始化 Flutter apk 的入口，那么 FlutterManager 就是具体做这件事情的类了。我们看代码块4，可以了解到 FlutterManager 是一个单例，FlutterContainer.init 中有一个步骤就是初始化这个单例。其中的 api 有下面这些功能：
  • 1.registerChannel：注册 java 和 dart 之间的通信 channel，这个在后面会详细讲解。
  • 2.getFlutterEngine：获取 FlutterEngine，其内部会调用 Flutter 真正加载 apk 的 api。
  • 3.getFlutterContextWrapper：一个 Context 的包装类，主要是为了让 Flutter 能顺利解压出 apk 里面的代码和资源。

• 6.因为 Flutter 在 build apk 的时候会将 Dart 代码和资源都放在 asset 中，所以我们需要如代码块5中那样，创建一个 FlutterContextWrapper 来替换 AssetManager，使得 Flutter 加载 apk 时 asset 目录指向我们创建的 Flutter apk 中。

• 7.顺接 FlutterContainer 的调用继续深入，我们会来到代码块6的 FlutterEngine 中，这里主要有两个 api：
  • 1.startFast：如方法名说的那样，这个方法表示快速加载 flutter apk。他只能被调用一次，多次调用会去重，一般来说我们如果已经准备好了 flutter apk 的话， 那么可以使用这个方法来加载 flutter apk。可以看见其内部最终会调用到 FlutterMain.startInitialization，这是 Flutter.jar 中的 api，主要用于解压和移动 Context 中的 Asset。因为我们前面创建了一个 FlutterContextWrapper，所以这里其实会解压 flutter apk 中的 Dart 代码和资源。
  • 2.startSlow：这个方法能调用多次，主要用于升级 apk，多次调用不会去重。如果我们没有准备好 apk，需要从网络中下载，可以使用这个方法。但是最终的原理和 startFast 一样，都是使用 FlutterMain.startInitialization 来解压和移动 Flutter apk 中的资源。
• 8.到这里成熟项目中无缝引入 Flutter 就完成了。大家可以编译Flutter容器项目然后将Flutter测试项目生成的 apk adb push 到手机的 /storage/emulated/0/flutter1.apk 中，就能体验到动态加载 Flutter apk 的快感了。
• 9.另外你还可以使用 flutter attch 来对 debug 版的 Flutter apk 进行 hot reload，享受到秒级代码更新的快感。

二、Flutter、Native混合开发

前面完了在成熟项目中无缝引入 Flutter 的方式，这一章我们再来说说 Flutter 和 Native 混合开发的方式。可能会混合开发不是很简单吗，直接嵌入一个 Flutter 的 Activity/Fragment 就能将其作为容器运行 Flutter 了。其实这样的想法太过理想化，如果我的一个 Acitivity/Fragment 中 Flutter 和 Native 都需要有呢？这一章我我就是要来解决这个问题，大家随我一起往下看。

1.Flutter、Native混合开发场景以及闲鱼的实践

2.我的实践

为了解决数据传递的昂贵耗损，我想了另外一个办法来绕过这个问题。本小结需要结合Flutter容器项目食用。

三、尾巴

不贩卖焦虑，也不标题党。分享一些这个世界上有意思的事情。题材包括且不限于：科幻、科学、科技、互联网、程序员、计算机编程。下面是我的微信公众号：世界上有意思的事，干货多多等你来看。