鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II

本文涉及的产品
云原生网关 MSE Higress,422元/月
注册配置 MSE Nacos/ZooKeeper,118元/月
任务调度 XXL-JOB 版免费试用,400 元额度,开发版规格
简介: 本文介绍了如何将现有 Flutter 项目适配鸿蒙系统,详细步骤包括安装 FVM、使用 FVM 安装 Flutter SDK、搭建开发环境、创建项目架构和壳工程等。

引言


在之前的文章鸿蒙Flutter实战:09-现有Flutter项目支持鸿蒙中,介绍了如何改造项目,适配鸿蒙平台。


文中讲述了整体的理念和思路,本文更进一步,结合可实操的项目代码,详细说明如何实施。


通过模块化、鸿蒙壳工程,结合 FVM 管理多版本 Flutter SDK,最终,保持原 Flutter 代码纯净,最小化修改,完成了鸿蒙化的适配示例。


本项目代码地址: https://gitee.com/zacks/flutter-ohos-demo


准备工作


1.安装 FVM


dart pub global activate melos

2.使用 FVM 安装 Flutter SDK


分别安装官方的3.22版本,以及鸿蒙社区的 3.22.0 版本


3.搭建 Flutter鸿蒙开发环境


参考文章《鸿蒙Flutter实战:01-搭建开发环境》


搭建项目架构


创建目录


# 创建项目目录
mkdir flutter-ohos-demo


设置使用的 Flutter SDK 版本
推荐在 VsCode 的命令行中执行以下命令,这将创建 .fvm 目录, .vscode/setting.json 文件, 和.fvmrc 文件



fvm use 3.22.0

初始化工作区间


创建目录,项目结构如下所示:


.
├──  packages
│   ├── apps  #该目录用于存放各端应用壳工程
│   ├── common #该目录用于存放公共库,均为纯 dart 代码,不依赖于 ios/android 等原生实现
│   │   ├── domains #领域对象,存放各类实体文件,如枚举/模型/vo/事件等
│   │   ├── extensions #存放扩展类文件,对于类的扩展方法/属性
│   │   ├── services #服务类:如请求服务/授权服务/缓存服务/平台调用服务/路由服务/工具类等
│   │   └── widgets #通用小型 widgets, 纯dart编写的 Flutter UI 组件
│   ├── components #封装组件库,可以依赖于第三方库/第三方插件,或依赖于 plugins中的插件
│   │   ├── image_uploader
│   │   └── player
│   ├── modules
│   │   ├── address
│   │   ├── home
│   │   ├── me
│   │   ├── message
│   │   ├── order
│   │   ├── shop
│   │   └── support
│   └── plugins #插件库,自行封装的插件库,依赖于原生平台(ios/android)的代码
│       └── printer
├── README.md
├── melos.yaml
└── pubspec.yaml

运行 melos bootstrap


melos bootstrap

开始编写代码


在各个 package 初始化代码,如在 packages/common/domains 目录运行


fvm flutter create --template package .

创建壳工程


新建两个壳工程,一个为 app,另外一个为 ohos_app


App 壳工程


进入 package/apps/app 目录, 创建 app 项目,该项目为一个 App 项目,用于各平台(ios/android/mac 等, 不包含鸿蒙)打包


fvm flutter create --template app --org com.moguyun.flutter app

增加依赖项


修改 pubspec.yaml,添加以下内容


 services:
   path: '../../common/services'
 domains:
   path:  '../../common/domains'
 widgets:
   path: '../../common/widgets'

 home:
   path: '../../modules/home'
 me:
   path: '../../modules/me'
 support:
   path: '../../modules/support'

安装依赖


运行以下命令,安装依赖


fvm flutter pub get

鸿蒙壳工程


切换鸿蒙 Flutter SDK


首先在 flutter-ohos-demo 项目根目录,将 Flutter 版本切换到鸿蒙化的版本


fvm use custom_3.22.0


