没有人比我更懂在MacOS上如何配置鸿蒙版的Flutter

欢迎关注我的公众号OpenFlutter，感恩

相信已经很多人已经把Flutter项目迁移到了鸿蒙并且上线了，并且有很多人出过很多相关教程，但我还是要记录一下我自己的Flutter鸿蒙化之路。

系统：MacOS
Flutter版本管理工具：FVM

使用fvm管理flutter版本

先安装FVM

由于鸿蒙使用的Flutter版本太低了，所以我希望除了鸿蒙以外还是使用新版本的flutter，所以我打算用fvm管理Flutter版本。先去fvm.app安装fvm：

复制代码

brew install fvm

windows可以用choco：

复制代码

choco install fvm

安装完后运行fvm list，结果如下：

sql 复制代码

Cache directory:  /Users/xx/fvm/versions
Directory Size: 7.50 GB

┌────────────────────┬─────────┬───────────────────┬──────────────┬──────────────┬────────┬───────┐
│ Version            │ Channel │ Flutter Version   │ Dart Version │ Release Date │ Global │ Local │
├────────────────────┼─────────┼───────────────────┼──────────────┼──────────────┼────────┼───────┤
│ 3.35.2             │         │ Need setup        │              │              │        │       │
├────────────────────┼─────────┼───────────────────┼──────────────┼──────────────┼────────┼───────┤
│ 3.35.1             │         │ Need setup        │              │              │ ●      │       │
├────────────────────┼─────────┼───────────────────┼──────────────┼──────────────┼────────┼───────┤
│ 3.22.0             │ stable  │ 3.22.0            │ 3.4.0        │ May 13, 2024 │        │       │
├────────────────────┼─────────┼───────────────────┼──────────────┼──────────────┼────────┼───────┤
│ custom_3.22.0-ohos │         │ 3.22.1-ohos-1.0.4 │ 3.4.0        │              │        │ ●     │
└────────────────────┴─────────┴───────────────────┴──────────────┴──────────────┴────────┴───────┘

当然了，我这已经安装完了鸿蒙版本的。可以发现fvm把各个版本的Flutter安装在/Users/xx/fvm/versions下，如果没有这个目录，可以自己创建：

bash 复制代码

mkdir  /Users/xx/fvm/versions

拉取Flutter鸿蒙

在fvm的缓存目录中把Flutter clone下来：

bash 复制代码

git clone --branch br_3.22.0-ohos-1.0.4 https://gitcode.com/openharmony-tpc/flutter_flutter.git custom_3.22.0-ohos

需要注意的是克隆下来的repo名字：需要添加前缀custom_，例如：custom_3.22.0-ohos，否则fvm在执行的时候会进行版本检查, 出现此提示多为 Flutter 官方版本与你 FVM 版本命名不符合。

csharp 复制代码

Flutt SDK: (3.22.0-ohos) is not a valid Flutter version.

使用custom_缀将不会再发生检查。

在项目中添加鸿蒙支持

由于我的项目是Android/iOS先行，所以当初只考虑了要添加鸿蒙，但在创建的时候并不同有真正的添加鸿蒙相关的东西，所以我们需要回到我们的项目中把鸿蒙添加上去。

首先切到们的项目目录下，然后使用指定的flutter版本。

bash 复制代码

cd ~/src/myapp
fvm use custom_3.22.0-ohos

然后添加鸿蒙相关的工程：

css 复制代码

 fvm flutter create --platforms=ohos --project-name demo .

别忘记了那个.哦。

然后去运行一下fvm flutter doctor进行检查，好家伙，你会看到鸿蒙那块有一堆错误，我们需要一个个解决（原谅我忘记截图了）。

鸿蒙原生相关配置

安装并配置DevEco Studio

先去下载中心搞一个DevEco Studio。安装完成之后，再运行fvm flutter doctor还是提示我找不到HOS SDK目录，可能是我没重启或者没打开新终端的原因，但不管怎么说，还是把SDK搞上吧。

