在鸿蒙系统上运行你的第一个 Flutter 应用：Hello World！

在这里插入图片描述

• 个人首页： VON
• 鸿蒙系列专栏： 鸿蒙开发小型案例总结
• 综合案例 ：鸿蒙综合案例开发
• 鸿蒙6.0：从0开始的开源鸿蒙6.0.0
• 鸿蒙5.0：鸿蒙5.0零基础入门到项目实战
• Electron适配开源鸿蒙专栏：Electron for OpenHarmony
• 本文章所属专栏：Flutter for OpenHarmony

🌐 在鸿蒙系统上运行你的第一个 Flutter 应用：Hello World！

“Hello, World!” 是每一个程序员的起点。 当这行简单的文字出现在 鸿蒙系统的屏幕上，它不仅代表了技术的融合，更象征着跨平台开发的新篇章。

本文将带你一步步完成一个最基础的 Flutter 应用，并成功部署到 华为 HarmonyOS 模拟器 上——即使你在使用非 Android/iOS 设备，也能体验 Flutter 的强大与优雅。

🎯 目标：让“Hello World!”在鸿蒙上显示

我们今天的目标非常明确：

1. 创建一个极简的 Flutter 应用
2. 使用华为官方支持的 @ohos/flutter_ohos 插件
3. 在 HarmonyOS 模拟器中成功运行并看到界面

最终效果如下图所示：

在这里插入图片描述

✅ 看到了吗？这是 Flutter 在鸿蒙生态中的第一次“问候”。

🛠️ 项目代码详解

import 'package:flutter/material.dart';

void main() {
  runApp(const HelloWorldApp());
}

class HelloWorldApp extends StatelessWidget {
  const HelloWorldApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const HelloWorldScreen(),
    );
  }
}

class HelloWorldScreen extends StatelessWidget {
  const HelloWorldScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Hello World App'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Text(
              'Hello World!',
              style: TextStyle(
                fontSize: 32,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这里的名字也别忘了修改一下

在这里插入图片描述

💡 代码亮点解析：

🌟 这段代码完全符合 Flutter 的声明式编程思想：描述“应该是什么样子”，而不是“如何一步步画出来”。

🧪 如何在鸿蒙模拟器上运行？

第一步：准备环境

你需要以下工具：

• DevEco Studio（华为官方 IDE）
• HarmonyOS 模拟器（支持 API 9 或以上）
• 已配置好的 Flutter for HarmonyOS 项目模板

⚠️ 注意：这不是普通的 flutter create 项目！必须使用华为提供的 Flutter for HarmonyOS 模板创建。

第二步：创建项目

1. 打开 DevEco Studio
2. 新建项目 → 选择 “Flutter for HarmonyOS”
3. 填写包名（如 com.example.helloworld）
4. 点击下一步，等待初始化完成

第三步：替换代码

将上述 main.dart 内容复制粘贴到 lib/main.dart 中，保存。

第四步：构建与运行

1. 点击顶部菜单栏的 ▶️ 运行按钮
2. 选择目标设备：HarmonyOS 模拟器
3. 等待编译、打包、安装完成

🔁 如果提示依赖缺失，请确保已执行：

ohpm install

🖼️ 最终效果展示

当应用启动后，你会看到：

• 蓝色顶部导航栏，标题为 “Hello World App”
• 白色背景页
• 居中显示的大号黑色文字：“Hello World!”

在这里插入图片描述

✅ 成功！你已经完成了 Flutter 在鸿蒙系统上的首次落地。

🤔 为什么能在鸿蒙上运行 Flutter？

这是通过 @ohos/flutter_ohos 实现的，这是一个由华为维护的插件，它做了几件关键事情：

1. 桥接 Flutter 引擎与鸿蒙原生系统
2. 将 Dart 代码编译成可在鸿蒙运行的字节码（.abc 文件）
3. 提供适配层，让 Flutter Widget 能渲染到鸿蒙 UI 框架上

虽然目前仍处于实验阶段，但它证明了 Flutter 可以作为跨平台解决方案之一，覆盖更多操作系统。

⚠️ 常见问题与解决方案

🚀 下一步建议

你现在已经有能力在鸿蒙上运行 Flutter 应用了！接下来可以尝试：

1. 添加一个按钮，点击后改变文字颜色
2. 使用 StatefulWidget 实现计数器功能
3. 探索 @ohos/flutter_ohos 的高级特性（如生命周期管理）

🔗 官方文档：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/flutter-overview

✨ 结语：一次跨越生态的问候

从 Android 到 iOS，再到如今的 HarmonyOS，Flutter 正在不断拓展它的边界。当你在鸿蒙模拟器上看到那句熟悉的 “Hello World!”，你不仅仅是在运行一个程序，而是在见证一种 新的跨平台开发范式正在成型。

这不仅是技术的进步，更是开发者自由的体现。