學習 Flutter 系列（三）：App開發藍圖設計

當你開始進行 Flutter App開發時，設計清晰的應用藍圖至關重要。無論是專案結構的規劃，還是模組化的代碼設計，都能幫助你打造高效、易維護的應用程式。本文將從專案結構、Dart 命名約定、模組化思維等方面進行解析，並通過範例深入講解 StatelessWidget 和 StatefulWidget 的實際應用。

1️⃣ Flutter 專案結構

Flutter 預設的專案結構簡單直觀，了解其組織方式和最佳實踐，能幫助你更高效地管理代碼。

（1）資料夾結構

Flutter 專案的主要資料夾和文件包括：

• lib/：核心代碼存放處，是應用程式的主文件夾。
• • main.dart：應用的入口文件。
  • 其他子目錄建議：
  • • screens/：存放各個頁面（Screen）。widgets/：存放可重複使用的 Widget。
    • models/：存放業務邏輯中用到的數據模型。services/：存放與後端交互的功能（例如 API 調用）。
• android/ 和 ios/：分別存放 Android 和 iOS 的原生代碼，適合用來配置權限或整合第三方插件。
• pubspec.yaml：配置文件，用於管理應用資源和第三方依賴，例如引入圖標、字體、套件等。

💡 提示：保持資料夾結構清晰，便於日後維護和擴展。

（2）Dart 專案結構與命名約定

• 文件命名：使用小寫且用下劃線分隔，例如 my_widget.dart。
• 類名命名：遵循駝峰命名法（PascalCase），如 MyHomePage。
• 變量和方法命名：使用小駝峰命名法（camelCase），如 onButtonPressed。
• 常量命名：使用全大寫和下劃線分隔，例如 MAX_COUNT。

💡 良好的命名習慣能提升代碼的可讀性，特別是在多人協作時。

（3）預設 Template 解析

新建專案後，Flutter 提供了一個預設範例模板。以下是模板中關鍵部分的解析：

1. 導入 Library

import 'package:flutter/material.dart';

• flutter/material.dart 是預設的 Material Design 樣式庫，提供了豐富的 UI 元素和布局工具。

2. 應用入口

void main() {

  runApp(const MyApp());

}

• main() 方法是 Dart 的程序入口。
• runApp() 方法加載根組件，並啟動應用程式。

3. MyApp 應用結構

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Demo',

      theme: ThemeData(primarySwatch: Colors.blue),

      home: const MyHomePage(title: 'Flutter Demo Home Page'),

    );

  }

}

• MaterialApp：Flutter 應用的入口組件，負責應用的全局設置（如主題、路由）。
• home：指定應用的首頁組件。

4. MyHomePage

class MyHomePage extends StatefulWidget {

  final String title;

  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override

  State<MyHomePage> createState() => _MyHomePageState();

}

• StatefulWidget：用於有狀態的組件（如需要更新界面的組件）。
• title：通過構造函數接收參數，靈活定義頁面屬性。

5. State

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('You have pushed the button this many times:'),

            Text('$_counter', style: Theme.of(context).textTheme.headline4),

          ],

        ),

      ),

      floatingActionButton: FloatingActionButton(

        onPressed: _incrementCounter,

        tooltip: 'Increment',

        child: const Icon(Icons.add),

      ),

    );

  }

}

• 狀態管理：通過 setState() 觸發界面刷新，更新 _counter 的值並重繪組件。
• Scaffold：提供 Material Design 的頁面結構，包括 AppBar、Body 和 FloatingActionButton。

2️⃣ Flutter 模組化與重用

模組化設計能讓應用程式更易於維護和擴展。以下是模組化設計的核心思維與實踐。

（1）模組化思維

• 功能分離：將應用分為多個模組，每個模組負責單一功能（例如用戶驗證、數據展示）。
• 代碼重用：將可重複使用的組件（如按鈕、卡片）封裝成獨立的 Widget。

（2）Widget 的層次結構與組合模式

Flutter 的 UI 是由 Widget 層層組合而成。合理的層次結構能提升代碼的可讀性和可維護性：

Widget 層次結構圖

----------------

Container

└── ColoredBox

    └── Column / Row

        ├── Image

        ├── Text

        ├── RawImage

        └── RichText

解釋層次結構：

1. Container：
2. • Flutter 中最常用的 Widget，用於包裹其他 Widget。
   • 可以設置邊距、對齊方式、背景顏色等。
   • 它通常作為頂層容器。
2. ColoredBox：
3. • 用於設置背景色，比 Container 更輕量，但無法設置其他屬性（如邊框或邊距）。
   • 適合純粹需要設置背景顏色的情況。
3. Row / Column：
4. • 用於排列子 Widget，Row 是水平排列，Column 是垂直排列。
   • 它們是組織多個子 Widget 的核心布局工具。
4. Image：
5. • 用於顯示圖片，支持多種圖片來源（如網絡圖片、本地圖片）。
5. Text：
6. • 用於顯示簡單文字，支持樣式（如字體大小、顏色等）設置。
6. RawImage：
7. • 一個底層的圖片 Widget，直接渲染圖片數據，適合處理自定義圖片數據的場景。
7. RichText：
8. • 用於顯示富文本（多樣式的文字），支持字體、顏色和樣式的混合設置。

輸出效果：

• Container：作為背景容器，設置灰色背景和內邊距。
• ColoredBox：設置白色背景，包裹內容。
• Row：水平排列 Image、Text 和 RichText。
• Image：展示 Flutter 官方 LOGO。
• Text：顯示簡單文字。
• RichText：顯示富文本，支持多樣式文字。

這樣的層次結構非常適合處理複雜的界面布局，並且每層 Widget 都有清晰的職責，便於維護和擴展。

（3）範例解析：StatelessWidget 和 StatefulWidget

StatelessWidget

• 特點：無內部狀態，適合靜態界面。

範例：

class MyTitle extends StatelessWidget {

  final String title;

  MyTitle({required this.title});

  @override

  Widget build(BuildContext context) {

    return Text(

      Title,

      style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),

    );

  }

}

•  用途：顯示靜態標題文字。

StatefulWidget

• 特點：有內部狀態，適合需要更新界面的組件。

範例：

class CounterWidget extends StatefulWidget {

  @override

  _CounterWidgetState createState() => _CounterWidgetState();

}

class _CounterWidgetState extends State<CounterWidget> {

  int _counter = 0;

  void _incrementCounter() {

    setState(() {

      _counter++;

    });

  }

  @override

  Widget build(BuildContext context) {

    return Column(

      mainAxisAlignment: MainAxisAlignment.center,

      children: [

        Text("Counter: $_counter", style: TextStyle(fontSize: 20)),

        ElevatedButton(

          onPressed: _incrementCounter,

          child: Text("Increment"),

        ),

      ],

    );

  }

}

•  用途：動態計數器，可根據按鈕點擊更新界面。

如何選擇？

結語：清晰的設計是成功的基石

學習 Flutter 專案結構、掌握模組化設計和充分理解 StatelessWidget 與 StatefulWidget，能幫助你打造高效的應用程式。透過合理的組件劃分與代碼重用，你的應用將更加靈活、易於維護。

立即應用這些技巧，為你的 Flutter 項目畫下完美的開發藍圖吧！ 🚀