Flutter项目兼容鸿蒙Next系统

一、环境搭建:

1.1 下载鸿蒙DevEco Studio开发工具。

  • 下载地址:下载中心 | 华为开发者联盟-HarmonyOS开发者官网,共建鸿蒙生态
  • 下载之前需要先登录,后面的模拟器创建还要开发者验证、审核啥的,好在审核进度还可以,我这边提交申请后差不多两个小时审核通过。
  • 找到自己电脑系统匹配的版本下载安装步骤比较简单,一步步next直到完成即可,新版本的工具已经集成node和ohpm等环境进去了,不用单独下载安装了。

1.2 下载鸿蒙版flutter

1.3 环境变量配置(mac 电脑)

复制代码
export TOOL_HOME=/Applications/DevEco-Studio.app/Contents/
export DEVECO_SDK_HOME=$TOOL_HOME/sdk 
export PATH=$TOOL_HOME/tools/ohpm/bin:$PATH
export PATH=$TOOL_HOME/tools/hvigor/bin:$PATH 
export PATH=$TOOL_HOME/tools/node/bin:$PATH 

1.4 下载Java JDK 17并配置

1.5 检测环境配置是否正确(Futter与OpenHarmony都OK为配置正确)如下图:

复制代码
flutter doctor -v

二、创建项目

2.1 新项目创建方式:

复制代码
flutter create --platforms android,ios,ohos project_name

2.2 已有Flutter项目创建方式:

复制代码
flutter create --platforms ohos .

3.3 创建完会生成一个ohos文件夹,如下图:

三、使用DevEco Studio 打开 ohos文件夹目录

3.1 打开项目会出现这种错误:如下图:(没有的可以忽略)

3.2 解决方式在根目录下运行一下代码:

复制代码
flutter build hap

3.3 出现成功结果就可以运行到真机或者模拟器。如下图:

3.4 运行模拟器成功的界面如下图:

相关推荐
郑梓斌1 小时前
Luban 2 Flutter:一行代码在 Flutter 开发中实现图片压缩功能
flutter·ios
特立独行的猫a1 小时前
鸿蒙PC三方库编译libiconv链接报错,解决 libtool 链接参数丢失问题过程总结
harmonyos·交叉编译·libiconv·三方库·鸿蒙pc·libtool
哈__1 小时前
Flutter 开发鸿蒙 PC 第一个应用:窗口创建 + 大屏布局
flutter·华为·harmonyos
AiFlutter2 小时前
蓝牙调试助手开发(03):概要设计
flutter·低代码平台·aiflutter·aiflutter低代码·flutter低代码开发·蓝牙调试·蓝牙调试助手
特立独行的猫a2 小时前
鸿蒙PC命令行及三方库libiconv移植:鸿蒙PC生态的字符编码基石
harmonyos·交叉编译·libiconv·三方库移植·鸿蒙pc
西西学代码2 小时前
Flutter---框架
前端·flutter
消失的旧时光-19433 小时前
Flutter 与原生通信机制全解析:MethodChannel / EventChannel / BasicMessageChannel,一篇讲透(工程级)
flutter·dart·channel
kirk_wang3 小时前
Flutter Widget核心概念深度解析
flutter·移动开发·跨平台·arkts·鸿蒙
傅里叶3 小时前
Flutter移动端获取相机内参
前端·flutter
RaidenLiu3 小时前
Offstage / Visibility:不可见真的就不消耗性能吗
前端·flutter·性能优化