鸿蒙纪·Flutter卷#02 | 已有 Flutter 项目鸿蒙化 · 3.27.4 版

0.缘起

最近看到了 鸿蒙应用开发者激励计划 2025,力度非常大。感觉可以把之前的 Flutter 项目打包成鸿蒙,上架走一波。首先想到了我的开源项目: RegExpo, 文本正则匹配器。我就给它起个名字叫 正则通 吧,然后让 ChatGPT 给画个牛气轰轰的 logo 图标,走起 ~

移动端 - 亮 移动端 - 暗

接下来两篇文章,就来探索一下,个人开发者,如何把一个 Flutter 项目,上架到鸿蒙商店。本文主要介绍如何把已有的 Flutter 项目鸿蒙化。


1. 鸿蒙 Flutter 环境 · 3.27.X

写上一篇 《鸿蒙纪·Flutter卷#01》 时,鸿蒙最新的 Flutter 环境是 3.22.1,目前最新的 tag 已经支持 Flutter 3.27.X 了。一些环境配置方面的东西就不赘述了,可以参考上一篇。

这也是我一直在使用的 Flutter SDK 版本,正好来试一波能不能用。首先通过 git 更新鸿蒙 SDK,然后切到 3.27.5-ohos-0.1.0-beta 标签:

git pull

git checkout 3.27.5-ohos-0.1.0-beta


2.已有 Flutter 项目,支持鸿蒙

RegExpo 是目前已有的 flutter 项目,目前还不支持鸿蒙,下面就来一起改造吧~

使用鸿蒙的 flutter sdk 以后就将其称为 [h] flutter, 在当前项目下,创建 ohos 项目:

h\] flutter create --platforms ohos .


3. 三方插件的改造

对于三方插件来说,纯 Dart 的库是可以直接在鸿蒙上使用的。比如 RegExpo中用到的 flutter_blocdioflutter_slidable 等 :

而像 path_providersqflite 这样和平台相关的类库,需要兼容鸿蒙的库。他们不在 pub 上,而是由开源项目进行维护。有哪些插件支持了鸿蒙,可以在这个清单列表中查看: 《openharmony平台已兼容库》


在使用时,建议通过 dependency_overrides 覆盖依赖,这样不会影响以前的代码结构:

yaml 复制代码
dependency_overrides:
  sqflite:
    git:
      url: "https://gitee.com/openharmony-sig/flutter_sqflite.git"
      path: "sqflite"
      ref: master
      
  sqflite_common_ffi:
    git:
      url: "https://gitee.com/openharmony-sig/flutter_sqflite.git"
      path: "sqflite_common_ffi"
      ref: master
      
  file_picker:
    git: "https://gitee.com/openharmony-sig/fluttertpc_file_picker.git"
    
  path_provider:
    git:
      url: "https://gitcode.com/openharmony-tpc/flutter_packages.git"
      path: "packages/path_provider/path_provider"

  shared_preferences:
    git:
      url: "https://gitcode.com/openharmony-tpc/flutter_packages.git"
      path: "packages/shared_preferences/shared_preferences"

在项目文件夹下执行 flutter pub get,就可以看到 lock 文件中对应插件已经变成了支持鸿蒙版。


4. 打包项目

对于鸿蒙应用的打包,我推荐你使用 DevEco Studio 来打开项目中的鸿蒙应用。因为生成签名或配置项目在这里比较方面。目前IDE 的版本已经到了 5.1.1 , 请先升级之后再操作:


然后通过 flutter build hap --release 就可以打包为 hap 包了。大小为 19.0 MB 感觉稍微有点大,但还能接受。

h\] flutter build hap --release

此时项目就可以在鸿蒙上跑起来了, 打开模拟器,点击运行。完美展示 ~

主页 数据列表

5.踩坑点

DevEco Studio 5.1.1 有个非常神奇的坑,IDE 的自动签名会认证失败,这样没办法打包。新建一个 Hello World 的项目也是这样:

Error Message: Signature material verification failed, as: Unsupported state or unable to authenticate data.

最后我是自己新建了一个证书,才跑起来的。到这里,本文的目的就完成了,下一篇将会介绍一下鸿蒙应用签名相关的知识,以及如何发布到应用市场。敬请期待 ~

相关推荐
jin12332225 分钟前
基于React Native鸿蒙跨平台地址管理是许多电商、外卖、物流等应用的重要功能模块,实现了地址的添加、编辑、删除和设置默认等功能
javascript·react native·react.js·ecmascript·harmonyos
2601_9499757937 分钟前
Flutter for OpenHarmony艺考真题题库+帮助中心实现
flutter
2501_9209317043 分钟前
React Native鸿蒙跨平台医疗健康类的血压记录,包括收缩压、舒张压、心率、日期、时间、备注和状态
javascript·react native·react.js·ecmascript·harmonyos
王泰虎1 小时前
安卓开发日记,因为JCenter 关闭导致加载不了三方库应该怎么办
android
2501_920931702 小时前
React Native鸿蒙跨平台使用useState管理健康记录和过滤状态,支持多种健康数据类型(血压、体重等)并实现按类型过滤功能
javascript·react native·react.js·ecmascript·harmonyos
2501_921930832 小时前
高级进阶 React Native 鸿蒙跨平台开发:InteractionManager 交互优化
react native·harmonyos
前端不太难2 小时前
HarmonyOS PC 文档模型完整范式
华为·状态模式·harmonyos
子春一3 小时前
Flutter for OpenHarmony:构建一个 Flutter 井字棋游戏,深入解析状态驱动逻辑、胜利判定与极简交互设计
flutter·游戏·交互
雨季6664 小时前
Flutter 三端应用实战:OpenHarmony “极简手势轨迹球”——指尖与屏幕的诗意对话
开发语言·javascript·flutter
ujainu4 小时前
Flutter + OpenHarmony 游戏开发进阶:CustomPainter 手绘游戏世界——从球体到轨道
flutter·游戏·信息可视化·openharmony