Flutter 实现工程组件化(Windows电脑操作流程)

251 阅读2分钟

创建Flutter主工程

执行如下命令:

flutter create --org com.module.app --platforms android,ios fluter_modules
执行命令说明
包名(组织名称)com.module.app
工程支持的平台android,ios
工程名称fluter_modules

执行结果:

53e621e0-de5b-4d9c-9790-2dbca0ce11b8.png

0b58bf96-34b5-438b-a9d5-71d13870c5ec.png

全局配置flutter工程jdk版本

flutter config --jdk-dir "C:\\Users\\admin\\.jdks\\corretto-11.0.26“

7431b796-3102-4b99-bd27-520f897183c1.png

e530acab-9779-4941-add8-c2f0905d44b5.png

查看flutter环境配置使用版本

flutter doctor -v

35bde04c-f08c-471b-8db3-0629527165e8.png

Windows电脑退出Terminal窗口快捷键

Ctrl+C

2aebe101-6934-4655-a627-bfd246ba12b6.png

创建module

在flutter工程下创建modules文件夹

79bd3b7d-26ef-484e-baf7-d52215f50a87.png

创建module_one

执行如下命令:

flutter create -t module --org com.module.one module_one
执行命令说明
模块module_one包名(组织名称)com.module.one
模块名称module_one

15b52427-8c29-4a73-a78d-e625dbbc43aa.png

a23f3e29-7052-4ca7-8038-0d5baf1cc8ac.png

创建module_two

执行如下命令:

flutter create -t module --org com.module.two module_two
执行命令说明
模块module_two包名(组织名称)com.module.two
模块名称module_two

7d45becd-0f49-49af-986d-d523b8425e4c.png

8d2200e8-90e6-49d0-abff-3120d254690d.png

flutter主工程依赖模块module_one和模块module_two

配置依赖

0f8238b0-a608-4fa7-b19d-8d528f6d5421.png

执行命令加载依赖

flutter pub get

af28caeb-859b-4f98-b047-a2ea8e16ee50.png

创建module_common

执行如下命令:

flutter create -t module --org com.module.common module_common
执行命令说明
模块module_common包名(组织名称)com.module.common
模块名称module_common

fea3ff58-9400-4299-b3d8-855069834e66.png

module_common模块配置图片资源文件

切换到module_common模块所在的路径,执行如下命令:

flutter run --dart-define=IS_RUN_ALONE=true

ca7bcebf-bfe0-4e3b-a628-1aa1eefdd994.png

单独运行模块module_common

7c9a9116-cbf6-4e6f-ae21-b6e7d544c54c.png

flutter模块module_one依赖模块module_common

70094b94-e8fc-4667-897b-abac1fed595e.png

切换到module_one模块所在的路径,执行如下命令:

flutter run 

d7d5de1e-9b61-4f1c-9d73-962891c49291.png

flutter模块module_two依赖模块module_common

22671b28-2cf6-4969-8579-ebbcdf1b646e.png

切换到module_two模块所在的路径,执行如下命令:

flutter run 

e4404028-240b-4123-9abe-39f1bf0bdbbf.png

运行flutter主工程

切换到flutter主工程所在的目录,运行如下命令:

flutter run 

在flutter主工程中显示模块module_one的页面:

ca39edbf-25f9-4764-8566-6f63b1bd340c.png

在flutter主工程中显示模块module_two的页面:

42f884e1-7b4a-4a5e-9fe3-7cc8004bb4bd.png

总结

flutter主工程依赖模块 module_one和 module_two 配置如下:

69b02423-de69-485a-90c6-0da35cced3bb.png

模块module_one和module_two依赖模块module_common 配置如下:

b7647f97-317f-4c50-81b5-f4b1245f4d17.png

单独运行模块 module_common 使用如下命令:

flutter run --dart-define=IS_RUN_ALONE=true

案例

2ad2f6a8-2e2e-4a90-881e-7d06bc5864c2.png