前面講了Flutter和Native的混合開發(fā)模式，F(xiàn)lutter作為Native工程的一個Module存在，這樣可以有效的將Flutter和Native進行物理隔離，但隨著Flutter承載的業(yè)務越來越多，與Native交互的接口變的越來越多，帶來了很多管理問題，因此我們迫切需要采用新的開發(fā)模式，本文將介紹Flutter的組件化開發(fā)方案。
1.存在的問題
- 因為交互接口涉及Flutter、Android、iOS多端，隨著接口變的越來越多，使得工程越來越復雜，代碼也越來越多，導致維護成本變高，不好管理。
- 眾多的接口寫在一起，邏輯耦合，修改一處可能會影響其他的邏輯，也不好復用。
- 不方便單元測試
2.改進點
采用組件化開發(fā)Flutter，將會有如下的優(yōu)勢：
- 將功能模塊化，相互獨立，方便管理
- 模塊之間互不影響，耦合低，一些與業(yè)務無關的模塊可以開源出來，供其他APP使用，提供代碼的復用。
- 采用組件化開發(fā)，開發(fā)時互不影響，可以提高開發(fā)效率。
- 方便單元測試
下面介紹Flutter組件化開發(fā)的具體內(nèi)容。
3.從Platform Channel說起
- 定義
Platform Channel為Dart和平臺之間提供了相互通信的機制，將Flutter、Android、iOS連接起來。
在移動H5開發(fā)中，webview自身提供的功能往往不夠用，為了解決這個問題，引入了jsbridge，即web與native之間進行數(shù)據(jù)交互的一種方法,可以方便的將native的功能擴展給webview使用，從而可以快速開發(fā)。在Flutter中，也存在和jsbridge一樣的用法，那就是Platform Channel，我們可以通過Platform Channel，將Flutter和Native方便的連接在一起，架構圖如下:
在Channel中
- client發(fā)送信息
- host接受信息并返回結果
- 而且消息和響應是以異步方式傳遞的
- Flutter和Natvie可以互為client和host，信息傳遞是雙向的
而且在Flutter中實現(xiàn)一個Channel也非常簡單，假如Flutter作為client，Native作為Host，只需要：
- 在Flutter層聲明一個Channel，發(fā)送消息到Native，等待Native結果返回
static const platform = const MethodChannel(‘samples.flutter.io/battery');
int result = await platform.invokeMethod('getBatteryLevel');
- 在Native層注冊Channel的監(jiān)聽，當收到從Flutter層發(fā)送過來的消息時，將結果返回給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;
}
}}
);
從中我們可以發(fā)現(xiàn)，寫一個Flutter的Platform Channel非常簡潔而且輕量。而且相較于H5的jsbridge，Platform Channel也具有如下的幾個優(yōu)勢:
- Platform Channel是Flutter自帶的功能，不需要額外的開發(fā)，接口簡潔，調(diào)用方便。
- Platform Channel比jsbridge有更好的性能表現(xiàn)
- 更重要的是Platform Channel底層實現(xiàn)統(tǒng)一，更聚焦于數(shù)據(jù)之間的傳遞，不像jsbridge，如果使采用不同方法實現(xiàn)的jsbridge，代碼是無法通用的，而Platform Channel卻可以做到更通用，
Platform Channel作為連接Flutter和Native的部分，在混合開發(fā)模式中非常重要，是作為底層重要架構的存在，因此可以將Platform Channel單獨作為一個模塊，將Flutter工程中的Plaform Channel和UI代碼分開，那么如何將Platform Channel模塊化呢？這里就要講到一個新的概念:Flutter plugin.
4.Flutter Plugin
- 定義
一個在Android、iOS、Dart上實現(xiàn)Platform Channel代碼的軟件包
因此一個完整的Flutter Plugin 包含三種平臺的代碼：
- Android平臺的Java或Kotlin
- iOS平臺的ObjC或者Swift
- Flutter平臺的Dart
所以Platform Channel可以使用Flutter plugin來實現(xiàn)模塊化，這意味著可以將一些通用的功能在不同的APP上使用，例如：登錄模塊、圖片庫模塊、網(wǎng)絡庫模塊、數(shù)據(jù)庫模塊等。
創(chuàng)建Flutter Plugin的方法也很簡單：
- Android Studio
在Android Studio上安裝Flutter的插件后，可以通過:
File -> New -> New Flutter Project... -> Flutter Pulgin
- 命令行
$ flutter create --org com.example --template=plugin hello
復制代碼
在創(chuàng)建完工程后，我們就可以實現(xiàn)我們想要的Platform Channel功能。那我們又如何共享我們的Flutter Plugin呢？熟悉Android開發(fā)的同學，都知道Maven倉庫，F(xiàn)lutter也有類似的軟件包倉庫，就是Pub.
5.Pub
- 定義
Pub是Dart語言的包管理器，包含F(xiàn)lutter、AngularDart和一般Dart程序。
- 使用
我們可以在pub.dartlang.org/上面查找我們想要用的軟件包，例如protobuf:
在搜索結果頁，找到我們想要的包：
使用的時候只要將包名和版本號加入到工程的pubspec.yaml里：
dependencies:
protobuf: ^0.10.4
并運行命令行安裝包：
$ flutter packages get
就可以在工程使用了。說完使用，那如何將我們自己的Flutter Plugin的包提供給別人使用呢？就需要我們將包上傳到Pub。
- 上傳
將一個包上傳到Pub，需要三個步驟：
確保
pubspec.yaml里面的相關配置填寫正確，README.md和CHANGELOG.md最好也補充完整。在上傳前，先運行dry-run命令查看是否所有內(nèi)容可以通過檢測
$ flutter pacakges pub publish --dry-run
3.上傳
$ flutter packages pub publish
上傳成功后，就可以在別的工程里使用，在pubspec.yaml里的dependencies添加，如下：
dependencies:
包名: 版本號
6.Private Pub
在將自己團隊的庫上傳到Pub中后，還存在一個問題，那就是因為Pub是一個公共倉庫，上傳上去之后所有人都看的到，這樣就非常不好，因為團隊內(nèi)的項目是不想讓其他人看到的。這時候我們就需要一個Private Pub，即私有Pub來管理自己團隊的庫。
比如你們公司搭建了一個私有Pub，地址為：******
如果想要使用Private Pub，需要如下的設置：
$ export PUB_HOSTED_URL=******
設置完成后就可以使用Private Pub了，Pub其他的使用都不變。
7.Flutter 工程結構
最后我們Flutter的工程結構如下：
在Platform Channel中，將獨立的功能都抽取出來打包成plugin，在將多個plugin組合成Flutter的基礎組件，從而快速支持Flutter UI業(yè)務代碼的開發(fā)。
8.開發(fā)流程
最后我們的開發(fā)流程如下：
單一功能的Platform Channel以Project的形式存在，經(jīng)過開發(fā)、測試、驗證無誤之后再上傳到Private Pub，不管是純Flutter工程還是Flutter、Native混合工程都可以各取所需，使用需要的Flutter Plugin。
總結
通過分析Flutter的工程結構，我們將Flutter拆分成Platform Channel和Flutter UI兩個相互獨立的模塊，明晰了Flutter的工程結構，同時進一步細化Platform Channel，將單一功能的Platform Channel打包成Flutter Plugin，同時搭建自己的私有Pub，方便的管理Flutter Plugin，極大的方便了Flutter的開發(fā)，也有利于我們的組件重用和提高開發(fā)效率！
