使用Flutter Module實(shí)現(xiàn)組件化的思路：
Flutter組件化
使用Flutter Package實(shí)現(xiàn)組件化思路：
Flutter 組件化開發(fā)實(shí)踐概述
組件化的優(yōu)點(diǎn)：
- 各個模塊相互獨(dú)立捎废，方便管理
- 抽離出功能块促，方便多個
app復(fù)用 - 方便單元測試
組件化思路：
一务唐、選擇模塊化的方式
有2種方式可實(shí)現(xiàn)：Flutter Package和Flutter Module
區(qū)別：
Flutter Package：用于單獨(dú)的Flutter婿崭、Dart代碼，不依賴與原生iOS/Android代碼悯恍，生成的Package目錄里沒有iOS/Android目錄，可創(chuàng)建exampleflutter項(xiàng)目配合測試。Flutter Module：常用于在原生iOS/Android項(xiàng)目中集成Flutter項(xiàng)目的混合開發(fā)疲酌，創(chuàng)建的Module中有.iOS/.android目錄，單獨(dú)的Module可單獨(dú)在iOS和Android上運(yùn)行測試了袁。
二朗恳、模塊存放位置
- 可與原有項(xiàng)目放在一起，在
pubspec.yaml中使用path來引入 - 將模塊放入
git庫中载绿，在pubspec.yaml中使用url來引入 - 建立私有
pub粥诫，將模塊發(fā)布到私有pub上
三、將項(xiàng)目劃分不同的模塊
- 網(wǎng)絡(luò)模塊（
Network Package） - 通用的基礎(chǔ)類和工具類（多個
Common Package） - 業(yè)務(wù)模塊A（
A Package） - 業(yè)務(wù)模塊B（
B Package） - 業(yè)務(wù)模塊...
單個模塊提供一個對外的dart來供導(dǎo)入使用崭庸，模塊內(nèi)部使用export對內(nèi)部文件進(jìn)行細(xì)粒度的暴露怀浆。
library common_service;
export 'a.dart';
export 'b.dart';
四谊囚、單獨(dú)測試模塊
- 如果使用
Flutter Module，可單獨(dú)運(yùn)行Module - 如果使用
Flutter Package执赡，可創(chuàng)建Flutter example測試項(xiàng)目來測試
五镰踏、加載Package或Module里的資源文件
單個組件的安裝包和整個組件的安裝包資源位置不一樣。
- 在
Package或Module里運(yùn)行：正常的使用方法沙合，比如'images/base/login_button.png' - 在主項(xiàng)目里運(yùn)行
Package或Module：在正常使用方法的路徑前增加'packages/模塊名/'奠伪，比如'packages/login_module/images/base/login_button.png'
資源引入路徑不一致解決方案：
可通過主項(xiàng)目運(yùn)行時，往模塊中傳入自定義參數(shù)首懈，根據(jù)參數(shù)判斷資源引用的路徑前是否添加'packages/模塊名/'绊率。
bool.fromEnvironment可用來判斷是否是生產(chǎn)環(huán)境，比如final isProduct = const bool.fromEnvironment('dart.vm.product');猜拾，也可以用來判斷自定義參數(shù)即舌，比如flutter run --dart-define=IS_ADD_PACKAGE_PATH=true，參數(shù)名稱為IS_ADD_PACKAGE_PATH挎袜，值為true顽聂。
代碼中使用：
// 定義全局變量
static const IS_ADD_PACKAGE_PATH = bool.fromEnvironment('IS_ADD_PACKAGE_PATH', defaultValue: true);
// 具體使用
'${IS_ADD_PACKAGE_PATH ? 'packages/login_module/' : ''}images/base/login_button.png'
- 命令行
flutter run運(yùn)行添加自定義參數(shù)：
flutter run --dart-define=IS_ADD_PACKAGE_PATH=true - Android Studio運(yùn)行添加自定義參數(shù)：
在main.dart的run/debug configrations中配置，如下：
image.png
六盯仪、減少各模塊之間的耦合
比如主項(xiàng)目引用模塊紊搪，模塊引用主項(xiàng)目，會出現(xiàn)很多耦合全景，盡量減少耀石。
解決思路：
- 組件引入主項(xiàng)目的耦合部分，盡量抽取為公共庫
- 在路由上做文章爸黄，減少引入
