Flutter 架構與專案結構完整指南

本指南以白話方式介紹 Flutter 的系統架構與專案結構，幫助初學者快速掌握 Flutter 的運作原理和開發實務。

🏗️ Flutter 系統架構總覽

Flutter 採用分層架構設計，從上到下分為四個主要層級：

┌─────────────────────────────────────────┐
│              Flutter App                │  ← 開發者程式碼層
│  • Widget Tree (UI 元件樹)               │
│  • Business Logic (業務邏輯)             │
│  • State Management (狀態管理)           │
└─────────────────────────────────────────┘
                     ↓
┌─────────────────────────────────────────┐
│           Flutter Framework             │  ← Flutter 框架層
│  • Widgets (UI 元件庫)                   │
│  • Rendering (渲染系統)                  │
│  • Animation & Gesture (動畫與手勢)      │
│  • Material & Cupertino Design          │
└─────────────────────────────────────────┘
                     ↓
┌─────────────────────────────────────────┐
│            Flutter Engine               │  ← 引擎層 (C/C++)
│  • Skia Graphics Engine (繪圖引擎)       │
│  • Dart Runtime (Dart 執行時)           │
│  • Platform Channels (平臺通道)          │
│  • Text Layout & Input                  │
└─────────────────────────────────────────┘
                     ↓
┌─────────────────────────────────────────┐
│           Native Platform               │  ← 原生平臺層
│  • Android (Java/Kotlin)               │
│  • iOS (Objective-C/Swift)             │
│  • Windows/macOS/Linux/Web              │
└─────────────────────────────────────────┘

架構層級詳解

層級	技術棧	主要職責	開發者接觸度
Flutter App	Dart	業務邏輯、UI 設計、狀態管理	⭐⭐⭐⭐⭐ 高頻使用
Framework	Dart	提供 Widget、動畫、手勢等 API	⭐⭐⭐⭐ 經常使用
Engine	C/C++	渲染、平臺通訊、Dart VM	⭐⭐ 偶爾接觸
Platform	原生語言	系統 API、硬體存取	⭐ 特殊需求才用

📁 Flutter 專案結構深度解析

標準專案目錄結構

my_flutter_app/
├── 📱 android/              # Android 原生專案
│   ├── app/
│   │   ├── src/main/
│   │   │   ├── AndroidManifest.xml
│   │   │   └── kotlin/
│   │   └── build.gradle
│   └── gradle.properties
├── 🍎 ios/                  # iOS 原生專案
│   ├── Runner/
│   │   ├── Info.plist
│   │   └── AppDelegate.swift
│   └── Runner.xcodeproj/
├── 🌐 web/                  # Web 平臺檔案
│   ├── index.html
│   └── manifest.json
├── 💻 windows/              # Windows 桌面應用
├── 🐧 linux/               # Linux 桌面應用
├── 🖥️ macos/               # macOS 桌面應用
├── 📚 lib/                  # Dart 主程式碼區
│   ├── main.dart           # 應用程式入口
│   ├── models/             # 資料模型
│   ├── views/              # UI 畫面
│   ├── controllers/        # 邏輯控制器
│   ├── services/           # 服務層
│   ├── utils/              # 工具函數
│   └── constants/          # 常數定義
├── 🎨 assets/              # 靜態資源
│   ├── images/
│   ├── fonts/
│   └── data/
├── 🧪 test/                # 測試檔案
│   ├── unit_test/
│   ├── widget_test/
│   └── integration_test/
├── 📋 pubspec.yaml         # 專案配置檔
├── 📋 pubspec.lock         # 依賴版本鎖定
├── 🔧 analysis_options.yaml # 程式碼分析規則
├── 🏗️ build/               # 編譯產物（自動生成）
└── 🔨 .dart_tool/          # Dart 工具暫存（自動生成）

核心檔案與資料夾說明

📚 `lib/` 目錄 - 程式核心

這是開發者花最多時間的地方，建議的組織結構：

