【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的架構設計，理解兩層框架如何協同工作。

如果在環境搭建中遇到問題，歡迎在評論區留言，我會及時解答！