Flutter项目适配鸿蒙

Flutter项目适配鸿蒙

前言

目前市面上使用Flutter技术站的app不在少数,对于Flutter的项目,可能更多的是想直接兼容Harmonyos,而不是直接在重新开发一个新的鸿蒙项目。

那么Flutter如何兼容鸿蒙平台了?接下来我们探讨下Flutter项目是如何兼容鸿蒙的。

参考文档: flutter_sample

Flutter项目适配鸿蒙

新工程直接支持ohos

如果你的项目现在才刚开开始启动, 那么你完全可以创建一个新的Flutter项目,直接支持Android、iOS、ohos 等平台。

构建新项目

创建项目指令:flutter cteate --platforms android,ios,ohos(支持的平台) <projectname(项目名称)>

由于Flutter官方并没有明确表示支持鸿蒙,所以无法使用Android Studio等编译工具直接创建一个支持ohos(鸿蒙)平台的Flutter项目。

命令行输入指令:flutter create --platforms android,ios,ohos flutter_test_demo_gy

执行结果:

工程结果目录:

根据目录我们看出, 其实跟原来Flutter创建的工程差别不大, 只是多了一个ohos的工程目录。这个目录就是我们所说的鸿蒙工程。

编译

我们可以打开ohos目录下的鸿蒙工程,然后在终端执行命令flutter build hap

当我们第一次打开ohos功臣, 同步项目时,会报如下错误:

这个错误是由找不到fluttter.har包的问题, 因为此时你还没有编译, 等你执行完编译指令后就没有这个错误了。

如上图执行成功后, 我们可以看到ohos项目把Flutter项目的东西打包成一个har包给ohos项目引用着。

注意:Flutter鸿蒙化项目只能运行在真机上或者arm架构设备的模拟器上

运行

在编译完项目之后, 你可以按照鸿蒙项目的开发流程一样,配置证书、直接点击编译工具运行项目, 也可以使用原来的Flutter指令来运行:flutter run

运行结果:

Flutter页面正常展示,代表Flutter项目已经成功运行在鸿蒙手机上。

如果后续需要开发新的功能, 我们需要再Flutter中编写相关代码, 然后在走编译、运行流程。

适配已有的Flutter项目

如下图,我现在有一个已经存在Flutter项目:

从上面的结构目录看, 这个一个不支持ohos平台的项目,我们如何让这个已经存在的Flutter兼容鸿蒙平台?

  1. cd 进入项目根目录
  2. 执行指令flutter create ./ --platform ohos 创建鸿蒙模块

执行结果:

执行完命令后的目录结构:

然后我们就可以打开ohos鸿蒙工程, 直接编译、运行到手机上。

运行结果:

相关推荐
Utopia^7 小时前
鸿蒙flutter第三方库适配 - 联系人备份工具
flutter·华为·harmonyos
音视频牛哥9 小时前
国产化最后一公里:鸿蒙 NEXT 低延迟音视频技术方案破局之路
音视频·harmonyos·鸿蒙next·鸿蒙rtmp播放器·鸿蒙rtsp播放器·鸿蒙next rtsp播放器·鸿蒙next rtmp播放器
HwJack2012 小时前
HarmonyOS UI 开发中eventHub用标准化 OHMUrl 拿捏集成态 HSP
华为·harmonyos
音视频牛哥12 小时前
鸿蒙 NEXT 行业视频方案选型:消费级播放器、自研、SmartMediaKit,哪条路走得通?
华为·harmonyos·大牛直播sdk·鸿蒙rtsp播放器·鸿蒙next rtsp播放器·鸿蒙next rtmp播放器·鸿蒙 rtmp播放器
念格14 小时前
Flutter 仿微信输入框最佳实践:自适应高度 + 超行数智能切换全屏
前端·flutter
程序员老刘15 小时前
《Flutter跨平台开发核心技巧与应用》新书来了
flutter·ai编程·客户端
Geek_Vision16 小时前
鸿蒙原生APP接入小程序运行能力:数字园区场景实战复盘
微信小程序·harmonyos
空中海16 小时前
7.1 Flutter 性能模型
flutter
weixin_4434785116 小时前
Flutter学习之第三方组件:视频播放器控件
学习·flutter·音视频
音视频牛哥16 小时前
鸿蒙 NEXT 下 RTSP/RTMP 播放器如何调用录像与快照?
华为·harmonyos·鸿蒙rtmp播放器·鸿蒙rtsp播放器·鸿蒙next rtsp播放器·鸿蒙next rtmp播放器·鸿蒙rtsp rtmp流录像