Flutter for OpenHarmony 实战：开发环境搭建与基础入门指南（Macbook M1、ARM）

本文详细介绍 Flutter for OpenHarmony 的开发环境搭建流程，涵盖 DevEco Studio 安装、Flutter SDK 配置、项目创建与运行，并通过 Hello World 示例帮助开发者快速入门鸿蒙跨平台开发。

baronbool

254人浏览 · 2026-01-30 15:42:43

baronbool · 2026-01-30 15:42:43 发布

Flutter for OpenHarmony 实战：开发环境搭建与基础入门指南

前言

Flutter 是 Google 推出的一款免费、开源的跨平台 UI 框架，其核心目标是帮助开发者通过一套代码库，高效构建在移动设备（iOS/Android）、桌面端（Windows/macOS/Linux）、Web 端乃至嵌入式设备上都能呈现原生级体验的高性能应用。

随着 Flutter for OpenHarmony 的推出，开发者现在可以使用 Flutter 为鸿蒙设备开发应用，实现真正的"一次开发，多端运行"。

本文你将学到：

DevEco Studio 开发环境的安装与配置
Flutter for OpenHarmony SDK 的获取与设置
创建并运行第一个 Flutter 鸿蒙应用
Dart 语言基础语法入门
Flutter Widget 核心概念理解

一、开发环境概述

1.1 技术栈介绍

Flutter for OpenHarmony 的开发涉及以下核心技术：

技术	说明
Dart	Flutter 的编程语言，支持 AOT 和 JIT 编译
Flutter Framework	UI 框架，提供丰富的 Widget 组件库
OpenHarmony	华为开源的分布式操作系统
DevEco Studio	鸿蒙应用开发 IDE

1.2 环境要求

在开始之前，请确保你的开发机器满足以下要求：

项目	最低要求	推荐配置
操作系统	Windows 10 64-bit / macOS 10.15+	Windows 11 / macOS 13+
内存	8 GB RAM	16 GB RAM
磁盘空间	20 GB 可用空间	50 GB SSD
处理器	Intel i5 或同等	Intel i7 / Apple M1+

💡 提示：建议使用 SSD 硬盘，可显著提升编译速度和开发体验。

二、DevEco Studio 安装与配置

2.1 下载 DevEco Studio

DevEco Studio 是华为官方提供的鸿蒙应用开发 IDE，基于 IntelliJ IDEA 开发。

下载地址：

官方下载：DevEco Studio 下载页面

在这里插入图片描述

2.2 配置 OpenHarmony SDK

安装完成后，需要配置 OpenHarmony SDK：

打开 DevEco Studio
进入 ** Settings → OpenHarmony SDK**
点击 Edit 下载所需的 SDK 版本

在这里插入图片描述

配置环境变量

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

配置完成需要进行 source ~/.zshrc （zsh 终端）或 source ~/.bashrc（bash终端）

测试命令是是否配置成功

ohpm -v
> 6.0.1
hvigorw -v
> 6.22.3

三、Flutter 下载与安装

3.1 Flutter 下载

打开终端，执行以下命令验证安装：

git clone https://gitee.com/openharmony-sig/flutter_flutter.git

Git 命令的下载安装不在本文中赘述，请自行搜索

3.2 Flutter 配置

配置环境变量

# 安装路径（替换为你自己的）
export PATH=/Users/dragonbaby/workspace/dragonbaby/open-harmony-examples/flutter_flutter/bin:$PATH
# 国内 Dart 包镜像源
export PUB_HOSTED_URL=https://pub.flutter-io.cn
# 国内 Flutter SDK 资源镜像源
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

3.3 运行 Flutter Doctor

flutter doctor 是诊断开发环境的重要工具：

执行 doctor 检测命令，当检测到缺失的模块、工具时自动会下载

flutter doctor

预期结果如下：

# 当出现这个意味着你的配置就成功了，其他的 wanrning 或 error 可以忽略。
[✓] HarmonyOS toolchain - develop for HarmonyOS devices

在这里插入图片描述

四、创建第一个 Flutter 鸿蒙项目

4.1 创建项目

使用 flutter create 命令创建新项目：

# 创建支持 OpenHarmony 的 Flutter 项目
flutter create --platforms ohos my_first_app

# 进入项目目录
cd my_first_app

# 查看项目结构
tree -L 2

项目结构如下：

$ my_first_app  tree -L 2
.
├── analysis_options.yaml
├── lib
│   └── main.dart
├── my_first_app.iml
├── ohos
│   ├── AppScope
│   ├── build-profile.json5
│   ├── entry
│   ├── hvigor
│   ├── hvigorconfig.ts
│   ├── hvigorfile.ts
│   ├── local.properties
│   ├── node_modules
│   ├── oh-package.json5
│   ├── package-lock.json
│   └── package.json
├── pubspec.lock
├── pubspec.yaml
├── README.md
└── test
    └── widget_test.dart

