网硕互联帮助中心目录
一、什么是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 界面不一样” 的尴尬。
核心特点
跨平台：不用为 Android 写一套布局、iOS 写另一套，一套代码跑遍主流平台，UI 样式、交互逻辑完全统一，减少开发和维护的工作量。
性能强，接近原生：Flutter 有自己的渲染引擎（叫 Skia），不依赖系统原生控件，直接和系统底层交互，所以动画流畅、页面跳转快，不会有明显的卡顿感。
开发效率高，支持热重载（Hot Reload） —— 改完代码保存后，几秒钟就能在模拟器 / 真机上看到效果，不用重新编译整个 App，大大节省调试时间。
上手门槛适中它用的开发语言是 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 应用。
评论前必须登录！
注册