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的開發，也有利於咱們的組件重用和提升開發效率！