鸿蒙Flutter实战：01-搭建开发环境

合集 - 鸿蒙 Flutter 实战(15)

1.flutter 鸿蒙适配指南2024-10-172.鸿蒙Flutter实战：08-如何调试代码2024-10-233.鸿蒙Flutter实战：09-现有Flutter项目支持鸿蒙2024-10-234.鸿蒙Flutter实战：07混合开发2024-10-235.鸿蒙Flutter实战：02-Windows环境搭建踩坑指南2024-10-226.鸿蒙Flutter实战：04-如何使用DevTools调试Webview2024-10-227.鸿蒙Flutter实战：05-使用第三方插件2024-10-228.鸿蒙Flutter实战：06-使用ArkTs开发Flutter鸿蒙插件2024-10-22

9.鸿蒙Flutter实战：01-搭建开发环境2024-10-21

10.鸿蒙Flutter实战：03-鸿蒙Flutter开发中集成Webview2024-10-2211.鸿蒙Flutter实战：10-常见问题集合2024-10-2312.鸿蒙Flutter实战：11-使用 Flutter SDK 3.22.02024-11-0113.鸿蒙Flutter实战：12-使用模拟器开发调试2024-11-1014.鸿蒙Flutter实战：13-鸿蒙应用打包上架流程2024-11-1015.鸿蒙Flutter实战：14-现有Flutter 项目支持鸿蒙 II2024-12-26

收起

鸿蒙Flutter实战：01-搭建开发环境

准备工作

1.安装 DevEco Studio NEXT IDE, 注意版本应该是 Next，当前最新的是 Beta3

2.安装Git, 如果要同时适配安卓,需要安装Android Studio; 如果要适配ios,需要安装Xcode

Mac 安装(推荐)

环境变量配置

# Flutter Mirror
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

# HarmonyOS SDK
export TOOL_HOME=/Applications/DevEco-Studio.app/Contents/
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

Windows 安装

配置用户变量

FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

PUB_HOSTED_URL=https://pub.flutter-io.cn

DEVECO_SDK_HOME=C:\Program Files\Huawei\DevEco Studio\sdk

JAVA_HOME=C:\Program Files\Huawei\DevEco Studio\jbr

配置环境变量

编辑 PATH，添加以下路径

C:\Program Files\Huawei\DevEco Studio\tools\ohpm\bin

C:\Program Files\Huawei\DevEco Studio\tools\hvigor\bin

C:\Program Files\Huawei\DevEco Studio\tools\node

管理多个 Flutter 版本

如果在项目开发中，需要使用多个 Flutter 版本，可以考虑使用 fvm

1. 安装 FVM
2. 使用 fvm 官方 flutter 版本

fvm install 3.22.0

```bash
3. 安装自定义鸿蒙版本，进入 fvm/version 目录，通常位于用户目录下，如 `~/fvm/versions/3.22.0`,
拷贝仓库并重命名为 `custom_x.y.z`的名字

```bash
git clone -b dev https://gitee.com/openharmony-sig/flutter_flutter.git custom_3.7.12

4. 在项目中使用单独的 flutter sdk 版本, 在项目目录中执行：

fvm use custom_3.7.12

常见问题

1. 运行 flutter doctor 出现 Error: Unable to find git in your PATH.

执行以下命令

git config --global --add safe.directory '*'

案例

• Webview集成

Flutter 鸿蒙交流群

【flutter鸿蒙技术交流群】

目前 Flutter 鸿蒙已经跑通，但仍然存在一些潜在的坑需要解决和处理，欢迎大家一起分享交流

请加小助手进群：
备注：鸿蒙Flutter
wx：zacksleo

参考资料

• Flutter中文文档
• Harmonyos Next 开发文档