配置flutter鸿蒙的环境和创建并运行第一个flutter鸿蒙项目【精心制作】

1. 前言

① 我们在做flutter鸿蒙开发应用的第一步,就是配置flutter鸿蒙的环境。那么,这个环境是如何配置的,我觉得有必要出一期博客,写出详细的配置教程供大家参考。

② 为了能够更好地帮助新入门flutter鸿蒙开发的小伙伴理解环境配置和项目搭建流程,本人特意找了一台重装过win11系统的电脑,希望此教程能帮助更多新入门的伙伴成功配置flutter鸿蒙环境。

③ 本篇博客会带领大家从0到1搭建flutter鸿蒙环境(包括编辑器的下载,创建第一个flutter鸿蒙项目,成功运行第一个flutter鸿蒙项目)。

④ 本篇博客配置的flutter鸿蒙的SDK版本是------3.22.0-ohos 版本。

⑤ 需要下载的软件或SDK有:

Vs Code、DevEco Studio、JDK17、flutter_flutter SDK、Git

2. 环境配置教程

2.1. GitCode上面搜索flutter_flutter,如下图所示,点击第一个仓库(OpenHarmony-TPC/flutter_flutter):
2.2. 点击后跳转链接,如下图:

https://gitcode.com/openharmony-tpc/flutter_flutter?source_module=search_project

2.3. 此页面一直往下滑,会看见环境配置的介绍,如下图:
2.4. 按照环境依赖介绍,咱们按照上面的配置步骤一步步来,如下图所示:

① 下载鸿蒙开发工具 DevEco Studio(1)

② 下载鸿蒙开发工具 DevEco Studio(2)

③ 下载鸿蒙开发工具 DevEco Studio(3)

④ 下载鸿蒙开发工具 DevEco Studio(4)

⑤ 配置Java 17 环境(1)

⑥ 配置Java 17 环境(2)

⑦ 配置Java 17 环境(3)

⑧ 配置Java 17 环境(4)

⑨ 配置Java 17 环境(5)

⑩ 配置Java 17 环境(6)

11~19:配置Java 17环境

21~25:配置OpenHarmony环境

26~30:安装git

  1. 克隆flutter_flutter SDK仓库:

32~34:配置flutter鸿蒙环境

3. 创建第一个flutter鸿蒙项目

4. 运行第一个flutter鸿蒙项目

  1. 下载VS Code
  1. 安装VS Code
  1. 打开flutter鸿蒙项目
  1. 运行flutter鸿蒙项目

好了!以上就是从0到1,flutter鸿蒙环境配置、flutter鸿蒙项目创建、flutter鸿蒙项目运行的全部教程。

该博客的教程是实打实的记录,真正的细致分享,如果你觉得有帮助,欢迎点赞或收藏。

相关推荐
w139548564226 分钟前
鸿蒙实战:PhoneLoginPage 6位验证码 Cell 设计与 60 秒倒计时
华为·harmonyos·鸿蒙系统
xd18557855512 分钟前
敲门砖工坊-求职信定制的HarmonyOS开发实践
人工智能·华为·harmonyos·鸿蒙
心中有国也有家24 分钟前
AtomGit Flutter 鸿蒙客户端:ModalBottomSheet 实战
android·javascript·学习·flutter·华为·harmonyos
tyqtyq2243 分钟前
求职信生成:AI 智能求职信撰写系统的鸿蒙实现
人工智能·学习·华为·生活·harmonyos
l134062082351 小时前
鸿蒙实战:RDB 数据库设计与 DatabaseService
数据库·华为·harmonyos·鸿蒙系统
ZZZMMM.zip2 小时前
数据侦探社-数据趋势分析的HarmonyOS开发实践
人工智能·华为·harmonyos·鸿蒙·鸿蒙系统
星释3 小时前
鸿蒙智能体开发实战:34.鸿蒙壁纸大师 - 提示词工程与优化
android·华为·harmonyos·鸿蒙
千逐684 小时前
React Native 性能优化深度解析:从原理到实战
flutter·华为·鸿蒙
ujainu小4 小时前
并发性能测试:心跳监测与主线程阻塞分析
华为·性能优化·harmonyos
●VON5 小时前
HarmonyKit | 鸿蒙开发:项目目录结构与多模块架构最佳实践
华为·架构·单元测试·harmonyos·鸿蒙