Flutter × 鸿蒙实战30讲（2）：搭建开发环境：DevEco Studio + Flutter SDK 联合配置

作者：烟云任平生
发布时间：2025年12月2日
标签：#Flutter #OpenHarmony #DevEco #跨平台开发 #CSDN

一、引言

上一篇我们明确了技术路线：通过 WebView 嵌入 Flutter Web 应用。
本篇将手把手教你搭建完整的开发环境，确保 Flutter 与 OpenHarmony 开发工具链无缝协同。

💡 目标：在 DevEco Studio 中成功运行一个包含 Flutter Web 页面的 OpenHarmony 应用。

二、所需软件清单

⚠️ 注意：不要使用 HarmonyOS（华为商业版）SDK，本系列基于 开源鸿蒙（OpenHarmony）。

三、步骤详解

步骤1：安装并配置 Flutter SDK

1. 下载 Flutter SDK：https://docs.flutter.dev/get-started/install
2. 解压后添加到系统 PATH：

   export PATH="$PATH:/path/to/flutter/bin"
   # Flutter × 鸿蒙实战30讲（2）：搭建开发环境：DevEco Studio + Flutter SDK 联合配置
   

启用 Web 支持：
Bash
编辑
flutter config --enable-web
flutter doctor
✅ 确保输出中包含 Web support is enabled.
步骤2：安装 DevEco Studio
下载地址：https://developer.harmonyos.com/cn/develop/deveco-studio
安装时选择 OpenHarmony 而非 HarmonyOS。
首次启动时，配置 SDK 路径，务必勾选“Standard System”

步骤3：验证环境
在终端运行：
Bash
flutter create demo_flutter_web
cd demo_flutter_web
flutter run -d web-server --web-port=8080
浏览器访问 http://localhost:8080，应看到默认计数器页面。
四、常见问题排查
问题 解决方案
flutter doctor 报错 Android license 运行 flutter doctor --android-licenses
DevEco 无法识别标准系统设备 在 Tools > Device Manager 中添加 x86 模拟器
网络权限缺失 后续需在 module.json5 中声明 ohos.permission.INTERNET
五、小结
至此，你已拥有：

✅ 可编译 Flutter Web 的环境
✅ 可开发 OpenHarmony 标准系统应用的 IDE
下一篇文章，我们将把 Flutter Web 页面嵌入到 OpenHarmony 应用中！

🔜 下一篇预告：《第3讲：在 OpenHarmony 标准系统上运行 Flutter Web 应用》

👍 觉得有用？点赞 + 关注不迷路！