Flutter组件化开发方案

做者：腾讯 - 小德（koudleren 任晓帅）

前言

前面讲了Flutter和Native的混合开发模式，Flutter做为Native工程的一个Module存在，这样能够有效的将Flutter和Native进行物理隔离，但随着Flutter承载的业务愈来愈多，与Native交互的接口变的愈来愈多，带来了不少管理问题，所以咱们迫切须要采用新的开发模式，本文将介绍Flutter的组件化开发方案。

1.存在的问题

1. 由于交互接口涉及Flutter、Android、iOS多端，随着接口变的愈来愈多，使得工程愈来愈复杂，代码也愈来愈多，致使维护成本变高，很差管理。
2. 众多的接口写在一块儿，逻辑耦合，修改一处可能会影响其余的逻辑，也很差复用。
3. 不方便单元测试

2.改进点

采用组件化开发Flutter，将会有以下的优点：

1. 将功能模块化，相互独立，方便管理
2. 模块之间互不影响，耦合低，一些与业务无关的模块能够开源出来，供其余APP使用，提供代码的复用。
3. 采用组件化开发，开发时互不影响，能够提升开发效率。
4. 方便单元测试

下面介绍Flutter组件化开发的具体内容。

3.从Platform Channel提及

• 定义

Platform Channel为Dart和平台之间提供了相互通讯的机制，将Flutter、Android、iOS链接起来。
复制代码

在移动H5开发中，webview自身提供的功能每每不够用，为了解决这个问题，引入了jsbridge，即web与native之间进行数据交互的一种方法,能够方便的将native的功能扩展给webview使用，从而能够快速开发。在Flutter中，也存在和jsbridge同样的用法，那就是Platform Channel，咱们能够经过Platform Channel，将Flutter和Native方便的链接在一块儿，架构图以下:

在Channel中

1. client发送信息
2. host接受信息并返回结果
3. 并且消息和响应是以异步方式传递的
4. Flutter和Natvie能够互为client和host，信息传递是双向的

并且在Flutter中实现一个Channel也很是简单，假如Flutter做为client，Native做为Host，只须要：

1. 在Flutter层声明一个Channel，发送消息到Native，等待Native结果返回

static const platform = const MethodChannel(‘samples.flutter.io/battery');
int result = await platform.invokeMethod('getBatteryLevel');
复制代码

2. 在Native层注册Channel的监听，当收到从Flutter层发送过来的消息时，将结果返回给Flutter

new MethodChannel(getFlutterView(),"samples.flutter.io/battery").setMethodCallHandler(
new MethodCallHandler() {
@Override
public void onMethodCall(MethodCall call, Result result) {
if (call.method.equals("getBatteryLevel")) {
return batteryLevel;
} 
}}
);
复制代码

从中咱们能够发现，写一个Flutter的Platform Channel很是简洁并且轻量。并且相较于H5的jsbridge，Platform Channel也具备以下的几个优点:

1. Platform Channel是Flutter自带的功能，不须要额外的开发，接口简洁，调用方便。
2. Platform Channel比jsbridge有更好的性能表现
3. 更重要的是Platform Channel底层实现统一，更聚焦于数据之间的传递，不像jsbridge，若是使采用不一样方法实现的jsbridge，代码是没法通用的，而Platform Channel却能够作到更通用，

Platform Channel做为链接Flutter和Native的部分，在混合开发模式中很是重要，是做为底层重要架构的存在，所以能够将Platform Channel单独做为一个模块，将Flutter工程中的Plaform Channel和UI代码分开，那么如何将Platform Channel模块化呢？这里就要讲到一个新的概念:Flutter plugin.

4.Flutter Plugin

• 定义

一个在Android、iOS、Dart上实现Platform Channel代码的软件包
复制代码

所以一个完整的Flutter Plugin 包含三种平台的代码：

1. Android平台的Java或Kotlin
2. iOS平台的ObjC或者Swift
3. Flutter平台的Dart

因此Platform Channel可使用Flutter plugin来实现模块化，这意味着能够将一些通用的功能在不一样的APP上使用，例如：登陆模块、图片库模块、网络库模块、数据库模块等。

建立Flutter Plugin的方法也很简单：

1. Android Studio

在Android Studio上安装Flutter的插件后，能够经过:

File -> New -> New Flutter Project... -> Flutter Pulgin

2. 命令行

$ flutter create --org com.example --template=plugin hello
复制代码

在建立完工程后，咱们就能够实现咱们想要的Platform Channel功能。那咱们又如何共享咱们的Flutter Plugin呢？熟悉Android开发的同窗，都知道Maven仓库，Flutter也有相似的软件包仓库，就是Pub.

5.Pub

• 定义

Pub是Dart语言的包管理器，包含Flutter、AngularDart和通常Dart程序。
复制代码

• 使用

咱们能够在pub.dartlang.org/上面查找咱们想要用的软件包，例如protobuf:

​ 在搜索结果页，找到咱们想要的包：

​ 使用的时候只要将包名和版本号加入到工程的pubspec.yaml里：

dependencies:
protobuf: ^0.10.4
复制代码

​ 并运行命令行安装包：

$ flutter packages get
复制代码

​ 就能够在工程使用了。说完使用，那如何将咱们本身的Flutter Plugin的包提供给别人使用呢？就须要咱们将包上传到Pub。

• 上传

将一个包上传到Pub，须要三个步骤：

1. 确保pubspec.yaml里面的相关配置填写正确，README.md和CHANGELOG.md最好也补充完整。

2. 在上传前，先运行dry-run命令查看是否全部内容能够经过检测

$ flutter pacakges pub publish --dry-run
复制代码

3.上传

$ flutter packages pub publish
复制代码

上传成功后，就能够在别的工程里使用，在pubspec.yaml里的dependencies添加，以下：

dependencies:
  包名: 版本号
复制代码

6.Private Pub

在将本身团队的库上传到Pub中后，还存在一个问题，那就是由于Pub是一个公共仓库，上传上去以后全部人都看的到，这样就很是很差，由于团队内的项目是不想让其余人看到的。这时候咱们就须要一个Private Pub，即私有Pub来管理本身团队的库。

我在公司内搭建了一个私有Pub，地址为：

******（由于是公司内部地址，就不公布了）

若是想要使用Private Pub，须要以下的设置：

$ export PUB_HOSTED_URL=******
复制代码

设置完成后就可使用Private Pub了，Pub其余的使用都不变。

7.Flutter 工程结构

最后咱们Flutter的工程结构以下：

在Platform Channel中，将独立的功能都抽取出来打包成plugin，在将多个plugin组合成Flutter的基础组件，从而快速支持Flutter UI业务代码的开发。

8.开发流程

最后咱们的开发流程以下：

单一功能的Platform Channel以Project的形式存在，通过开发、测试、验证无误以后再上传到Private Pub，不论是纯Flutter工程仍是Flutter、Native混合工程均可以各取所需，使用须要的Flutter Plugin。

总结

经过分析Flutter的工程结构，咱们将Flutter拆分红Platform Channel和Flutter UI两个相互独立的模块，明晰了Flutter的工程结构，同时进一步细化Platform Channel，将单一功能的Platform Channel打包成Flutter Plugin，同时搭建本身的私有Pub，方便的管理Flutter Plugin，极大的方便了Flutter的开发，也有利于咱们的组件重用和提升开发效率！