【开源鸿蒙跨平台开发先锋训练营】Day2 OpenHarmony版Flutter 3.27版本开发环境搭建

OpenHarmony版Flutter 3.27版本开发环境搭建

[OpenHarmony版Flutter 3.27版本开发环境搭建](#OpenHarmony版Flutter 3.27版本开发环境搭建)

[1 概述](#1 概述)

[1.1 Flutter简介](#1.1 Flutter简介)

[1.2 开发环境](#1.2 开发环境)

[1.3 前提条件](#1.3 前提条件)

[1.4 安装必备](#1.4 安装必备)

[2 配置HarmonyOS SDK环境](#2 配置HarmonyOS SDK环境)

[2.1 系统设置](#2.1 系统设置)

[2.2 配置 TOOL_HOME 变量](#2.2 配置 TOOL_HOME 变量)

[2.3 配置 DEVECO_SDK_HOME 变量](#2.3 配置 DEVECO_SDK_HOME 变量)

[2.4 配置 PATH 变量](#2.4 配置 PATH 变量)

[2.5 配置 HDC_HOME 变量](#2.5 配置 HDC_HOME 变量)

[3 下载安装flutter SDK](#3 下载安装flutter SDK)

[3.1 设置存储位置](#3.1 设置存储位置)

[3.2 克隆仓库至本地](#3.2 克隆仓库至本地)

[3.3 查看可用分支](#3.3 查看可用分支)

[3.4 查看版本标签](#3.4 查看版本标签)

[3.5 切换到开发分支](#3.5 切换到开发分支)

[4 配置Flutter环境](#4 配置Flutter环境)

[4.1 配置 PUB_CACHE 变量](#4.1 配置 PUB_CACHE 变量)

[4.2 配置 PUB_HOSTED_URL 变量](#4.2 配置 PUB_HOSTED_URL 变量)

[4.3 配置 FLUTTER_STORAGE_BASE_URL 变量](#4.3 配置 FLUTTER_STORAGE_BASE_URL 变量)

[4.4 配置 PATH 变量](#4.4 配置 PATH 变量)

[4.5 检查Flutter版本](#4.5 检查Flutter版本)

[4.6 诊断flutter环境](#4.6 诊断flutter环境)

[5 创建 Flutter 项目](#5 创建 Flutter 项目)

[5.1 选择Flutter项目文件夹](#5.1 选择Flutter项目文件夹)

[5.2 配置HAP包](#5.2 配置HAP包)

[6 使用模拟器运行Flutter项目](#6 使用模拟器运行Flutter项目)

[6.1 DevEco Studio打开项目](#6.1 DevEco Studio打开项目)

[6.2 启动模拟器](#6.2 启动模拟器)

[6.3 配置调试签名](#6.3 配置调试签名)

[6.4 运行应用](#6.4 运行应用)

[7 代码提交至 AtomGit 公开仓库](#7 代码提交至 AtomGit 公开仓库)

[7.1 在 AtomGit 创建个人公开仓库](#7.1 在 AtomGit 创建个人公开仓库)

[7.2 准备本地工程与 Git 环境](#7.2 准备本地工程与 Git 环境)

[7.3 本地工程关联 AtomGit 仓库](#7.3 本地工程关联 AtomGit 仓库)

[7.4 代码提交至 AtomGit 仓库](#7.4 代码提交至 AtomGit 仓库)

[7.5 验证推送结果](#7.5 验证推送结果)

本文介绍在Windows 11系统上搭建OpenHarmony版Flutter 3.27版本开发环境搭建的流程。

主要内容包括：环境配置、源码克隆、Flutter SDK安装等关键步骤。OpenHarmony版Flutter是Flutter框架针对HarmonyOS/OpenHarmony系统的适配版本，开发者可借此实现一套代码多平台运行（Android/iOS/HarmonyOS）。

1 概述

1.1 Flutter简介

Flutter是Google开发的跨平台UI框架，用于通过一套代码库高效构建跨平台应用。‌它采用Dart 编程语言驱动，支持将应用编译为原生机器代码或 JavaScript，从而实现高性能渲染和多端一致性。Flutter 的核心优势在于‌一次开发、多端部署‌，支持移动（iOS/Android）、Web、桌面（Windows/macOS/Linux）及嵌入式设备。

OpenHarmony版Flutter 是Flutter针对OpenHarmony系统的适配版本，可以让你用Flutter开发HarmonyOS/OpenHarmony应用。

1.2 开发环境

本文档基于以下开发环境进行测试：

1. 设备规格：

处理器：AMD Ryzen 5 5500U with Radeon Graphics（2.10 GHz）

内存：24.0 GB（21.8 GB 可用）

系统类型：64 位操作系统, 基于 x64 的处理器

2. Windows规格：

版本：Windows 11 专业版

版本号：23H2

1.3 前提条件

在开始搭建环境之前，请确保已经完成以下软件的安装：

安装Git- 版本控制工具

参考链接：https://blog.csdn.net/m0_74451345/article/details/155858889?spm=1001.2014.3001.5502

安装 DevEco Studio - HarmonyOS/OpenHarmony开发IDE

参考链接：https://blog.csdn.net/m0_74451345/article/details/155905981?spm=1001.2014.3001.5502

安装 Java 17 - Java开发环境

参考链接：https://blog.csdn.net/m0_74451345/article/details/155857985?spm=1001.2014.3001.5502

请按照顺序完成以上软件的安装，特别是DevEco Studio和Java 17，必须要安装。

1.4 安装必备

在开始之前，要确保满足以下条件：

已完成以上所有软件的安装
已注册并实名认证华为开发者账号（用于签名和模拟器）
网络连接正常（需要下载大量文件）
至少10 GB可用磁盘空间（包含 SDK、Flutter、模拟器等）

2 配置HarmonyOS SDK环境

为了使 Flutter 能够找到HarmonyOS SDK和相关工具，我们需要配置一些环境变量。这些变量将告诉系统在哪里找到DevEco Studio的安装路径和SDK。

2.1 系统设置

打开电脑设置------系统------系统信息，找到"高级系统设置"点击。

在系统属性面板中，点击 "环境变量(N)..." 按钮。

打开环境变量设置界面。

2.2 配置 TOOL_HOME 变量

TOOL_HOME：指向 DevEco Studio 的安装目录，是其他环境变量的基础。

在 "系统变量" 区域，点击 "新建(W)..." 按钮。

填写变量信息：

变量名(N)：TOOL_HOME

变量值(V)：DevEco Studio 的实际安装路径

如何找到你的 DevEco Studio 安装路径？

默认路径通常是：C:\Users\你的用户名\AppData\Local\Huawei\DevEco Studio

或者在文件资源管理器中找到 DevEco Studio 的安装文件夹

复制完整路径，注意安装路径中不要有多余的空格

比如博主安装路径如下。

D:\HarmonyOS\DevEcoStudio

点击 "确定" 按钮保存。

2.3 配置 DEVECO_SDK_HOME 变量

DEVECO_SDK_HOME：指向 SDK 的存储目录，通常位于 DevEco Studio 安装目录下的 sdk 文件夹。

在 "系统变量" 区域，点击 "新建（W）..." 按钮。

填写变量信息：

变量名(N)：DEVECO_SDK_HOME

变量值(V)：%TOOL_HOME%\sdk

注意：%TOOL_HOME% 会引用之前设置的 TOOL_HOME 变量值，这样如果 DevEco Studio 安装路径改变，只需要修改 TOOL_HOME 即可。

点击 "确定" 按钮保存。

2.4 配置 PATH 变量

PATH 变量负责告诉系统在哪里查找可执行文件。

在这里我们需要添加 DevEco Studio 的工具路径。

在"系统变量"区域，找到"Path"变量名。
点击 "编辑(I)..." 按钮，打开编辑环境变量窗口。

点击 "新建(N)" 按钮，依次添加以下三个路径（分别添加，每次点击"新建(N)" 按钮）：

OpenHarmony 包管理器：%TOOL_HOME%\tools\ohpm\bin

构建工具：%TOOL_HOME%\tools\hvigor\bin

Node.js 运行时：%TOOL_HOME%\tools\node

点击 "确定" 按钮保存。

2.5 配置 HDC_HOME 变量

HDC_HOME：指向 HarmonyOS 设备连接工具（HDC）的路径，用于连接真机或模拟器。

在 "系统变量" 区域，点击 "新建(W)..." 按钮。

填写变量信息：

变量名（N）：HDC_HOME

变量值（V）：%DEVECO_SDK_HOME%\default\openharmony\toolchains

点击 "确定" 按钮保存。

注意：这个路径依赖于 SDK 的下载，如果还没有下载 SDK，请先完成 DevEco Studio 的 SDK 下载步骤。

最后，依次点击所有打开的窗口的 "确定" 按钮，保存所有配置。

注意：配置环境变量后，必须关闭所有已打开的命令提示符窗口，然后重新打开，环境变量才会生效。

3 下载安装flutter SDK

（flutter SDK）OpenHarmony 版 Flutter 的源码托管在开源仓库中，我们需要使用 Git 将其克隆到本地。

3.1 设置存储位置

首先，我们要选择一个空间充足的磁盘位置将 Flutter 源码克隆到哪里。

例如博主在这里选择在D盘下创建目录Tools：

打开"文件资源管理器→进入D盘根目录→右键→新建→文件夹，命名为Tools（最终路径：D:\Tools），用于存放Flutter SDK。

D:\Tools\flutter_flutter #注意这里的flutter_flutter目录不用我们创建，会在后面克隆过程中下载创建

注意：

选择一个路径后，后续配置环境变量时会用到这个路径。

建议路径中不要包含中文字符，避免潜在问题。

确保选择的磁盘有足够的空间（至少 2 GB）。

3.2 克隆仓库至本地

打开命令提示符（CMD）或 Git Bash，此处博主在D盘选择任意文件夹右击，点击"Open Git Bash here"通过Git Bash进行后续操作。

切换到你想存放 Flutter 源码的目录，例如我刚刚创建的：

复制代码

cd D:\Tools

执行克隆命令：

复制代码

git clone https://gitcode.com/openharmony-tpc/flutter_flutter.git

注意：

克隆过程需要几分钟，取决于网络速度，请耐心等待。

也可以使用 https://atomgit.com/openharmony-tpc/flutter_flutter 作为仓库地址。

3.3 查看可用分支

克隆完成后，进入 Flutter 目录（例如我前面创建的：D:\Tools\flutter_flutter）并查看所有分支：

复制代码

cd flutter_flutter
git branch -a

注意：-a 参数会显示所有分支（包括远程分支）。

3.4 查看版本标签

查看可用的版本标签（tag）：

复制代码

git tag

注意：标签通常对应稳定的版本，分支用于开发版本。

3.5 切换到开发分支

根据需求选择合适的分支。本文博主以oh-3.27.4-dev 分支为例：

复制代码

git checkout -b oh-3.27.4-dev origin/oh-3.27.4-dev

如果分支已存在：

复制代码

git checkout oh-3.27.4-dev

使用命令，验证当前分支状态：

复制代码

git branch

注意：由于之前博主使用oh-3.32.4-dev 分支在在模拟器中运行项目遇到点问题，以下截图都是关于oh-3.32.4-dev 分支的。在此说明本文档使用oh-3.27.4-dev 分支，执行结果与oh-3.32.4-dev 分支结果截图基本相符。

注意：

-b 参数会创建新分支并切换过去。

如果分支已经存在，使用 git checkout 命令即可。

当前分支前有 * 标记，如图中 "* oh-3.32.4-dev"（oh-3.27.4-dev 分支结果为：* oh-3.27.4-dev）。

4 配置Flutter环境

要使系统能够识别Flutter命令，需要配置Flutter相关的环境变量。

打开电脑设置------系统------系统信息，找到"高级系统设置"点击。

在系统属性面板中，点击 "环境变量(N)..." 按钮。

打开环境变量设置界面。

4.1 配置 PUB_CACHE 变量

PUB_CACHE ：Flutter/Dart 包的缓存目录。

在 "系统变量(S)" 区域，点击 "新建(W)..." 按钮。
填写变量信息：

变量名(N)：PUB_CACHE

变量值(V)：D:\PUB（自定义的路径）

点击 "确定" 按钮保存。

注意：

变量值(V)中填写内容必须确保路径存在，如果不存在，系统会自动创建。

这个目录会存储下载的 Flutter 包，建议选择空间充足的磁盘。

4.2 配置 PUB_HOSTED_URL 变量

PUB_HOSTED_URL：Dart 包的镜像源地址，使用国内镜像可以加快下载速度。

在 "系统变量" 区域，点击 "新建(W)..." 按钮。
填写变量信息：

变量名(N)：PUB_HOSTED_URL

变量值(V)：https://pub.flutter-io.cn

点击 "确定" 按钮保存。

4.3 配置 FLUTTER_STORAGE_BASE_URL 变量

FLUTTER_STORAGE_BASE_URL：Flutter 存储的镜像源地址。

在 "系统变量" 区域，点击 "新建(W)..." 按钮。
填写变量信息：

变量名(N)：FLUTTER_STORAGE_BASE_URL

变量值(V)：https://storage.flutter-io.cn

点击 "确定" 按钮保存。

4.4 配置 PATH 变量

将之前克隆到的Flutter的 bin 目录添加到 PATH 变量中，这样可以在任何地方使用flutter命令。

在 "系统变量" 区域，找到 "Path" 变量名。
点击 "编辑(I)..." 按钮，打开编辑环境变量窗口。
点击 "新建(N)" 按钮，添加 Flutter 的实际路径：

注意：

路径必须是 Flutter 源码目录下的 bin 文件夹，例如：

博主之前克隆到 D:\Tools\flutter_flutter 目录下，

则添加 D:\Tools\flutter_flutter\bin

点击 "确定" 按钮保存。

4.5 检查Flutter版本

在电脑PowerShell或Git中执行检查Flutter版本命令：

复制代码

flutter --version

4.6 诊断flutter环境

Win+R组合键后输入cmd打开命令提示符，或者打开Windows PowerShell。

运行以下命令，诊断flutter环境：

复制代码

flutter doctor -v

诊断环境显示结果中：Flutter、OpenHarmony至少应该显示为 [✓] 。

5 创建 Flutter 项目

环境配置好后，我们就可以创建第一个 Flutter 项目。

5.1 选择Flutter项目文件夹

首先，我们在电脑上选择一个空间充足的磁盘位置，比如博主在这里选择在D盘下创建一个名为"Flutter_HmProject"的文件夹来存放Flutter 项目。

打开Windows PowerShell后cd进入到该目录下。

cd D:\Flutter_HmProject\

接下来进行Flutter 项目创建。

项目创建有两种方式：

复制代码

# 只创建 OpenHarmony 平台工程
flutter create --platforms ohos <项目名称>
# 创建多平台工程（Android、OpenHarmony等）
flutter create <项目名称>

例如：博主在这里只创建OpenHarmony 平台项目

复制代码

# 创建 OpenHarmony 平台Flutter 项目
flutter create --platforms ohos flutter_harmonyos

--platforms ohos：明确指定生成鸿蒙工程目录。

flutter_harmonyos：项目名称。

5.2 配置HAP包

HAP（HarmonyOS Ability Package）是HarmonyOS专属的应用安装包格式。

我们需要把写的 Flutter 项目，转换成鸿蒙系统能安装运行的应用安装包。

首先创建完项目后，进入到flutter_harmonyos项目目录中：

复制代码

cd <项目名称>

例如：cd flutter_harmonyos

在项目D:\Flutter_HmProject\flutter_harmonyos目录执行编译命令：

复制代码

flutter build hap --debug

参数说明：

flutter build hap：告诉 Flutter 工具 "我要把这个 Flutter 项目，编译成鸿蒙的 HAP 安装包"；

--debug：指定编译的是调试版本，开发阶段用这个版本，方便你调试代码、看日志（开发时使用）

--release：编译发布版本（发布应用时会用/正式发布时使用）

6 使用模拟器运行Flutter项目

6.1 DevEco Studio打开项目

打开 DevEco Studio。
选择 "Open"。
找到刚才创建的Flutter 项目目录，选择其中的 ohos 文件夹点击"ok"打开。

6.2 启动模拟器

在 DevEco Studio 顶部菜单栏，找到"No Devices"下拉。
点击"Device Manager"打开设备管理界面设备管理图标。

6.3 配置调试签名

按照前面配置完HAP包给出的步骤，依次进行以下操作：

在DevEco Studio打开ohos工程后配置调试签名(File -> Project Structure -> Signing Configs 勾选Automatically generate signature)

登录已经实名认证的华为开发者账号，完成后依次点击Apply、OK确认。

6.4 运行应用

点击 DevEco Studio 工具栏的运行按钮（绿色三角形图标）。

等待应用编译和运行。

应用成功运行后，我们就会在模拟器上看到 Flutter 应用的界面。

7 代码提交至 AtomGit 公开仓库

7.1 在 AtomGit 创建个人公开仓库

点击 AtomGit 页面右上角 "新建" 下拉菜单，选择 "新建项目"；

填写仓库基础信息：

项目名称：填写有辨识度的名称（如flutter_HmProject）；

项目路径：自定义项目路径；

项目介绍：填写你的项目介绍信息；

是否公开：选择 "公开项目"。

点击 "创建项目" 按钮，完成公开仓库的建立。

7.2 准备本地工程与 Git 环境

确认本地工程文件完整性：确保工程根目录包含全部文件（lib源码、ohos鸿蒙工程配置、build编译文件等）；

初始化 Git 仓库（若未初始化）：

打开终端，进入工程根目录，比如我之前创建的D:\Flutter_HmProject\flutter_harmonyos项目，

cd D:\Flutter_HmProject\flutter_harmonyos

执行以下命令：

复制代码

git init

配置 Git 用户信息/Git 全局设置（首次使用需配置）：

git config --global user.name "你的AtomGit用户名"

git config --global user.email "你的AtomGit绑定邮箱"

输入以下命令，查看当前的 Git 配置信息，确认用户名和邮箱是否已经正确设置：

git config --list

7.3 本地工程关联 AtomGit 仓库

将本地工程与 AtomGit 远程仓库关联（仓库地址是你的 AtomGit 仓库地址）：

复制代码

git remote add origin https://atomgit.com/你的用户名/仓库名称.git

7.4 代码提交至 AtomGit 仓库

将本地工程文件添加到 Git 暂存区：

git add .

提交代码（填写清晰的 commit 信息）：

git commit -m "Initial commit: Flutter+鸿蒙跨平台工程初始化"

（后续也可进入本地工程终端，执行修改命令：git commit --amend，将 commit 信息进行修改，修改完成保存后使用命令强制推送更新：git push -f origin main）

将代码推送至 AtomGit 远程仓库：

执行推送命令（首次推送关联分支）：

复制代码

git push -f origin main

（提示身份验证，输入你的 AtomGit 账号 + 密码，或用访问令牌替代密码）。

7.5 验证推送结果

刷新你的 AtomGit 仓库页面，确认工程配置文件、源码、资源、调试日志等文件已全部显示，完成代码提交任务。

欢迎加入开源鸿蒙跨平台社区：

https://openharmonycrossplatform.csdn.net