Flutter 入门实战：从零搭建跨平台 HelloWorld 应用（适配鸿蒙 / 安卓 /iOS）

导语

Flutter 是 Google 推出的高性能跨平台 UI 框架，支持一套代码同时运行在 Android、iOS、Web 甚至鸿蒙（HarmonyOS）等平台。无论你是前端还是移动端开发者，掌握 Flutter 都能显著提升开发效率。本文将手把手带你完成环境配置、创建第一个应用，并实现对鸿蒙、Android 和 iOS 的多端适配，附带详细步骤与避坑指南！

---

一、环境搭建（Windows / macOS 通用）

1. 安装核心依赖

• Flutter SDK

  前往 Flutter 官网 下载对应操作系统的 SDK，解压后将 flutter/bin 目录添加到系统 PATH 环境变量中。

• 开发工具

  • 推荐使用 VS Code + 安装官方 Flutter 和 Dart 插件
  • 或使用 Android Studio + Flutter 插件（适合需要深度调试原生代码的场景）

• 模拟器 / 真机准备

  • 鸿蒙（HarmonyOS）：安装 DevEco Studio，配置鸿蒙模拟器（需注册华为开发者账号）
  • Android：通过 Android Studio 安装并配置 Android 模拟器
  • iOS（仅限 macOS）：安装 Xcode 并启用 iOS 模拟器

2. 验证环境

在终端执行以下命令：

bash

编辑

flutter doctor

根据输出提示修复缺失项。常见问题及解决方案：

问题	解决方案
Android license status unknown	运行 flutter doctor --android-licenses 并同意协议
缺少 Android SDK	在 Android Studio 中安装 SDK，并设置 ANDROID_HOME 环境变量
鸿蒙支持缺失	确保 Flutter 版本 ≥ 3.10（官方从该版本开始实验性支持 HarmonyOS）

✅ 避坑提示：鸿蒙适配目前仍处于社区驱动阶段，部分功能可能需手动集成插件或修改原生配置。

---

二、创建你的第一个 Flutter 项目

1. 初始化项目

bash

编辑

# 创建项目（命名规范：小写字母 + 下划线）
flutter create hello_world_app

# 进入项目目录
cd hello_world_app

# 启动默认设备（如已连接模拟器）
flutter run

2. 项目结构解析

text

编辑

hello_world_app/
├── lib/
│   └── main.dart          # 应用入口文件（核心 Dart 代码）
├── pubspec.yaml           # 依赖管理、资源声明、字体配置等
├── android/               # Android 原生工程
├── ios/                   # iOS 原生工程
└── harmony/               # 鸿蒙原生工程（需手动创建或通过插件生成）

💡 提示：harmony/ 目录通常不会在 flutter create 时自动生成，需借助社区插件（如 flutter_harmony）或 DevEco Studio 手动集成。

---

三、编写 HelloWorld 核心代码

编辑 lib/main.dart，替换为以下代码：

dart

编辑

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter HelloWorld',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        // 可选：为鸿蒙设备指定系统字体（需在 pubspec.yaml 中声明）
        fontFamily: 'HarmonyOS_Sans_SC', // 注意：实际字体名需匹配资源
      ),
      home: const MyHomePage(title: 'Flutter 跨端 HelloWorld'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '你点击按钮的次数：',
              style: TextStyle(fontSize: 18),
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const Padding(
              padding: EdgeInsets.only(top: 20),
              child: Text(
                '✅ 适配鸿蒙 / 安卓 / iOS',
                style: TextStyle(color: Colors.grey, fontSize: 14),
              ),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

📌 注意 ：若要在鸿蒙设备上使用 HarmonyOS Sans 字体，需在 pubspec.yaml 中正确声明字体资源，并确保字体文件已放入 assets/fonts/ 目录。

---

四、多端运行测试

1. 运行到 Android 模拟器

bash

编辑

flutter run -d android

2. 运行到 iOS 模拟器（macOS 专属）

bash

编辑

flutter run -d ios

3. 运行到鸿蒙模拟器

⚠️ 当前 Flutter 对鸿蒙的支持依赖社区插件，非官方完整方案。

bash

编辑

# 添加鸿蒙适配插件（示例，具体以插件文档为准）
flutter pub add flutter_harmony

# 构建并运行到鸿蒙设备（需 DevEco Studio 配合）
flutter run -d harmony

🖼️ 配图建议：展示同一应用在鸿蒙、Android、iOS 三端的运行截图，突出 UI 一致性与平台风格融合。

---

五、核心知识点总结

概念	说明
Widget	Flutter 的基本构建单元，分为 StatelessWidget（无状态）和 StatefulWidget（有状态）
State & setState	用于管理组件状态，调用 setState() 触发 UI 重建
MaterialApp	提供 Material Design 风格的顶层应用容器，可配置主题、路由、本地化等
多端适配策略	通过条件编译、平台判断（Platform.isAndroid 等）、响应式布局、字体/图标差异化处理实现跨平台体验