【Flutter x 鸿蒙】第一篇：环境搭建与第一个鸿蒙Flutter应用运行 - 青青子衿-

【Flutter x 鸿蒙】第一篇：环境搭建与第一个鸿蒙Flutter应用运行

作为本系列的开篇之作，今天我们将一起完成Flutter开发鸿蒙应用的环境搭建，并运行第一个Demo应用。这是整个学习之旅的基石，我会以最详细的方式带领大家一步步完成所有配置。

一、为什么选择Flutter开发鸿蒙应用？

在开始具体操作前，我们先简单了解一下为什么Flutter+鸿蒙这个组合值得学习。

Flutter是Google推出的跨平台UI框架，采用自绘引擎实现高性能渲染。而鸿蒙系统是华为自主研发的分布式操作系统，具备分布式架构和一次开发多端部署的特性。两者结合，既能享受Flutter的高效开发体验和丰富组件库，又能利用鸿蒙的分布式能力，实现在手机、平板、手表等多种鸿蒙设备上的无缝运行。

特别值得一提的是，Flutter on HarmonyOS项目让Flutter应用可以直接运行在鸿蒙系统上，这意味着我们可以用熟悉的Dart语言和Flutter框架来开发鸿蒙应用。

二、环境搭建详细步骤

下面我们开始具体的环境配置，请严格按照步骤操作。

2.1 基础软件安装

首先需要安装以下必备软件（建议按顺序安装）：

1. Git：用于版本管理和Flutter SDK下载

• 访问git-scm.com下载安装
• 安装后执行 git --version验证是否成功

2. JDK 17：鸿蒙应用开发的Java环境要求

• 下载并设置JAVA_HOME环境变量
• 命令行输入 java -version确认版本为17+

3. Flutter SDK 3.22.0+：核心开发框架

# 下载并解压到指定目录
flutter --version  # 验证安装

4. DevEco Studio：华为官方IDE

• 从华为开发者官网下载最新版本
• 安装时确保勾选鸿蒙SDK

2.2 关键配置步骤

配置过程中有几个容易出错的点需要特别注意：

Flutter环境变量配置：

• 将Flutter的bin目录添加到系统PATH
• 执行 flutter doctor检查依赖完整性

鸿蒙SDK配置：在DevEco Studio中配置本地SDK路径，选择兼容的API版本。

FVM管理建议：如果你需要同时维护多个Flutter项目，建议使用FVM（Flutter Version Management）来管理不同的Flutter版本，避免版本冲突。

2.3 常见安装问题解决

根据经验，初学者常遇到以下问题：

• 网络连接超时：配置国内镜像源，如清华镜像
• 权限不足：在macOS/Linux下使用sudo，Windows下以管理员身份运行命令行
• 端口占用：关闭冲突的应用程序或更换端口

三、创建并运行第一个应用

环境配置完成后，我们开始创建第一个鸿蒙Flutter应用。

3.1 创建新项目

在DevEco Studio中选择"Create New Project"，然后选择适当的模板。在配置项目时，需要注意以下几点：

• Project name：使用有意义的名称，如"HelloHarmony"
• Bundle name：采用反向域名规范，如"com.yourcompany.helloharmony"
• Compatible SDK：选择适当的SDK版本
• Device type：根据目标设备选择（如Phone、Tablet等）

3.2 项目结构分析

创建完成后，了解关键目录结构很重要：

• ohos/目录：鸿蒙原生代码和资源配置
• lib/目录：Dart代码和Flutter业务逻辑
• 配置文件：pubspec.yaml（Flutter依赖）、build.gradle等

3.3 运行应用到鸿蒙设备

使用命令行运行应用：

flutter run -d harmony

或者通过DevEco Studio的预览器查看效果。

首次运行可能会稍慢，因为需要编译和安装依赖。成功后，你将看到经典的Flutter计数器应用界面，但此时它运行在鸿蒙环境上！

四、个性化应用设置

让应用更具个性化是提升开发体验的重要一环。

4.1 修改应用图标和名称

• 应用图标：替换 ohos/AppScope/resources/base/media/appicon.png（建议尺寸114×114像素）
• 应用名称：修改 ohos/entry/src/main/resources/zh_CN/element/string.json中的EntryAbility_label值
• Flutter应用标题：修改main.dart中MaterialApp的title属性

4.2 添加流畅的启动体验

由于Flutter初始化需要时间，建议添加渐入渐出的欢迎屏提升用户体验。具体实现方法包括：

• 在ohos/entry/src/main/ets/pages/index.ets中配置Stack布局
• 添加定时器控制欢迎屏显示时长（通常2-3秒）
• 设置渐入渐出动画效果，使过渡更加自然

五、总结与下一步准备

恭喜！至此，你已经成功完成了：

• ✅ Flutter和鸿蒙开发环境搭建
• ✅ 第一个鸿蒙Flutter应用的创建和运行
• ✅ 基础个性化设置和启动体验优化

环境搭建流程图：

安装基础软件 → 配置环境变量 → 创建新项目 → 运行应用到设备 → 个性化设置

本篇是后续所有内容的基础，确保你已完全掌握后再继续学习。下一篇我们将深入讲解Flutter on HarmonyOS的架构设计，理解两层框架如何协同工作。

如果在环境搭建中遇到问题，欢迎在评论区留言，我会及时解答！