8 directories, 14 files

4.2 运行模拟器

打开 DevEcho Studio，打开本项目的 ./my_first_app/ohos 文件。

注意：仅打开 my_first_app 目录会提示错误：Cannot Open Project Select an OpenHarmony or HarmonyOS project。

在这里插入图片描述
打开 device manager，安装一个模拟器

下载 HarmonyOS，然后新建模拟器，选择 HarmonyOS 5.1.0(18)，点击下一步，选项均为默认选项即可，创建完成后点击运行即可。

API 版本过高会有类似这样的错误： Error connecting to the service protocol: failed to connect to http://127.0.0.1:63330/0sng7OpF0QA=/

在这里插入图片描述

在这里插入图片描述
使用 flutter devices 验证设备，第一个 Ohos 的设备即为我们的模拟器.

4.3 配置签名

当你直接运行 flutter run 时可能会遇到这个问题，那么你就需要先设置签名。
在这里插入图片描述
打开 DevEcho，打开当前项目，File -> Project Structure -> Signing Configs 勾选Automatically generate signature，登录成功后，点击 Apply 应用即可。如下图所示：

4.4 运行代码

flutter run

可选项： -d 127.0.0.1:5555 指定该设备ID。不填写 -d 则默认为第一个设备。

运行时

4.5 编写 Hello World

打开 lib/main.dart，替换为以下代码：

import 'package:flutter/material.dart';

/// 应用入口函数
void main() {
  // 运行 Flutter 应用
  runApp(const MyApp());
}

/// 根 Widget - 应用程序的顶层组件
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter for OpenHarmony',  // 应用标题
      debugShowCheckedModeBanner: false, // 隐藏调试标签
      theme: ThemeData(
        // 主题配置
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true, // 使用 Material 3 设计
      ),
      home: const HomePage(), // 首页
    );
  }
}

/// 首页 Widget
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 应用栏
      appBar: AppBar(
        title: const Text('我的第一个鸿蒙应用 By 王码码'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      // 页面主体
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 欢迎图标
            const Icon(
              Icons.flutter_dash,
              size: 100,
              color: Colors.blue,
            ),
            const SizedBox(height: 24),
            // 欢迎文本
            Text(
              'Hello, OpenHarmony!',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const SizedBox(height: 8),
            Text(
              '欢迎来到 Flutter 鸿蒙开发世界',
              style: Theme.of(context).textTheme.bodyLarge,
            ),
          ],
        ),
      ),
      // 悬浮按钮
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 显示提示
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('Flutter + OpenHarmony = ❤️')),
          );
        },
        child: const Icon(Icons.favorite),
      ),
    );
  }
}

在运行终端输入 r 热重载，就能即时看到效果了：在这里插入图片描述

五、常见问题与解决方案

5.1 环境问题

问题	解决方案
`flutter doctor` 找不到 OpenHarmony	检查 `OHOS_SDK_HOME` 环境变量配置
设备未识别	确保开启开发者模式，检查 USB 连接
编译失败	执行 `flutter clean` 后重试
依赖下载慢	配置国内镜像源

5.2 开发调试技巧

# 清理构建缓存
flutter clean

# 重新获取依赖
flutter pub get

# 升级 Flutter SDK
flutter upgrade

# 查看详细错误信息
flutter run -d ohos --verbose

六、总结

本文介绍了 Flutter for OpenHarmony 开发环境的完整搭建流程：

DevEco Studio：安装并配置 OpenHarmony SDK
Flutter SDK：获取并配置 Flutter for OpenHarmony 版本
项目创建：使用 flutter create 创建鸿蒙项目
运行调试：使用 flutter run -d ohos 运行到设备

延伸学习

官方 Dart 语言文档：https://dart.cn/language
Flutter 官方文档：https://flutter.cn/docs
OpenHarmony 开发者文档：https://developer.huawei.com

下一步学习建议

深入学习 Flutter 组件库（Container、Row、Column、Stack）
掌握状态管理方案（Provider、Riverpod）
学习三方库的鸿蒙化适配
实战开发一个完整的小应用

📦 完整代码已上传至 AtomGit：my_first_app

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

开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

Flutter for OpenHarmony 实战之基础组件：第一篇 Container 容器组件完全指南

开源鸿蒙跨平台开发者社区

Flutter for OpenHarmony：网格布局 GridView 应用 —— 构建高性能图标与图片网格

开源鸿蒙跨平台开发者社区

各种Flutter拖拽交互组件助力鸿蒙应用个性化

开源鸿蒙跨平台开发者社区

所有评论(0)

查看更多评论

baronbool

@baronbool

已为社区贡献2条内容