Flutter鸿蒙化环境配置（windows）_flutter 鸿蒙

Flutter鸿蒙化环境配置（windows）

文章目录

• Flutter鸿蒙化环境配置（windows）
• 环境搭建
• 一、下载Flutter SDK，配置环境变量
• • 1.1下载鸿蒙版Flutter
  • 1.2配置环境变量
  • • 1.2.1 编辑器自带工具配置环境变量
    • 1.2.2 配置鸿蒙版flutter环境
    • 1.2.3 配置JDK
    • 1.2.4 其他环境变量
    • 1.2.5 验证结果
• 二、创建Flutter项目，运行鸿蒙模拟器
• • 2.1 创建flutter项目
  • • 2.1.1命令行创建flutter项目
    • 2.1.2 打开鸿蒙部分
  • 2.2 在鸿蒙模拟器上实现flutter demo
• 总结

环境搭建

一、下载Flutter SDK，配置环境变量

1.1下载鸿蒙版Flutter

鸿蒙 Flutter SDK 需要在 GitCode 下载。

通过代码工具包下载当前仓库代码git clone https://gitcode.com/openharmony-tpc/flutter_flutter.git， 并切换到dev分支，本人用的3.22版本，区别不大
下载完后使用git branch查看当前版本，默认应该是3.7

使用 git checkout [版本号] 命令，完成版本切换

1.2配置环境变量

需要配置以下用户变量
注意鸿蒙开发需要安装Java和配置相关变量

1.2.1 编辑器自带工具配置环境变量

配置环境变量
编辑 PATH，添加以下路径，鸿蒙开发需要配置ohpm，hvigor，node以及hdc的环境变量，node,ohpm,hvigor这三个在编辑器DevEco Studio的安装目录里的tools文件内，而hdc则是在 XXX\\DevEco Studio\\sdk\\default\\openharmony\\toolchains 目录下。
此四项配置环境变量如下图

C:\\Program Files\\Huawei\\DevEco Studio\\tools\\hvigor\\binC:\\Program Files\\Huawei\\DevEco Studio\\tools\\ohpm\\binC:\\Program Files\\Huawei\\DevEco Studio\\tools\\nodeC:\\Program Files\\Huawei\\DevEco Studio\\sdk\\default\\openharmony\\toolchains

同时我们还需要在用户环境变量中增加 HOS_SDK_HOME 也就是harmonyos的SDK的路径

地址换成你安装编辑器的sdk路径

HOS_SDK_HOMEC:\\Program Files\\Huawei\\DevEco Studio\\sdk

1.2.2 配置鸿蒙版flutter环境

注意：如果你之前有下载官方版本的FlutterSDK，那么这里配置的flutter_flutter的环境变量一定要在你自己下载的鸿蒙版flutterSDK的环境变量之前（flutter_windows_3.7.12-stable\\flutter\\bin）， 如果鸿蒙版在path的位置在官方的顺序之下， 你在使用flutter doctor –v检测环境时， 无法出现 HarmonyOS 的环境标志

除此之外还需要配置一下国内的镜像源以防万一

PUB_HOSTED_URLhttps://pub.flutter-io.cnFLUTTER_STORAGE_BASE_URLhttps://storage.flutter-io.cn

配置如下图：
FLUTTER_STORAGE_BASE_URL

PUB_HOSTED_URL

1.2.3 配置JDK

官网地址在这，现在好像需要注册账号了，邮箱注册就行

安装时记得记下安装路径，安装完成了配置环境变量

以防万一path里面也加上

1.2.4 其他环境变量

有些情况下打包的时候会报错，提示缺少DEVECO_SDK_HOME的环境，所以得加上
这个就是DevEco编辑器的sdk位置

DEVECO_SDK_HOMEC:\\Program Files\\Huawei\\DevEco Studio\\sdk

此外还有下载flutter的git地址，因为鸿蒙版flutter迁移到华为自己的GitCode里面去了，原先的Gitee好像没更新了
本人这里是从GitCode克隆的，所以填的这个链接，看你们从哪克隆就填什么地址链接

FLUTTER_GIT_URLhttps://gitcode.com/openharmony-tpc/flutter_flutter.git

除了这些还有hdc跟flutter以防万一也在外面配置下，最好是配置，不然可能会有很多奇奇怪怪的坑

HDC_HOMEC:\\Program Files\\Huawei\\DevEco Studio\\sdk\\default\\hms\\toolchainsHOST_FLUTTERC:\\Users\\ThinkPad\\harmony_flutter\\flutter_flutter\\bin

以下是我的配置情况：

最后需要配置的是PUB缓存地址，最好是放在跟鸿蒙版flutter同一磁盘路径

PUB_CACHEC:\\Users\\ThinkPad\\harmony_flutter\\PUB

配置如下图:

1.2.5 验证结果

SDK 下载完成，环境变量配置妥当后，使用 flutter doctor -v 检查各项是否通过。

在命令行中，运行 ohpm -v, hvigorw -v, node -v 查看是否能使用，确保各个依赖的工具，其 PATH 配置正确。

使用 echo %DEVECO_SDK_HOME%, echo %JAVA_HOME% 等检查用户变量是否生效。

环境变量发生变化时，需要重启命令行工具。

只要保证前两个能用就行，本人用的是3.22.1版本，不影响使用

另外，需要注意的是，优先添加用户环境变量，如果是系统环境变量，可能需要注销登录或者重启系统，否则配置可能不生效。

二、创建Flutter项目，运行鸿蒙模拟器

2.1 创建flutter项目

2.1.1命令行创建flutter项目

新建一个存放项目的文件夹，右击打开命令行

命令如下：

flutter create my_app01

执行结果：

创建完成后把创建的项目用VsCode打开

2.1.2 打开鸿蒙部分

vscode打开后，用DevEco Studio打开my_app03里面的ohos文件

等DevEco初始化完成，有报错不用管，先登录华为账号，启动模拟器

模拟器版本无所谓，高一点也好

启动后配置自动签名，API版本暂时不用管，

当签名完成后，回到vscode，发现自动检测到了鸿蒙模拟器

点击显示所有设备

第一个就是我们的鸿蒙模拟器

2.2 在鸿蒙模拟器上实现flutter demo

打开VsCode的命令行
输入打包命令（新版本flutter不需要携带过多参数）

flutter build hap --debug

执行打包命令效果如下图所示：

打包完成后开始运行flutter项目
在终端继续输入命令：

flutter run

运行结果以及模拟器效果如下放图片依次展示：
运行效果：

模拟器效果：

总结

不得不说，真的很多坑，本人配置的时候，最开始下载的官方版本flutter，把安卓模拟器跑起来了，后面跑鸿蒙的时候，vscode怎么都获取不到鸿蒙的模拟器，打包也打不了。争取一步到位，一般来说签名完成后，vscode就自动能获取到鸿蒙模拟器。

不用太在意flutter doctor -v的其他报错，特别是VsStudio跟安卓的，假如你是初学者并且没干过安卓的话，想研究flutter鸿蒙，就暂时别碰安卓的配置。

以上就是今天要讲的内容，喜欢的话可以收藏，也可以问我。