打开DevEco Studio的Preferences并找到OpenHarmony SDK选项，把他下载下来，如果他还是提示找不到HOS SDK，就把HOS_SDK_HOME添加到环境变量中,HOS SDK位置可以在Preferences-> OpenHarmony SDK-> Location中找到。

bash 复制代码

# 在~/.zshrc
export HOS_SDK_HOME="/Users/xx/Library/OpenHarmony/Sdk"

接下来要配置:

npm
hvigor
ohpm

对于npm，有两种进行配置：

diff 复制代码

- 使用自行配置的npm
- 使用DevEcho Studio内置的npm

对于使用自行配置的npm会不会有什么兼容问题，我暂时不太清楚。

bash 复制代码

所以`npm`、`hvigor`和`ohpm`可以一起配置到环境变量中，即`~/.zshrc`中:

```bash
export PATH="/Users/xx/Applications/DevEco-Studio.app/Contents/tools/hvigor/bin:$PATH"
export PATH="/Users/xx/Applications/DevEco-Studio.app/Contents/tools/ohpm/bin:$PATH"
export PATH="/Users/x/Applications/DevEco-Studio.app/Contents/tools/node/bin:$PATH"

其中,/Users/x/Applications/DevEco-Studio.app是DevEco Studio的安装目录，需要注意的是，我的DevEcho-Studio安装目录是~/Applications，一般的安装目录应该是/Applications，即：

bash 复制代码

export PATH="/Applications/DevEco-Studio.app/Contents/tools/hvigor/bin:$PATH"
export PATH="/Applications/DevEco-Studio.app/Contents/tools/ohpm/bin:$PATH"
export PATH="/Applications/DevEco-Studio.app/Contents/tools/node/bin:$PATH"

到这一步其实并没有完成，因为我们还要配置DEVECO_SDK_HOME到环境变量中:

bash 复制代码

export DEVECO_SDK_HOME="/Users/xx/Applications/DevEco-Studio.app/Contents/sdk"

到此，运行一下fvm flutter doctor:

vbnet 复制代码

[WARN] Not checking for version mismatch as custom version is being used.
Doctor summary (to see all details, run flutter doctor -v):
[!] Flutter (Channel [user-branch], 3.22.1-ohos-1.0.4, on macOS 15.6.1 24G90 darwin-arm64, locale en-CN)
    ! Flutter version 3.22.1-ohos-1.0.4 on channel [user-branch] at /Users/mo/fvm/versions/custom_3.22.0-ohos
      Currently on an unknown channel. Run `flutter channel` to switch to an official channel.
      If that doesn't fix the issue, reinstall Flutter by following instructions at https://flutter.dev/docs/get-started/install.
    ! Upstream repository https://gitcode.com/openharmony-tpc/flutter_flutter.git is not a standard remote.
      Set environment variable "FLUTTER_GIT_URL" to https://gitcode.com/openharmony-tpc/flutter_flutter.git to dismiss this error.
[✓] HarmonyOS toolchain - develop for HarmonyOS devices
[!] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 16.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2025.1)
[✓] VS Code (version 1.103.2)
[✓] Connected device (4 available)
    ! Error: Browsing on the local area network for  xxx的iPhone. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources

! Doctor found issues in 2 categories.

看起来一切都准备好了！让我们一起fvm flutter run吧：

vbnet 复制代码

> hvigor ERROR: Unsupported modelVersion of Hvigor 5.1.0.
Detail: The supported Hvigor modelVersion is 5.0.5
> hvigor ERROR: BUILD FAILED in 639 ms

WTF?

谜一样的DevEco Studio版本

上面的错误很明显，Hvigor版本不匹配，在项目的ohos/oh-package.json5中，我们可以清晰地看见到 "modelVersion": "5.1.0"，按理说，鸿蒙的flutter-3.22.0已经出来很久了，而且我我下载的DevStudio明明是最新版本：

？？？？

我不知道是哪里出了问题，检查更新也是提示没有可用更新。好在我在DevEco studio的英文版官网本下发现了5.1.0，下载并安装，问题解决。

结束语

我还能说什么？