鸿蒙Flutter实战：09-现有Flutter项目支持鸿蒙

鸿蒙Flutter实战：现有Flutter项目支持鸿蒙

背景

原来使用Flutter开发的项目，必要适配鸿蒙。
环境搭建

见文章［鸿蒙Flutter适配指南］，搭建开发环境，使用fvm管理多版本SDK。
模块化

原有项目保持模块化，拆分为 apps/common/components/modules/plugins等目录，如下所示：

1. .
2. ├── README.md
3. ├── analysis_options.yaml
4. ├── melos.yaml
5. ├── melos_ogw-flutter.iml
6. ├── node_modules
7. ├── packages
8. │   ├── README.md
9. │   ├── apps
10. │   │   ├── app
11. │   │   ├── dsm_app
12. │   │   ├── ohos_app
13. │   │   └── web
14. │   ├── common
15. │   │   ├── domains
16. │   │   ├── extensions
17. │   │   ├── services
18. │   │   └── widgets
19. │   ├── components
20. │   │   ├── image_uploader
21. │   │   ├── player
22. │   │   └── scroll_banner
23. │   ├── modules
24. │   │   ├── address
25. │   │   ├── community
26. │   │   ├── home
27. │   │   ├── invoice
28. │   │   ├── me
29. │   │   ├── message
30. │   │   ├── order
31. │   │   ├── shop
32. │   │   ├── support
33. │   │   ├── updater
34. │   └── plugins
35. │       ├── image_picker
36. │       ├── printer
37. ├── pubspec.lock
38. ├── pubspec.yaml
39. └── yarn.lock

复制代码

• plugins 是依靠于原生平台的插件，
  
• components 是平台无关的组件，
  
• common 内里是领域对象，小组件，服务类，扩展等，平台无关，内里均为纯 Dart 代码。
  
• apps 是应用外衣，通过组合不同的模块，向不同的平台打包。
  
• 使用 melos 管理多包仓库。
  

其中apps下的项目，则为必要打包成各平台，各app的入口项目。内里主要为项目配置代码，模块依靠配置，以及特定的平台适配代码。
在apps目录下新建鸿蒙项目，先把壳项目在鸿蒙中跑起来，确保没有题目。依次再添加依靠项，首先添加纯dart编写的包，再添加依靠于原生代码/插件的包。留意挨个添加依靠，不要一次添加太多依靠，方便排查定位题目，
办理版本依靠题目，鸿蒙Flutter项目现在必要依靠于3.7版本，假如原项目使用了更低的版本，则可将原项目SDK依靠升级至3.7；假如原项目SDK版本高于3.7，则有两种方案：一种是降级原项目SDK依靠为3.7；另外一种是使用多分支方案。
特定平台工程

在 apps 目录下新建一个项目，该项目运行鸿蒙平台适配和打包。

1. flutter create --platforms ohos ohos_app

复制代码

目录结构如下所示：

1. .
2. ├── README.md
3. ├── analysis_options.yaml
4. ├── assets
5. │   ├── icons
6. │   │   ├── 2.0x
7. │   │   ├── 3.0x
8. │   │   └── placeholder.png
9. │   └── images
10. │       ├── 2.0x
11. │       └── 3.0x
12. ├── build
13. │   ├── ...
14. ├── env
15. ├── lib
16. │   ├── config
17. │   │   ├── easy_refresh.dart
18. │   │   ├── routes.dart
19. │   │   └── theme.dart
20. │   └── main.dart
21. ├── ohos
22. │   ├── AppScope
23. │   │   ├── app.json5
24. │   │   └── resources
25. │   ├── build-profile.json5
26. │   ├── entry
27. │   │   ├── build
28. │   │   ├── build-profile.json5
29. │   │   ├── hvigorfile.ts
30. │   │   ├── oh-package-lock.json5
31. │   │   ├── oh-package.json5
32. │   │   ├── oh_modules
33. │   │   └── src
34. │   ├── har
35. │   │   ├── ...
36. │   ├── hvigor
37. │   │   └── hvigor-config.json5
38. │   ├── hvigorfile.ts
39. │   ├── local.properties
40. │   ├── oh-package-lock.json5
41. │   ├── oh-package.json5
42. │   └── oh_modules
43. │       └── ...
44. ├── pubspec.lock
45. └── pubspec.yaml

复制代码

可以看到，该项目只是一个壳工程，没有太多代码，主要为项目的一些特定配置，如主题、路由等，以及App入口初始化配置。
编辑 pubspec.yaml 文件，添加组件和模块依靠。

1. environment:
2.   sdk: '>=2.19.6 <3.0.0'
3. dependencies:
4.   flutter:
5.     sdk: flutter
6.   flutter_localizations:
7.     sdk: flutter
8.   # 下拉刷新
9.   easy_refresh: ^3.0.4+2
10.   flutter_dotenv: ^5.1.0
11.   go_router: ^6.0.0
13.   # 领域对象
14.   domains:
15.     path: '../../common/domains'
16.   services:
17.     path: '../../common/services'
18.   widgets:
19.     path: '../../common/widgets'
20.   address:
21.     path: '../../modules/address'
22.   support:
23.     path: '../../modules/support'
24.   me:
25.     path: '../../modules/me'
26.   message:
27.     path: '../../modules/message'
28.   order:
29.     path: '../../modules/order'
30.   shop:
31.     path: '../../modules/shop'
32.   home:
33.     path: '../../modules/home'

复制代码

配置对特定插件进行鸿蒙化适配

部门第三方插件以及插件依靠的其他库，假如没有适配鸿蒙，则可以通过 override配置鸿蒙化的版本

1. dependency_overrides:
2.   # ohos
3.   path_provider:
4.     git:
5.       url: "https://gitee.com/openharmony-sig/flutter_packages.git"
6.       path: "packages/path_provider/path_provider"

复制代码

编译运行

运行 Flutter 项目，查看相干日记和运行界面，针对出现的题目再单独处置惩罚。
查看日记，可以在运行Flutter处的IDE调试控制台查看 Flutter 项目日记，可以使用 hdc hilog 下令或DevEco 查看系统日记。