如何使用 Flutter 开发 HarmonyOS 应用

文章目录

- - [为什么使用 Flutter 来开发？](#为什么使用 Flutter 来开发？)
  - [搭建 Flutter 开发环境](#搭建 Flutter 开发环境)
  - - [mac 环境变量示例](#mac 环境变量示例)
    - [win 环境变量参考](#win 环境变量参考)
    - 验证环境变量是否配置成功
    - [集成与调试 Flutter OH SDK](#集成与调试 Flutter OH SDK)
    - [Flutter 开发环境搭建](#Flutter 开发环境搭建)
  - [第一个 Flutter OH 程序](#第一个 Flutter OH 程序)
  - [其它常用 Flutter OH 命令](#其它常用 Flutter OH 命令)
  - 题外话
  - [Flutter OH 参考文档](#Flutter OH 参考文档)

Author：Gorit

Date：2026年3月24日

Development：win 11

本教程适用于有一定鸿蒙应用开发基础的开发者或有 Flutter 开发经验的开发者，希望借助 Flutter 的跨端开发能力开发出自己的 app

为了方便表述：

后续采用 Flutter OH 表达

为什么使用 Flutter 来开发？

答：Flutter 可以编写一套代码。同时编译成 Android、IOS、HarmonyOS 应用，并且基于 Flutter 的自绘引擎，可以达到高还原度，且性能不输原生应用的体验效果

搭建 Flutter 开发环境

虽然 Google 官方并没有对 Flutter 增加 OpenHarmony 的支持，但是 OpenHarmony 社区却对 Flutter 增加了适配 ------ 基于 OpenHarmony 的 Flutter SDK

关于教程方面，主要是配置 Java 17 SDK、DevEco Studio、Flutter OH SDK 及相关的环境变量，

DevEco Studio 直接在 HarmonyOS 官网下载即可，这里不再过多赘述，下载好后，如果没有真机设备，那就用模拟器也可以

mac 环境变量示例

shell 复制代码

# 配置JDK 17
export JAVA_HOME=<JAVA_HOME path>/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH

# 配置OpenHarmony SDK, ohpm, hvigor, node
export TOOL_HOME=/Applications/DevEco-Studio.app/Contents # mac环境
export DEVECO_SDK_HOME=$TOOL_HOME/sdk # command-line-tools/sdk
export PATH=$TOOL_HOME/tools/ohpm/bin:$PATH # command-line-tools/ohpm/bin
export PATH=$TOOL_HOME/tools/hvigor/bin:$PATH # command-line-tools/hvigor/bin
export PATH=$TOOL_HOME/tools/node/bin:$PATH # command-line-tools/tool/node/bin

#配置Flutter
export PUB_CACHE=~/PUB
export PATH=<flutter_flutter path>/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

win 环境变量参考

在环境变量面板，添加以下配置：

① 配置配置 JDK 17

变量	值	作用域
`JAVA_HOME`	`<JDK path >`	系统变量
`Path`	`%JAVA_HOME%\bin`	追加到现有值

② 配置 OpenHarmony SDK ,ohpm, hvigor, node

变量	值	作用域
`TOOL_HOME`	`<Deveco-studio Path>`	系统变量
`DEVECO_SDK_HOME`	`%TOOL_HOME%\sdk`	系统变量
`Path`	`%TOOL_HOME%\tools\ohpm\bin`	系统变量
`Path`	`%TOOL_HOME%\tools\hvigor\bin`	系统变量
`Path`	`%TOOL_HOME%\tools\node\bin`	系统变量

③ 配置 Flutter

变量	值	作用域
`PATH`	`<flutter_flutter Path>\bin`	系统变量
`PUB_CACHE`	`<PUB Path>`	系统变量
`PUB_HOSTED_URL`	`https://pub.flutter-io.cn`	系统变量
`FLUTTER_STORAGE_BASE_URL`	`https://storage.flutter-io.cn`	系统变量

验证环境变量是否配置成功

验证 JDK 17

shell 复制代码

java -version

验证 Flutter OH SDK 是否生效（以下为 Flutter 原生命令）

shell 复制代码

# 第一次可能会下载Dart SDK
dart --version

flutter --version

运行结果

集成与调试 Flutter OH SDK

shell 复制代码

flutter doctor -v

可以看到 Flutter 和 OH 的工具链都是 ok，环境搭建就完成了

具体步骤可以直接官方指导文档------OpenHarmony版Flutter环境搭建指导

PS：官方虽然推荐是在 mac 下进行开发，但是实际我在 win 环境也完整的将一个 flutter三方库（flutter_background_service）完成鸿蒙化的适配开发

Flutter 开发环境搭建

除了 DevEco 以外，我们还需要用到 vscode，分别安装 Flutter 和 Dart 的插件即可，具体的步骤就不详细概述，可以参考文档配置即可~

需要了解 Flutter 基础（有经验的可以跳过）

Dart 语言语法
Flutter 应用 Application、package、plugin 的关系和作用
Flutter 程序的基本概念（Flutter 中一切皆为 widget）
...

第一个 Flutter OH 程序

创建一个 Flutter OH 工程

shell 复制代码

# 创建工程 方式一 该方式只创建了ohos平台
flutter create --platforms ohos <projectName> 

# 创建工程 方式二 该方式创建了android,ios,ohos三个平台
flutter create  <projectName> 

# 进入工程根目录编译hap包
flutter build hap --debug

默认执行第一个命令即可

使用 DevEco 打开 demo/ohos 目录：

等待完成编译构建，手动解决报错

打开模拟器

完成手动签名

以上步骤完成后，执行 flutter run 即可看到 flutter app 在 HarmonyOS 模拟器上运行起来了

其它常用 Flutter OH 命令

shell 复制代码

F# 创建 package项目
flutter create --platforms ohos,android,ios multi_entry_ohos

# 创建 plugin 项目
flutter create --platforms ohos,android,ios multi_entry_ohos --template=plugin

# 添加平台支持（插件）
flutter create -t plugin --platforms <platforms>

题外话

没记错的话，Flutter 发布了专门给 AI Agents 用的专门的 skill，用 AI 开发 Flutter 应用会变得事半功倍

Flutter OH 参考文档

$1$ Flutter OH 文档指引

$2$ Flutter OH 学习 Demo

$3$ Flutter 官方文档