lib/
├── main.dart              # 應用程式入口點
├── app.dart              # App 主體配置
├── 📱 screens/            # 畫面頁面
│   ├── home/
│   ├── profile/
│   └── settings/
├── 🧩 widgets/            # 可重用元件
│   ├── common/
│   └── custom/
├── 📊 models/             # 資料模型
├── 🔧 services/           # API 服務、資料庫
├── 🎛️ providers/          # 狀態管理
├── 🔄 utils/              # 工具函數
├── 🎨 themes/             # 主題設定
└── 📝 constants/          # 常數定義

📋 `pubspec.yaml` - 專案配置核心

name: my_flutter_app
description: Flutter 應用程式描述
version: 1.0.0+1

environment:
  sdk: '>=3.0.0 <4.0.0'
  flutter: ">=3.10.0"

dependencies:
  flutter:
    sdk: flutter
  # 第三方套件
  http: ^1.1.0
  provider: ^6.0.5

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^3.0.0

flutter:
  uses-material-design: true
  assets:
    - assets/images/
    - assets/data/
  fonts:
    - family: CustomFont
      fonts:
        - asset: assets/fonts/CustomFont-Regular.ttf

🚀 開發工作流程

1. 專案建立與設定

# 建立新專案
flutter create my_app

# 進入專案目錄
cd my_app

# 檢查環境
flutter doctor

2. 開發流程

# 執行專案 (開發模式)
flutter run

# Hot Reload - 即時更新 UI
# 在 terminal 按 'r' 或在 IDE 中儲存檔案

# Hot Restart - 重啟應用狀態
# 在 terminal 按 'R'

3. 測試與除錯

# 執行單元測試
flutter test

# 執行整合測試
flutter drive --target=test_driver/app.dart

# 效能分析
flutter run --profile

4. 建置與部署

# 建置 Release 版本
flutter build apk          # Android APK
flutter build appbundle    # Android App Bundle
flutter build ios          # iOS (需在 macOS)
flutter build web          # Web 版本

🔗 平臺互操作機制

Platform Channels 通訊原理

Flutter App (Dart)
       ↕️ MethodChannel
Platform Code (Java/Kotlin/Swift/ObjC)
       ↕️
Native Platform APIs

使用範例

// Dart 端呼叫原生功能
static const platform = MethodChannel('app.channel/battery');

Future<String> getBatteryLevel() async {
  try {
    final int result = await platform.invokeMethod('getBatteryLevel');
    return 'Battery level at $result%';
  } on PlatformException catch (e) {
    return "Failed to get battery level: '${e.message}'.";
  }
}

🎯 最佳實務建議

專案結構組織

按功能模組分資料夾：而非按檔案類型
保持 Widget 樹簡潔：避免過深的巢狀結構
善用 const 建構子：提升效能
分離 UI 與邏輯：使用 MVVM 或 MVC 模式

效能最佳化

使用 ListView.builder：處理大量清單資料
實作適當的 shouldRebuild：避免不必要的重繪
圖片最佳化：使用適當格式與尺寸
lazy loading：延遲載入不常用功能

程式碼品質

遵循 Dart 編碼規範：使用 flutter_lints
寫測試：單元測試、Widget 測試、整合測試
使用型別安全：善用 Dart 的強型別特性
文件化：為公開 API 撰寫文件註解

🛠️ 開發工具推薦

IDE 選擇

VS Code + Flutter 擴充套件 (輕量、快速)
Android Studio + Flutter plugin (功能完整)
IntelliJ IDEA + Dart/Flutter plugin

除錯工具

Flutter Inspector：視覺化 Widget 樹
Network Inspector：監控網路請求
Performance View：效能分析
Memory View：記憶體使用情況

📚 延伸學習資源

官方資源

社群資源

🎉 恭喜！ 你現在對 Flutter 的架構和專案結構有了完整的理解。開始你的 Flutter 開發之旅吧！

Keyboard shortcuts

Jason's Notes