導語
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 等）、響應式佈局、字體/圖標差異化處理實現跨平台體驗