目录

一、什么是Flutter

核心特点

二、环境搭建

2.1 下载git

2.2 下载DevEco Studio

2.3 下载Flutter

2.4 创建flutter项目

2.5 构建项目

2.6 打开项目

2.7 连接模拟器

---

一、什么是Flutter

        Flutter 是 Google 推出的一款跨平台 UI 开发框架，核心目标是一套代码，多端运行，而且能保证各平台的 UI 风格和性能一致。

你可以把 Flutter 想象成一个 “跨平台的画画工具”：

• 你用它提供的 “画笔”（组件）画好一个 App 的界面和逻辑，不用修改代码，就能直接在 Android、iOS、HarmonyOS、Windows、macOS、Linux 甚至网页上显示出一模一样的效果。
• 对比传统跨平台方案（比如 React Native），它不是 “翻译” 成各平台原生组件，而是自己直接渲染界面，所以性能更接近原生 App，而且不会出现 “安卓和 iOS 界面不一样” 的尴尬。

核心特点

1. 跨平台：不用为 Android 写一套布局、iOS 写另一套，一套代码跑遍主流平台，UI 样式、交互逻辑完全统一，减少开发和维护的工作量。

2. 性能强，接近原生：Flutter 有自己的渲染引擎（叫 Skia），不依赖系统原生控件，直接和系统底层交互，所以动画流畅、页面跳转快，不会有明显的卡顿感。

3. 开发效率高，支持热重载（Hot Reload） —— 改完代码保存后，几秒钟就能在模拟器 / 真机上看到效果，不用重新编译整个 App，大大节省调试时间。

4. 上手门槛适中它用的开发语言是 Dart（是 Google 自家的语言），语法和 Java、C++ 有相似之处，如果你有 C++ 或 Java 基础，学 Dart 会很容易。

二、环境搭建

        最近鸿蒙开发搞得热火朝天，所以这个环境搭建会将鸿蒙的环境也顺手弄了，但对于Flutter来说鸿蒙、安卓、iOS等一样。

        如果只想学Flutter可以只下载看2.1 下载git、2.3 下载Flutter、2.4创建项目就行，其他的无所谓

2.1 下载git

下载地址：https://git-scm.com/install/

1.打开链接，下载可能会很慢，大家可以找一下资源或使用镜像网站下载

2.下载完之后双击开始安装，按图所示

3. 测试git是否下载成功

win + R 打开终端，输入cmd进入命令行界面

分别输入git、git -v 进行测试

git

git -v

2.2 下载DevEco Studio

1. 下载鸿蒙先提前准备几个文件夹，注意路径中不能有中文。

2. 注册一个华为账号登录，然后下载即可。华为的软件版本更新速度很快，下载最新的就行。

 下载链接：https://developer.huawei.com/consumer/cn/download/

下载完成之后是一个压缩包，解压到刚才准备的dev文件夹里，然后点击安装包进行安装。

3. 创建一个鸿蒙项目测试是否可用

        先在放鸿蒙原生项目的文件夹中创建子文件夹，鸿蒙项目每次创建可不会有个文件夹将它的东西全装起来，只会直接一股脑放到你指定的路径上。如果不准备子文件夹，只要那多创建几个项目里面就乱套了。以后弄起来也很麻烦

打开DevEco Studio

安装各种sdk，让它能正常运行

下载sdk

等待下载完成就行，需要一些时间，耐心等待。版本不一样无所谓，因为华为更新的太快了

下载ArkUI-X

安装鸿蒙模拟器

然后点击Next

点击同意，接着Next，耐心等待，下载完成之后点击 finish

点击运行，这样原生鸿蒙项目就创建并运行了

配置环境变量

将你自己的下面四个路径配置到环境变量中

E:\HarmonyOS\dev\DevEco Studio\sdk\default\openharmony\toolchains
E:\HarmonyOS\dev\DevEco Studio\tools\ohpm\bin
E:\HarmonyOS\dev\DevEco Studio\tools\node
E:\HarmonyOS\dev\DevEco Studio\tools\node

右键“此电脑”，点击“属性”，然后找到并点击“高级系统设置”。

或者直接在电脑设置中找“系统” > “系统信息”。

点击“环境变量”

点击确定

回到这里之后点击新建，创建系统变量

然后一直点“确定”就行。通过点“确定”将这些界面关闭。

2.3 下载Flutter

1. 进入flutter文件夹

然后输入下面的指令

git clone -b oh-3.27.4-dev https://gitcode.com/openharmony-tpc/flutter_flutter.git

等待下载完毕，时间有点长，请耐心等待。

我之前下过了，所以这里使用其他人下载的图片，让大家看看怎么才算下载成功

下载完成之后，你的flutter文件夹里面会多出一个flutter_flutter文件夹。

2. 接下来我们要配置环境变量

进入flutter_flutter—>bin文件夹，复制这个路径。

右键“此电脑”，点击“属性”，然后找到并点击“高级系统设置”。

或者直接在电脑设置中找“系统” > “系统信息”。

点击“环境变量”

然后点击“确定”。

回到这里之后点击新建，创建系统变量，要创两个

点击“确定”。

再次点击新建，创建另一个

然后一直点“确定”就行。通过点“确定”将这些界面关闭。

3. 测试flutter是否下载成功

win + R 打开终端，输入cmd进入命令行界面

输入

flutter --version

flutter doctor -v

欧克，这样flutter就下载好了！

但我们得有个IDE，总不能对着命令行敲代码吧！

vscode 和 Trae 都行，二选一，看个人习惯，我更喜欢使用Trae，因为它里AI真的不错

下载链接放这里了，自己下载就行，我这里就不多介绍了。

vscode：Visual Studio Code - The open source AI code editor

Trae：TRAE - The Real AI Engineer | TRAE - The Real AI Engineer

然后在里面安装插件，flutter只需要安装下面三个插件就行，其他插件不用管。

这样，flutter的环境就已经完全搭建好了。

2.4 创建flutter项目

执行以下命令创建一个项目，ohos的鸿蒙平台，不使用鸿蒙的可以换成web、android等等，projectName替换成你自己的项目名

flutter create --platforms ohos projectName

进入放flutter项目的文件夹

如果是使用web，那么把ohos改成web

使用web要下载谷歌浏览器，下载地址：下载 Google Chrome - 谷歌浏览器 | 立即下载

然后使用vscode或者Trae打开项目文件就可以了。找到项目下的lib文件夹main.dart文件，点击运行，这样就可以在浏览器看到了。

我们这个重点是学习flutter，学习跨平台，下载鸿蒙的东西只是用鸿蒙进行编译而已。

之后写代码只会写flutter对应的代码，不用写鸿蒙的代码。

使用鸿蒙的接着看下去就行。

2.5 构建项目

进入刚创建好的项目目录，使用 PowerShell 执行以下命令构建 Release 版本的 App

输入

flutter build app --release

2.6 打开项目

在DevEco Studio，打开flutter项目

之后就可以连接鸿蒙模拟器了，如果你有鸿蒙手机也可以直接连到手机上进行开发

2.7 连接模拟器

第一步，打开模拟器

第二步，选择项目结构(Project Structure)

然后点击右上角的运行按钮

出现这个画面就成功了！

        恭喜！Flutter 开发环境搭建与鸿蒙模拟器部署任务已圆满完成，成功实现从 0 到 1 的技术突破。当前环境已具备鸿蒙平台开发与调试的核心能力，下一步可重点推进业务代码开发、多设备兼容性测试及性能优化，稳步构建符合鸿蒙生态规范的高质量 Flutter 应用。