SDK 变更以后,需要重启 IDE (或者 Dart:Restart Analysis Server),以便让 Flutter 插件重启



创建 ohos_app 项目


进入 packages/apps 目录,创建 ohos_app 项目


fvm flutter create --template app --platforms ohos --org com.moguyun.flutter ohos_app

增加依赖项


进入 packages/apps/ohos_app 目录中的 pubspec.yaml, 同样增加依赖项


 services:
   path: '../../common/services'
 domains:
   path:  '../../common/domains'
 widgets:
   path: '../../common/widgets'

 home:
   path: '../../modules/home'
 me:
   path: '../../modules/me'
 support:
   path: '../../modules/support'

三方库鸿蒙化适配


编辑 pubspec.yaml文件,增加以下配置,通过 dependency_overrides 来替换鸿蒙化的三方库,注意鸿蒙化的库与原库,保持版本统一


# 鸿蒙适配
dependency_overrides:
  flutter_inappwebview:
    git:
      url: https://gitee.com/openharmony-sig/flutter_inappwebview.git
      path: "flutter_inappwebview"


每次修改完 pubspec.yaml,使用 fvm flutter pub get 更新下依赖安装。



运行调试


用 Deveco 打开apps/ohos_app/ohos 目录。


在 Deveco 左上角 打开 File -> Project Structure..., 点击 Siging Configs, 勾选 Automatically generate signature, 对鸿蒙项目签名。


在 ohos_app 目录下,使用 fvm flutter run,或者点击运行按钮,运行flutter项目。


注意事项



  1. melos.yaml 文件中的 sdkPath: .fvm/flutter_sdk 配置了 melos 使用的 flutter SDK 版本,即由FVM 配置的当前项目版本


  2. 每次切换 Flutter SDK 时,都会修改文件 .fvm/, vscode/settings.json 文件


  3. ohos_app/pubsec.yaml 中的 dependency_overrides, 仅添加需要鸿蒙化的三方库


  4. ohos-3.22 在 build 时,有的 har 包可能确实,建议保持 ohos-Flutter 版本最新,如果还是不行,可以考虑手动复制 har 包(使用 3.7 构建出来)



如何判断三方库是否需要鸿蒙化,简而言之,如果三方库由纯 Dart 实现,则不需要单独适配,直接使用;如果三方库依赖系统底层实现,则需要鸿蒙化适配。


三方库的适配情况,可以查询 Gitee/Github,或者查阅表格 Flutter三方库适配计划



  1. 已知插件删除问题,如果删除插件,可能需要在ohos里面手动修改代码,移除相关依赖

ohos/oh-package.json5


应用截图


1.jpeg1.jpeg
640.jpeg640.jpeg
640 (1).jpeg640 (1).jpeg

总结



  1. 通过 FVM 管理多个 Flutter SDK 版本,仅在鸿蒙调测打包时,切换到 ohos-flutter SDK
  2. 通过 apps 壳工程,将鸿蒙化适配的代码,尽量在 ohos_app 项目中完成。通过 pub 包管理的 dependency_overrides 配置,逐个替换鸿蒙化的三方库
  3. 通过 melos 管理多包项目,Flutter 项目进行模块化、组件化、插件化拆分,职责分离,平台抽象,不同平台组合打包,有效解决平台不一致问题

参考资料



目录
相关文章
|
17小时前
|
缓存 Java 测试技术
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
13 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
|
13天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
37 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
16天前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
118 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
24天前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
75 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
26天前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
27 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
26天前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
116 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
29天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
79 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
1月前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
80 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
1月前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
36 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
3天前
鸿蒙开发:了解@Builder装饰器
@Builder装饰是鸿蒙UI开发中,非常重要的一个装饰器,在实际的开发中,合理且正确的使用,能够让我们的代码更加的简洁,有两点需要注意,一是,是用私有还是全局,取决于当前的组件的复用机制,如果多个页面都使用了,建议以全局为主;二是传参的动态更新,有更新就使用引用参数传递,没有更新按值传递即可。
50 28