01 Flutter for OpenHarmony

Flutter与DevEco Studio开发环境搭建指南

目录

第一阶段:环境准备与核心工具安装

在Windows上开发,首先要搭建好"地基"(Flutter)和"房子"(DevEco Studio)。

1. 系统检查

  • 操作系统:Windows 10/11 (64位)
  • 硬件要求:建议8GB+内存,100GB+硬盘空间
  • 前置软件 :确保已安装Git for Windows (配置环境变量git --version可用)

2. 安装Flutter SDK

  1. 下载 :访问Flutter官网或镜像站,下载Windows版本的.zip压缩包
  2. 解压 :将压缩包解压到一个全英文、无空格 的路径(例如D:\src\flutter
  3. 配置环境变量
    • 系统变量 Path:添加D:\src\flutter\bin(替换为你的实际路径)
    • 用户变量(新增)
      • PUB_HOSTED_URL = https://pub.flutter-io.cn
      • FLUTTER_STORAGE_BASE_URL = https://storage.flutter-io.cn
  4. 验证 :打开新的CMD窗口,输入flutter --version,若显示版本号则成功

3. 安装DevEco Studio

  1. 下载 :访问华为开发者联盟官网,下载Windows(64-bit)版本的.exe安装包
  2. 安装
    • 双击运行,安装路径必须全英文
    • 建议勾选"添加到环境变量"
  3. 首次配置
    • 启动后选择Do not import settings
    • Node.js配置 :版本需18.x或更高。如果系统已安装高版本,可指定路径;否则让IDE自动下载
    • SDK配置 :选择SDK安装路径,勾选HarmonyOS SDK进行下载

第二阶段:环境变量详细配置

为了确保Flutter能够顺利调用DevEco Studio中的工具链,需要详细配置环境变量。

1. 核心路径变量配置

在系统变量Path中新建以下条目:

工具类型 变量值(路径) 说明
SDK工具链 D:\Huawei\DevEcoStudio\sdk\default\openharmony\toolchains 包含hdc(设备连接工具)等核心命令
OHPM(包管理) D:\Huawei\DevEcoStudio\tools\ohpm\bin 鸿蒙包管理工具
Node.js D:\Huawei\DevEcoStudio\tools\node DevEco自带的Node环境
Hvigor(构建工具) D:\Huawei\DevEcoStudio\tools\hvigor\bin 鸿蒙构建工具
Flutter SDK D:\src\flutter\bin Flutter路径

2. 专用环境变量配置

变量名 变量值 作用说明
DEVECO_SDK_HOME D:\Huawei\DevEcoStudio\sdk 指向鸿蒙SDK的根目录
JAVA_HOME D:\Huawei\DevEcoStudio\jbr 指向DevEco自带的JDK

3. 验证配置

配置完成后,重启终端,依次输入以下命令验证:

复制代码
hdc -v      # 检查鸿蒙工具链
ohpm -v     # 检查包管理器
flutter doctor -v  # 检查Flutter环境

第三阶段:项目创建与构建

Flutter项目需要先"构建"出鸿蒙工程,才能被DevEco Studio识别。

1. 创建项目

打开终端,执行以下命令:

复制代码
# 创建多平台项目
flutter create my_app
cd my_app

2. 构建鸿蒙工程

在项目根目录下执行构建命令:

复制代码
# 构建调试包
flutter build hap --debug

第四阶段:配置模拟器与运行

1. 启动模拟器

  1. 打开DevEco Studio
  2. 点击菜单栏Tools -> Device Manager
  3. 选择Phone设备类型,下载并启动模拟器镜像

2. 运行项目

  1. 打开工程 :在DevEco Studio中,选择File -> Open,选择Flutter项目下的**ohos**文件夹
  2. 选择设备:在顶部工具栏的设备下拉框中,选择启动的模拟器
  3. 点击运行 :点击绿色的三角形Run按钮(或按Shift+F10

通过以上步骤,就可以在Windows系统上成功搭建Flutter与DevEco Studio的开发环境,并顺利运行鸿蒙应用。

欢迎加入开源鸿蒙跨平台社区: https://openharmonycrossplatform.csdn.net

相关推荐
autumn20054 小时前
Flutter 框架跨平台鸿蒙开发 - 虚拟纪念馆
flutter·华为·harmonyos
不爱吃糖的程序媛4 小时前
拷贝或克隆其他 Flutter OH 项目到本地后无法运行
flutter
2301_822703205 小时前
渐变壁纸生成:基于鸿蒙Flutter的跨平台壁纸创建工具
flutter·华为·harmonyos·鸿蒙
人间打气筒(Ada)5 小时前
「码动四季·开源同行」HarmonyOS应用开发:常见组件
华为·开源·harmonyos·组件·布局·鸿蒙开发
牛马1116 小时前
Flutter BackdropFilter filter
flutter
si莉亚6 小时前
ROS2安装EVO工具包
linux·开发语言·c++·开源
Utopia^8 小时前
Flutter 框架跨平台鸿蒙开发 - 旅行预算管家
flutter·华为·harmonyos
M ? A8 小时前
Vue 迁移 React 实战:VuReact 一键自动化转换方案
前端·vue.js·经验分享·react.js·开源·自动化·vureact
李李李勃谦8 小时前
Flutter 框架跨平台鸿蒙开发 - 星空识别助手
flutter·华为·harmonyos
Mars酱8 小时前
1分钟编写贪吃蛇 | JSnake贪吃蛇单机版
java·后端·开源