---
# System prepended metadata

title: '[Video Note] [Flutter] NetNinja - Flutter Tutorial for Beginners'
tags: [Flutter, Video Note]

---

# 1 - Intro & Setup
### Flutter 是什麼？
- Flutter 是一個行動 UI 框架，用來建立 iOS 和 Android 原生應用程式。
- 使用單一程式碼庫即可在不同操作系統上運行應用。
- 可以存取平台 API，例如相機或麥克風。
- 程式碼使用 Dart 語言編寫。

### 使用 Flutter 的好處
- **單一程式碼庫**：不需要為 iOS 和 Android 各寫一套程式碼，更新也只需要一次。
- **響應式設計**：容易製作適合各種裝置尺寸的應用程式。
- **快速且流暢**：應用程式執行快速且流暢。
- **整合 Firebase**：與 Firebase 後端整合方便，適合使用。
- **易學的 Dart 語言**：如果有基礎的程式設計經驗，Dart 語言容易上手。
- **Material Design**：內建 Material Design，應用程式外觀優美。
- **完善文件**：Flutter 官網有詳細的教學與指南。

### 課程結構
- **前半部分**：學習 Flutter 基礎並建立簡單的範例應用程式。
- **後半部分**：綜合前面學到的內容，製作一個世界時鐘應用程式。

### 需要的先備知識
- 本課程適合有基礎程式設計經驗的開發者，應理解以下概念：
  - 類別 (classes)
  - 函式 (functions)
  - 變數 (variables)
  - 非同步程式 (asynchronous code)
  - API
- 如果完全沒有程式設計經驗，應該先學習基本的程式設計再開始學習 Flutter。

### 工具設定
- 建議使用 Android Studio 開發 Flutter 應用程式，也可以選擇其他文本編輯器如 VS Code。
- 安裝 Git：Flutter 依賴 Git 進行安裝與版本控制。
- 安裝 Flutter：通過 Git 克隆 Flutter 的 GitHub 資源庫。

### 檢查 Flutter 安裝
- 使用 `flutter doctor` 命令來檢查 Flutter 是否正確安裝。
- 如果需要在其他命令提示字元中使用 Flutter，可能需要更新系統環境變數，將 Flutter 的路徑加入 `PATH`。

### 課程檔案
- 所有課程的程式碼都存放在 GitHub 上，每個課程對應不同的分支。
- 可以直接在 GitHub 上瀏覽，也可以克隆整個資源庫或下載壓縮檔。
# 2 - Flutter Overview
### Flutter 應用程式的核心概念：Widgets
- Widgets 是 Flutter 應用的基石，所有內容、佈局與元件都是由 widgets 組成
- Widget 樹結構：每個 Flutter 應用程式的結構由 widgets 組成的樹狀結構，每個 widget 可以嵌套在其他 widgets 內

### Widget 結構範例
- 根 Widget 包圍整個應用程式的最外層 widget
- App Bar Widget 是應用程式的標題列，內含文字 widget 顯示應用標題
- Container Widget 包裹內容的 widget，例如文字或圖片
- Widget 樹描述應用內 widgets 的層級結構，從根 widget 到最小單位的子 widget

### Flutter 中常見的 Widgets
- Text Widget 用來顯示文字
- Button Widget 用來建立按鈕
- Row & Column Widgets 用來水平或垂直排列多個 widgets
- Image Widget 用來顯示圖片

### Widgets 的自訂屬性
- Text Widget 屬性：style 定義文字樣式，textAlign 定義對齊方式，overflow 定義溢出處理，maxLines 定義最大行數
- Button Widget 屬性：color 定義按鈕顏色，elevation 定義浮起高度，disabledColor 定義禁用時顏色，enabled 設定是否啟用

### Widgets 是 Dart 類別
- Widgets 本質上是 Dart 的類別，使用 Dart 語言定義其行為與外觀
- Dart 語言是 Google 開發的物件導向語言，類似 Java 或 JavaScript，使用類別、函式、類型等概念

### Dart 語言示範
- 在 Dart 中使用各種 widgets 來定義 widget tree，嵌套 widgets 構建應用的結構
- 例如 `HomeState` 類別中嵌套多個 widgets，設定其屬性來構建應用的外觀與行為

### 課程目標
- 學習 Dart 語言的基礎，以便能夠順利進行後續的 Flutter 應用開發
# 3 - Dart Primer 
### 基本介紹
- Dart 是 Flutter 使用的語言，語法與 JavaScript 類似。
- 本課程針對有程式語言基礎的人，不會詳細解釋程式概念。
- 使用 DartPad 線上編輯器測試程式碼。

### 變數與靜態類型
- Dart 是靜態類型語言，變數一旦定義類型後，無法改變類型。
- 例子：`int age = 30;` 和 `String name = "Chun-li";`
- 嘗試更改變數類型會報錯，如 `name = 30;`
- 變數值可以覆寫，但需維持相同類型。

### 布林值
- 使用 `bool` 關鍵字來定義布林值。
- 例子：`bool isNight = false;`
- 使用 `print(isNight)` 可輸出布林值。

### 動態類型
- `dynamic` 關鍵字允許變數類型在執行期間變更。
- 例子：`dynamic name = "Chun-li";` 後可 `name = 30;`
- 過度使用動態類型會增加程式錯誤風險，建議避免頻繁使用。

### 函數
- 使用 `void` 關鍵字定義不返回任何值的函數。
- 例子：`void main()` 是 Dart 的主函數，啟動程式時自動執行。
- 若函數需要返回值，需明確定義返回類型，如 `String greeting() => "Hello";`
- Arrow function 可用於單行回傳值的情況：
  - 例子：`String greeting() => "Hello";`

### 清單（List）
- 清單（List）類似於 JavaScript 的陣列，使用方括號表示。
- 例子：`List<String> names = ["Chun-li", "Yoshi", "Mario"];`
- 使用 `names.add("Luigi")` 可新增項目，使用 `names.remove("Yoshi")` 可移除項目。
- 定義清單的資料類型是良好習慣，避免混合類型，如 `List<int>` 或 `List<String>`。

### 類別（Classes）
- Dart 支援面向物件程式設計，使用 `class` 來定義類別。
### 什麼是類別 (Class)
- 類別是一個物件的藍圖，用來描述物件的屬性和方法
- 可以用類別來描述例如「使用者」或「購物車」等物件

### 創建一個簡單的類別
- 使用 `class` 關鍵字來創建類別
- 屬性：類別中定義的變數，例如 `username` 和 `age`
- 方法：類別中定義的函式，例如 `login()`

### 實例化類別 (Instantiating)
- 使用 `new` 關鍵字創建類別實例，即產生物件
- 例如：`User user1 = new User();` 創建了一個 `User` 實例，並將其存入變數 `user1`

### 訪問屬性與方法
- 使用點號 (.) 訪問類別的屬性或方法
- 例如：`user1.username` 取得 `user1` 的名稱；`user1.login()` 呼叫 `login()` 方法

### 建構子 (Constructor)
- 建構子是實例化類別時自動執行的特殊函式
- 可以通過建構子傳入參數來初始化物件的屬性
- 例如：`User(String username, int age)` 要求在實例化時傳入名稱和年齡

### `this` 關鍵字
- `this` 用來指向當前物件實例，區分傳入參數與屬性
- 例如：`this.username = username;` 將傳入的 `username` 設為物件的 `username`

### 繼承 (Inheritance)
- 繼承用來讓一個類別從另一個類別獲得屬性和方法
- 使用 `extends` 關鍵字來實現繼承
- 子類別可以擁有父類別的所有屬性和方法，並可以新增屬性或方法

### 建立繼承的類別
- 例如：`SuperUser extends User` 創建了一個繼承自 `User` 的類別
- `SuperUser` 繼承了 `User` 的屬性和方法，並新增 `publish()` 方法

### 繼承中的建構子使用
- 子類別的建構子可以使用 `super()` 調用父類別的建構子
- 例如：`SuperUser(String username, int age) : super(username, age)` 調用了 `User` 類別的建構子來初始化 `username` 和 `age`

### 限制方法存取
- 繼承的子類別可以使用父類別的屬性和方法，但普通的父類別實例無法使用子類別的方法
- 例如：`User2.publish()` 會報錯，因為 `publish()` 只屬於 `SuperUser`


# 4 - Creating a Flutter App in Android Studio
### 安裝 Android Studio
- 確保已安裝 Android Studio，未安裝可下載。
- 開啟 Android Studio，設置環境以配合 Flutter。

### 創建 Android 模擬器
- 進入「Configure」，選擇「AVD Manager」。
- 創建虛擬設備，選擇設備型號（如 Nexus 6）。
- 選擇系統映像，建議選擇 PI 版本以避免問題。
- 為虛擬設備命名（如 Nexus 6 API 28），設置圖形為硬體加速。
- 點擊「Finish」完成虛擬設備創建。

### 安裝 Flutter 和 Dart 插件
- 進入「Configure」，選擇「Plugins」。
- 搜尋 Flutter 並安裝，安裝過程中將自動安裝 Dart 插件。
- 完成後重啟 IDE，檢查是否出現新選項「Start New Flutter Project」。

### 創建新的 Flutter 項目
- 點擊「Start New Flutter Project」，選擇「Flutter Application」。
- 設定項目名稱（如 my_app）和存儲位置。
- 填寫公司域名作為包識別碼，完成設置並創建項目。
- 查看項目結構，主要在 `lib` 文件夾內開發。

### Android Studio 設定
- 可以選擇深色主題：進入「File」>「Settings」>「Appearance and Behavior」>「Appearance」。
- 自定義字體和字體大小，調整至合適視覺效果。

### 項目結構說明
- `lib` 文件夾：存放主要代碼。
- `android` 和 `ios` 文件夾：各自存放平台特定的文件。
- `test` 文件夾：測試文件，對於初學者可選擇刪除。

### 瀏覽和運行代碼
- 代碼中含有多個註釋，指導理解。
- `main` 函數為應用啟動點，調用 `runApp` 開始運行。
- 使用 `MaterialApp` 作為應用的根組件，設置主界面內容。

### 測試虛擬設備
- 連接創建的虛擬設備，點擊播放按鈕運行應用。
- 初次運行可能需耐心等待，查看應用預覽。

### 更新應用內容
- 可以修改應用內容，如將根組件設為 `MaterialApp`，並設置 `home` 屬性。
- 測試應用運行效果，進一步添加更多組件。


# 5 - Scaffold & AppBar Widgets
### 設置基本應用程式結構

- 使用 `MaterialApp` 作為根部件。
- 在 `home` 屬性中設置基本內容，初始為一個顯示 "hey ninjas" 的文本部件。
- 接下來將使用 `Scaffold` 來改進應用程式佈局。

### Scaffold 小部件介紹

- `Scaffold` 提供基本佈局結構，包括：
- 應用程式欄（AppBar）
- 主體（Body）
- 浮動操作按鈕（Floating Action Button）

### 設置 AppBar

- 在 `Scaffold` 中添加 `appBar` 屬性。
- 使用內建的 `AppBar` 小部件，設置其 `title` 屬性為 `Text` 小部件。
- 將 `centerTitle` 設為 `true` 以置中顯示標題。

### 設置 Body 內容

- 在 `Scaffold` 中添加 `body` 屬性。
- 使用 `Text` 小部件顯示內容，初始文本為 "hello ninjas"。
- 將文本放入 `Center` 小部件中以實現中央對齊。

### 添加浮動操作按鈕

- 在 `Scaffold` 中添加 `floatingActionButton` 屬性。
- 使用 `FloatingActionButton` 小部件，設置 `child` 為 `Text` 小部件，顯示 "click"。
- 按鈕當前無任何操作，因為 `onPressed` 屬性被刪除。

### Scaffold 的多樣性

- `Scaffold` 提供多種屬性以進一步定制應用程式佈局。
- 常見屬性包括 `appBar`、`body` 和 `floatingActionButton`。
- 可查閱 Flutter 文檔以獲取更多屬性和範例。
# 6 - Colours & Fonts

### 自訂顏色和字型樣式

- 目前的應用程式仍然使用預設的 Material Design 風格。
- 我們將學習如何自訂顏色和字型樣式。

### 設定 AppBar 背景顏色

- 在 `AppBar` 中添加 `backgroundColor` 屬性。
- 使用 Material Design 顏色調色板，選擇所需顏色（如紅色）。
- 可以透過顏色的強度來調整顏色，例如 `Colors.red[600]`。

### 設定浮動操作按鈕顏色

- 在浮動操作按鈕中同樣添加 `backgroundColor` 屬性，設置與 `AppBar` 相同的顏色。

### 調整中心文本樣式

- 將文本從 `Text` 小部件中提取出來，使用 `TextStyle` 小部件來設置樣式。
- 設置字體大小（如 20）、字體粗細（如 `FontWeight.bold`）及字母間距（如 2）。
- 設定文本顏色，例如使用 `Colors.grey[600]`。

### 添加自訂字型

- 下載自 Google Fonts 的自訂字型（如 Indy Flower）。
- 在根目錄創建一個名為 `fonts` 的資料夾，並將字型文件移入該資料夾。
- 修改 `pubspec.yaml` 檔案以註冊字型，確保格式正確並添加字型路徑。

### 使用自訂字型

- 在 `TextStyle` 中添加 `fontFamily` 屬性，引用已註冊的字型名稱（如 "Indy Flower"）。
- 進行更改後，通過熱重啟查看效果。

# 7 - Stateless Widgets & Hot Reload
### 熱重載功能介紹

- 當前每次修改代碼後需要手動點擊熱重啟按鈕。
- Flutter 提供熱重載功能，可以自動更新預覽畫面。
- 需使用 stateless widgets 來啟用熱重載。

### 創建 Stateless Widget

- 使用 `st` 快捷鍵創建一個 stateless widget。
- 自訂 widget 名稱為 `Test`，並繼承自 `StatelessWidget`。
- Stateless widget 不能改變其狀態，所有資料必須為最終的。

### Stateless 與 Stateful Widgets

- Stateless widgets 的狀態不可變化，適合不需要動態更新的內容。
- Stateful widgets 能夠改變狀態，適合需要隨時間改變的內容，例如計數器。

### 設置 Home Widget

- 將 `Test` widget 重新命名為 `Home`，作為主畫面的內容。
- 在 `build` 方法中返回主畫面組件樹。
- 更新 `MaterialApp` 的 `home` 屬性，使用自訂的 `Home` widget。

### 啟用熱重載

- `build` 方法負責構建 widget 樹，當代碼變化並保存時，Flutter 會檢測變化並重新執行 `build` 方法。
- 這樣可以避免每次都手動點擊熱重啟按鈕，提升開發效率。

### 自訂 Widget 的重用性

- 使用自訂 widget 可以讓代碼更乾淨和可重用。
- 可在多個位置重複使用相同的 widget，避免重複編寫代碼。

### Override 方法

- 使用 `@override` 標記來定義自訂的 `build` 方法，取代 `StatelessWidget` 中的預設方法。
- 這表示我們希望使用自訂的 `build` 方法，而不是繼承的版本。

# 8 - Images & Assets
### 使用圖片的方式

- Flutter 支援兩種圖片來源：網路圖片和資產圖片。
- 網路圖片從互聯網獲取，資產圖片來自本地檔案。

### 使用網路圖片

- 在 `Scaffold` 的 `body` 屬性中，將 `Text` widget 替換為 `Image` widget。
- 使用 `Image.network` 方法並提供圖片的 URL。
- 確保 URL 拼寫正確，以便成功顯示圖片。

### 使用資產圖片

- 創建一個名為 `assets` 的新資料夾，並將圖片檔案放入該資料夾。
- 在 `pubspec.yaml` 文件中聲明資產圖片，確保正確縮排。
- 使用相對路徑，例如 `assets/space-1.jpg`，來指定圖片位置。

### 簡化資產圖片聲明

- 若有多個圖片，可以在 `pubspec.yaml` 中只聲明資料夾，像是 `assets:`，然後使用該資料夾中的所有圖片。
- 這樣可以避免一一列出每個圖片檔案的繁瑣過程。

### 使用快捷方式顯示圖片

- 使用 `Image.asset` 和 `Image.network` 快速顯示資產和網路圖片。
- 不需要使用 `Image` widget 的嵌套方式，簡化程式碼。

### 多內容顯示計畫

- 目前範例中僅顯示一個圖片或文本，未來將增強佈局以顯示多個文本和圖片。
# 9 - Buttons & Icons
### 使用圖示和按鈕

- 介紹如何在 Flutter 應用中使用圖示和按鈕。
- 可以結合圖示和按鈕，提供更直觀的介面。

### 使用圖示

- 使用 `Icon` widget 顯示圖示。
- 可以從 Material Design 圖示庫中選擇圖示，使用 `Icons` 來獲取可用圖示列表。
- 第一個參數為所選圖示，之後可自訂顏色和大小等屬性。
- 例如，可以設定顏色為 `Colors.lightBlue`，大小為 `250`。

### 使用按鈕

- 介紹 `RaisedButton` 和 `FlatButton` 兩種按鈕類型。
- `RaisedButton` 有陰影，給人一種浮起的效果；`FlatButton` 則沒有陰影。
- 按鈕需要 `onPressed` 屬性，設定按下按鈕時執行的函式。
- 使用 `child` 屬性來放置按鈕內的文字，通常使用 `Text` widget。

### 按鈕的功能

- 在 `onPressed` 中可以執行任意程式碼，例如在控制台打印訊息。
- 使用 `Ctrl + Q` 可以查看按鈕的所有屬性，方便自訂按鈕外觀和行為。

### 在按鈕中加入圖示

- 可在按鈕中同時顯示圖示和文字，使用 `icon` 屬性來設定圖示。
- 使用 `label` 屬性來添加顯示在圖示旁的文字。
- 可以自訂顏色和大小以適應設計需求。

### 使用圖示按鈕

- `IconButton` 是一種簡單的按鈕，僅包含可點擊的圖示。
- 需要 `onPressed` 屬性來定義點擊後的行為。
- 使用 `icon` 屬性來指定顯示的圖示，並可以設定顏色。

# 10 - Containers & Padding
### 容器小部件

- Flutter 中最簡單的佈局小部件是 `Container`。
- `Container` 作為其他小部件的容器，提供了便利功能。
- 可設定的屬性包括 margin、padding 和顏色等。

### 使用容器

- 當 `Container` 沒有子小部件時，會佔據可用空間的全部。
- 當加入子小部件（如 `Text`）時，容器的大小會調整至子小部件的大小。
- 使用 `color` 屬性可以設定容器的背景顏色。

### Padding 與 Margin

- `Padding` 是內部空間，`Margin` 是外部空間。
- `EdgeInsets` 用來控制 padding 和 margin 的空間。
- 使用 `EdgeInsets.all(value)` 可以設定四周相同的 padding 或 margin。
- 使用 `EdgeInsets.symmetric(horizontal: value, vertical: value)` 可以設定水平和垂直方向的不同 padding 或 margin。
- 使用 `EdgeInsets.fromLTRB(left, top, right, bottom)` 可以個別設定四個邊的 padding 或 margin。

### 例子

- 設定 `padding` 為 20 像素，容器內的文字會有 20 像素的內部空間。
- 設定 `margin` 為 30 像素，容器外圍會有 30 像素的外部空間。

### 使用 Padding 小部件

- 如果只需要在文字周圍添加 padding 而不需要 margin，可以使用 `Padding` 小部件。
- `Padding` 小部件無法設置 margin 和顏色，只能設置 padding。
- 當需要 margin 或顏色時，應使用 `Container` 小部件。

# 11 - Rows
### 使用 Row 小部件

- 使用 `Row` 小部件可以在一行中放置多個小部件。
- `Row` 具有 `children` 屬性，用來指定子小部件的列表。
- 可以在 `Row` 中添加不同的小部件，例如 `Text`、`FlatButton` 和 `Container`。

### Row 小部件示例

- 添加 `Text` 小部件顯示 "Hello World"。
- 添加 `FlatButton`，設置顏色為 `Colors.amber`，顯示文字 "Click Me"。
- 添加 `Container`，設置顏色為 `Colors.cyan`，內部有 padding 和顯示文字 "Inside Container"。

### 主要軸對齊

- `mainAxisAlignment` 用於控制小部件在主軸上的對齊方式。
- 可選項目包括 `MainAxisAlignment.start`、`MainAxisAlignment.center`、`MainAxisAlignment.spaceBetween`、`MainAxisAlignment.spaceEvenly`、`MainAxisAlignment.end` 和 `MainAxisAlignment.spaceAround`。

### 交叉軸對齊

- `crossAxisAlignment` 用於控制小部件在交叉軸上的對齊方式。
- 可選項目包括 `CrossAxisAlignment.start`、`CrossAxisAlignment.center`、`CrossAxisAlignment.end` 和 `CrossAxisAlignment.stretch`。

### Row 小部件應用

- 目前的佈局顯示多個小部件在一行中排列。
- 透過 `mainAxisAlignment` 和 `crossAxisAlignment` 可以靈活控制小部件的排列方式。
- 接下來將學習如何使用 `Column` 小部件來進一步擴展佈局。

# 12 - Columns
### 使用 Column 小部件

- 使用 `Column` 小部件可以將多個小部件垂直排列。
- `Column` 具有 `children` 屬性，用來指定子小部件的列表。
- 可以在 `Column` 中添加多個小部件，例如多個 `Container`。

### Column 小部件示例

- 添加三個不同顏色和大小的 `Container` 小部件。
- 第一個容器的顏色為 `Colors.cyan`，padding 為 20 像素。
- 第二個容器的顏色為 `Colors.pinkAccent`，padding 為 30 像素。
- 第三個容器的顏色為 `Colors.amber`，padding 為 40 像素。
- 每個容器內部的文字分別為 "1"、"2" 和 "3"。

### 主要軸對齊

- 在 `Column` 中，使用 `mainAxisAlignment` 控制主軸（垂直方向）的對齊。
- 可選項目包括 `MainAxisAlignment.start`、`MainAxisAlignment.center`、`MainAxisAlignment.end` 和 `MainAxisAlignment.spaceEvenly`。

### 交叉軸對齊

- 在 `Column` 中，使用 `crossAxisAlignment` 控制交叉軸（水平方向）的對齊。
- 可選項目包括 `CrossAxisAlignment.start`、`CrossAxisAlignment.center`、`CrossAxisAlignment.end` 和 `CrossAxisAlignment.stretch`。

### 嵌套佈局

- 可以在 `Column` 中添加 `Row`，或在 `Row` 中添加 `Column` 以實現複雜佈局。
- 在 `Column` 的開頭添加一個 `Row`，並在該 `Row` 中添加 `Text` 小部件，例如 "Hello" 和 "World"。
- `Row` 會佔據整個列的寬度，因此所有容器會在列的底部對齊。

### 實踐與探索

- 建議多加練習以熟悉 `Row` 和 `Column` 的用法。
- 嘗試不同的對齊屬性以獲得不同的佈局效果。
- 在未來的開發中會頻繁使用這些佈局組件。
# 13 - Flutter Outline & Shortcuts
### Widget 快捷功能介紹

- 每個 Widget 都有一個操作選單，能快速執行一些常見操作
- 使用操作選單能節省剪下、貼上和編輯的時間

### Widget 操作範例

- 點擊 Widget，選擇操作選單（小燈泡）以顯示可用操作
- 可以移動 Widget
- 使用 `Move widget down` 或 `Move widget up` 來移動它的位置
- 可以快速添加 Padding
- 選擇 `Add padding` 自動包裹 Widget 並設置預設的 padding
- 可以修改 Padding 值，並保存修改後的效果
- 可以移除 Padding
- 選擇 `Replace widget with its children` 來移除 Widget 的 Padding

### 包裹 Widget 操作

- 可以包裹一個 Widget
- 選擇 `Wrap with new widget`，例如包裹成 `Container`
- 包裹在 `Center` 內，將 Widget 置中
- 包裹在 `Row` 或 `Column` 內，進行排版調整

### Flutter Outline 工具

- `Flutter Outline` 提供 Widget 樹的視覺化表示
- 選中 Widget 後會自動跳到相應的代碼位置
- 右鍵可以執行和操作選單相同的快捷操作
- 提供快捷按鈕進行操作，如加入 Padding、包裹 Row 或 Column、移動位置等

### 重點

- 這些快捷方式能大幅減少編輯和排版的繁瑣操作
- 未來會頻繁使用這些功能，熟悉這些快捷操作將提高效率
# 14 - Expanded Widgets
### Expanded Widget 概述

- Expanded widget 是另一種佈局方式，類似於網頁中的 Flexbox。
- 它可以讓 Widget 佔據所有可用的空間，並自動分配寬度。

### 基本操作

- 將容器包裹在 `Expanded` widget 內，會讓該容器佔據剩餘的可用空間。
- 當多個容器都包裹在 `Expanded` 內，它們會平分可用的空間。

### Flex 屬性

- 可以使用 `flex` 屬性來自定義每個 `Expanded` widget 佔用的空間比例。
- `flex` 值越大，佔用的空間越多。
- 總 `flex` 值表示整體寬度，個別的 `flex` 值決定每個 Widget 佔用的比例。

### Flex 實例

- `flex: 3` 的容器會佔總寬度的三分之三。
- `flex: 2` 的容器佔總寬度的三分之二，依此類推。
- 例如，如果總和為 6，`flex: 3` 的容器佔一半的寬度，`flex: 2` 佔三分之一，`flex: 1` 佔六分之一。

### 圖片佈局中的應用

- 可以使用 `Expanded` widget 來限制圖片的寬度，讓它適應螢幕大小。
- 當圖片過大時，將其包裹在 `Expanded` 內可以控制其佔據的空間，避免超出螢幕範圍。
- 也可以使用 `flex` 調整圖片與其他元素之間的寬度比例。


# 15 - Ninja ID Project
### 建立 Flutter 專案與基本設置

- 關閉現有專案，重新啟動 Android Studio，建立新 Flutter 專案，命名為 `ninja_id`
- 選擇存儲路徑，設置公司域名（可隨意填寫）
- 刪除 `test` 資料夾，並移除預設代碼，只保留 `main()` 和 `runApp()`
- 使用 `MaterialApp` 作為根 widget，並指定 `home` 屬性

### 建立 Stateless Widget

- 建立一個 `StatelessWidget`，命名為 `NinjaCard`
- 在 `runApp()` 中使用 `NinjaCard` 作為顯示 widget
- 使用 `Scaffold` 建立基本佈局，包含 `appBar` 和 `body`

### 自訂 AppBar

- 設定 `title` 為 "Ninja ID Card"
- 將標題置中 (`centerTitle: true`)
- 設定 AppBar 背景色為深灰色 (`Colors.grey[850]`)
- 移除陰影效果 (`elevation: 0`)

### 設定 Scaffold 的背景色與 Padding

- 設定 `backgroundColor` 為深灰色 (`Colors.grey[900]`)
- 使用 `Padding` widget 設定四周間距
  - 左：30px
  - 上：40px
  - 右：30px
  - 下：0px

### 建立 Ninja ID Card 的文字內容

- 使用 `Column` widget 將所有 widget 垂直排列
- 使用 `Text` widget 顯示「名稱」和「當前忍者等級」
- 調整字體樣式，包括顏色、字體大小、字重、字距
- 使用 `CrossAxisAlignment.start` 將文字對齊到左側
- 使用 `SizedBox` 在元素之間添加間距

### 增加 Ninja 的聯繫信息 (Email)

- 使用 `Row` widget，將圖標與文字水平排列
- 使用 `Icon` 顯示 Email 圖標，並使用 `Text` 顯示 Email 地址
- 使用 `SizedBox` 調整圖標與文字間距
- 調整 Email 文字的顏色與字體大小

### 加入圖片 (Avatar)

- 建立 `assets` 資料夾，並將忍者圖片放入其中
- 在 `pubspec.yaml` 中聲明圖片資源
- 使用 `CircleAvatar` widget 顯示圓形頭像
- 調整頭像大小，使用 `radius` 屬性
- 使用 `Center` widget 將頭像置中

### 添加分隔線

- 使用 `Divider` widget 在頭像與文字內容之間添加分隔線
- 設定 `height` 為 90px 以調整分隔線的間距
- 設定分隔線顏色為 `Colors.grey[800]`

### App 完成度

- 完成了一個簡單的 Ninja ID Card 應用，展示了頭像、名稱、忍者等級及聯繫方式
- 使用了多種 Flutter widget，如 `Text`、`Row`、`Column`、`Padding`、`SizedBox` 等
# 16 - Stateful Widgets
### Stateless 與 Stateful Widget 概念

- Stateless Widget 不包含動態資料或可變狀態。建立後內容不會變化。
- Stateful Widget 可以隨時間或互動改變內容，包含動態資料。

### 建立 Stateful Widget

- 使用 `stful` 快捷鍵創建 Stateful Widget，包含兩個類別。
- 第一個類別繼承 `StatefulWidget`，用於建立 State。
- 第二個類別繼承 `State`，用於保存可變的狀態和建立 UI。

### State 與 Build 函數

- State Object 儲存可變的資料，當資料改變時，UI 更新。
- Build 函數負責回傳 Widget 樹，根據當前的狀態顯示 UI。

### 將 Stateless Widget 轉換為 Stateful Widget

- 使用 Android Studio 快速轉換工具，將現有的 Stateless Widget 轉換為 Stateful Widget。
- 保持 Widget 的名稱和使用方式不變。
- 內部新增 State 類別，並將 build 函數移至 State 類別中。

### 動態資料定義

- 在 State 類別中定義狀態變數，如 `int ninjaLevel = 0;`。
- 在 UI 中使用 `$ninjaLevel` 動態顯示資料。

### 改變狀態與更新 UI

- 使用 `setState()` 函數來改變狀態，並觸發 `build` 函數重新執行以更新畫面。
- 例如，使用 `setState(() { ninjaLevel += 1; });` 增加 ninjaLevel 的值。

### 增加按鈕來改變狀態

- 在 Scaffold 中加入 FloatingActionButton。
- 按鈕點擊後，透過 `setState()` 增加 `ninjaLevel` 的值。
- 按鈕包含圖標和背景顏色設定。

### 更新畫面流程

- 點擊按鈕後，透過 `setState()` 改變狀態變數 `ninjaLevel`。
- `setState()` 觸發 `build()` 函數，畫面根據新的狀態重繪。
# 17 - Lists of Data
### 專案建立與設定

- 新建一個 Flutter 專案，命名為 "quotes"。
- 刪除多餘的樣板程式碼，包括測試資料夾和不必要的引用，以避免錯誤。

### 建立 Stateful Widget

- 使用 `stful` 快捷鍵建立 `QuoteList` 的 Stateful Widget。
- 內部有一個與之關聯的 State 物件，並包含 build 函數來返回 Widget 樹。

### UI 結構與設計

- 在 Scaffold 中設置背景顏色為淺灰色。
- 加入 AppBar，並設定標題為 "Awesome Quotes" 和背景顏色為紅色。
- 在 Body 中使用 Column 來呈現多個 Widget。

### 定義資料列表

- 在 State 物件中定義一個 String 型別的 List，命名為 `quotes`，並初始化三個引用的名言。
- 計劃使用動態方式顯示這些名言，避免硬編碼每個名言的 Widget。

### 使用 Map 函數處理資料

- 使用 `map` 函數遍歷 `quotes` 列表，對每個項目執行一個函數。
- 在函數中，對每個名言返回一個 Text Widget。
- 使用 `toList()` 將返回的 Iterable 轉換為 List，以符合 Children 屬性需求。

### 優化程式碼

- 使用箭頭函數簡化 map 函數的回傳邏輯，移除多餘的 return 關鍵字及大括號。
- 每個 Text Widget 會顯示相應的名言，並隨著迴圈動態生成。
# 18 - Custom Classes
### 問題背景與目標

- 當前的 `quotes` 列表中，每個項目只是單一字串。
- 希望將每個名言與其作者關聯，讓每個名言具備作者資料。

### 不推薦的方法

- 建立一個單獨的 `authors` 列表，並確保其索引與 `quotes` 列表一致。
- 這種方法會導致代碼混亂，並且違反單一責任原則。

### 解決方案：建立 `Quote` 類別

- 在 `lib` 資料夾中建立一個新 Dart 檔案 `quote.dart`。
- 定義 `Quote` 類別，包含兩個屬性：
  - `text`: 名言內容
  - `author`: 作者名稱

### 定義 `Quote` 類別

- `Quote` 類別的定義：
  - 具有兩個屬性 `text` 和 `author`，分別代表名言和作者。
  - 使用建構函數來初始化這些屬性。

### 優化建構函數

- 使用命名參數來初始化 `text` 和 `author`，使得傳遞參數順序不重要。
- 可以使用命名參數簡化代碼，減少重複性。

### 在主檔案中使用 `Quote` 類別

- 引入 `quote.dart`，並將原本的 `quotes` 列表替換為 `Quote` 類型的對象列表。
- 每個 `Quote` 對象都會有 `text` 和 `author` 屬性。

### 更新代碼以正確輸出 `Quote` 對象

- 在主檔案中，將 `quotes` 列表的每個項目從單一字串改為 `Quote` 對象。
- 迭代時，正確引用 `quote.text` 和 `quote.author` 屬性來顯示名言和作者。
  
### 儲存並熱重啟

- 儲存並進行熱重啟，確保更改生效，並確認名言與作者能正確顯示。
# 19 - Cards
### 當前問題

- 現在的名言與作者使用單一的 Text Widget 顯示，效果不理想。
- 想要透過使用卡片 (Card) 來改善外觀，讓內容更具視覺效果。

### 解決方案概述

- 使用卡片來包裹每條名言與其作者，卡片提供邊框與陰影效果，讓顯示更美觀。
- 創建一個函數來生成卡片樣板，稍後將進一步優化這個方法。

### 創建卡片樣板函數

- 建立一個 `quoteTemplate` 函數，返回一個包含名言與作者的卡片樣板。
- 使用 `Column` 將名言與作者分別堆疊在一起，並將結果放入 `Card`。

### 卡片樣式設置

- 為卡片設置邊距 (`margin`)，分別在上下左右設定不同的值。
- 使用 `Column` 將名言 (`quote.text`) 與作者 (`quote.author`) 分別作為兩個 Text Widget 顯示。

### 名言與作者樣式設置

- 名言的字體大小設為 18 像素，顏色為灰色 (600)。
- 作者的字體大小設為 14 像素，顏色為更深的灰色 (800)。
- 使用 `SizedBox` 在名言與作者之間設置間距（6 像素）。

### 在列表中應用卡片樣板

- 使用 `quoteTemplate` 函數生成每條名言的卡片，並將結果應用於列表中進行映射處理。

### 進一步優化顯示

- 在卡片內部添加 `Padding` 以增加內部空間，設定為 12 像素。
- 使用 `crossAxisAlignment: CrossAxisAlignment.stretch` 讓卡片在頁面中撐滿整個寬度。

### 後續優化

- 可以進一步改進此解決方案，將卡片樣板提取為獨立的無狀態元件 (Stateless Widget)，以便重複使用並提高代碼的可維護性。
# 20 - Extracting Widgets
### 改善現有的卡片生成方式

- 目前通過 `quoteTemplate` 函數為每個名言生成一個 `Card` 元件。
- 有更好的方法可以模組化代碼，避免每次都寫這個函數。

### 創建自訂的 Stateless Widget

- 可以將卡片樣板抽取成一個自訂的無狀態元件，名稱為 `QuoteCard`。
- 在 Flutter Outline 工具中選取卡片，右鍵選擇 "Extract Widget" 並命名為 `QuoteCard`。

### 重構後的變化

- 代碼將生成的卡片提取至 `QuoteCard` class，保留相同的元件結構。
- 原本的 `quoteTemplate` 函數不再需要，直接在映射中返回 `QuoteCard` 實例。

### 接收資料並設置構造函數

- 需要為 `QuoteCard` class 設置構造函數，接收 `quote` 資料並進行內部使用。
- 在 `QuoteCard` 中使用 `final` 關鍵字來保證傳入的資料不會改變。

### 改善代碼模組化與可重用性

- 刪除冗餘的 `quoteTemplate` 函數，直接在映射過程中使用 `QuoteCard`。
- 由於模組化，將 `QuoteCard` class 移至獨立文件 `quote_card.dart`，並在需要使用的地方引入。

### 文件間的引入處理

- 在 `quote_card.dart` 中引入必要的資料類與 Flutter Material 庫。
- 在 `main.dart` 中引入 `quote_card.dart`，確保模組正常工作。

### 測試與驗證

- 將代碼保存後，無需視覺變更，證明代碼重構後仍保持相同的功能效果。
- 代碼更模組化，未來可在其他地方重用 `QuoteCard` 元件。
# 21 - Functions as Parameters
### 在名言卡片上添加刪除按鈕

- 為每個名言卡片添加刪除圖示，以便用戶可以刪除不需要的名言。
- 使用 `SizedBox` 和 `FlatButton` 來放置刪除按鈕，按鈕上顯示 "Delete Quote" 文本和刪除圖示。

### 刪除功能的實現

- 刪除按鈕的 `onPressed` 屬性需要一個函數，該函數將執行刪除操作。
- 目前的問題是，刪除功能需要訪問數據，但在無狀態小部件中無法直接修改數據。

### 傳遞刪除函數作為參數

- 通過在 `QuoteCard` 的構造函數中添加一個名為 `delete` 的參數，傳遞刪除函數。
- 在 `delete` 函數中，使用 `setState` 來更新狀態，刪除指定的名言。

### 更新 `QuoteCard` 以接收刪除函數

- 在 `QuoteCard` 中定義 `final` 的 `delete` 屬性，以便可以存儲傳入的刪除函數。
- 在按鈕的 `onPressed` 屬性中調用 `delete` 函數，執行刪除操作。

### 測試刪除功能

- 測試刪除按鈕，確認點擊後名言能夠從列表中移除。
- 若需重新顯示名言，進行熱重啟以獲取原始數據。

 
# 22 - Starting the World Time App
### 開始新的 Flutter 專案

- 關閉目前在 Android Studio 中的其他專案。
- 新建 Flutter 專案，命名為 `world_time`。
- 設定公司域名後完成專案建立。

### 刪除不必要的測試文件

- 進入 `world_time` 文件夾，刪除 `test` 文件夾。
- 目前不需要測試功能，將專注於應用的主要開發。

### 修改 `main.dart` 文件

- 刪除 `main.dart` 中的多餘 boilerplate 代碼，只保留最上面的部分。
- 使用 `MaterialApp` 並設置 `home` 屬性以顯示主畫面。

### 創建不同的畫面

- 準備三個不同的畫面：主畫面、加載畫面和選擇位置畫面。
- 在 `lib` 文件夾中創建名為 `pages` 的新文件夾以組織代碼。
- 在 `pages` 文件夾中創建以下 Dart 文件：
  - `home.dart`：主畫面。
  - `choose_location.dart`：選擇位置畫面。
  - `loading.dart`：加載畫面。

### 設置主畫面

- 在 `home.dart` 中創建一個 `StatefulWidget`，命名為 `Home`。
- 在 `build` 方法中返回一個 `Scaffold`，目前僅包含顯示 "home screen" 的文本。

### 使用包導入

- 在 `main.dart` 中使用 package 導入方式來導入 `home.dart` 文件。
- 使用 `package:world_time/pages/home.dart` 格式的導入語句。

### 添加 SafeArea 組件

- 在主畫面中使用 `SafeArea` 組件來避免狀態欄遮擋文本。
- 將文本組件包裹在 `SafeArea` 中，以確保其顯示在安全區域內。

### 設置選擇位置畫面

- 在 `choose_location.dart` 中創建一個 `StatefulWidget`，命名為 `ChooseLocation`。
- 返回一個 `Scaffold`，顯示 "choose location screen" 的文本。

### 設置加載畫面

- 在 `loading.dart` 中創建一個 `StatefulWidget`，命名為 `Loading`。
- 返回一個 `Scaffold`，顯示 "loading screen" 的文本。

### 測試畫面設置

- 可以在 `main.dart` 中導入和顯示這些新創建的畫面以進行測試，但暫時不進行此操作。
- 確保各個畫面準備好以便將來的導航。 
# 23 - Maps & Routing
### 路由基礎

- 在 Flutter 中，需要使用路由來在不同的屏幕之間導航。
- 路由是使用映射 (maps) 來管理的，映射是由鍵值對組成。

### Dart 中的映射

- Dart 的映射類似於 JavaScript 的物件字面量或 Python 的字典。
- 創建映射時使用大括號 `{}`，並提供屬性名稱和對應的值。
- 可以通過方括號來獲取映射中的值。

### 在 Flutter 中設置路由

- 在 `MaterialApp` 小部件中，可以通過設置 `routes` 屬性來創建路由。
- 路由的鍵是實際的路由路徑（例如 `/home`），值是返回相應小部件的函數。
- 使用 `initialRoute` 屬性來設置應用啟動時加載的初始路由。

### 在 Flutter 中導航

- 使用 `Navigator.pushNamed` 來導航到另一個路由。
- `Navigator` 會在當前屏幕上方推送新的屏幕，原屏幕仍然存在於堆疊中。
- 在選擇位置的頁面中，可以添加一個按鈕來返回到主頁。

### 堆疊和路由管理

- 應用程序可以視為一個堆疊，最上面是當前顯示的屏幕。
- 按下返回按鈕時，會從堆疊中彈出當前路由，顯示下面的路由。
- 隨著多個路由的推送，堆疊可能變得複雜，因此需要有效管理路由。
- 重要的是要理解推送和彈出路由的概念，以便在有多個路由的情況下保持應用的穩定性。
# 24 - Widget Lifecycle
### Widget 生命週期概述

- Flutter 中有兩種主要的小部件：無狀態小部件和有狀態小部件。
- 無狀態小部件無法持有隨時間改變的狀態，建構函數只在小部件創建時執行一次。
- 有狀態小部件能夠持有會隨時間變化的狀態，並能通過調用 `setState` 方法更新顯示。

### 有狀態小部件的生命週期方法

- **initState**：當狀態對象首次創建時執行，適合訂閱數據流或設置初始狀態。此方法僅執行一次。
- **build**：負責構建小部件樹，會在每次調用 `setState` 時觸發，重新構建小部件以顯示更新。
- **dispose**：當小部件或狀態對象完全移除時執行，適合釋放資源。

### 實作 initState 方法

- 在選擇位置頁面中，重寫 `initState` 方法以執行特定操作。
- 通過 `super.initState()` 調用原始 `initState` 方法，然後可以添加自定義代碼。
- 可在控制台中打印信息以顯示該方法何時被調用。

### 觸發建構函數

- 當返回到選擇位置頁面時，`initState` 和 `build` 會被依次調用。
- 每次創建新狀態對象時，`initState` 只會執行一次，而 `build` 每次都會執行以更新顯示。

### 使用 setState 更新狀態

- 在狀態對象中創建一個整數變量 `counter`，初始值為零。
- 在小部件中添加一個按鈕，當按鈕被點擊時調用 `setState` 方法。
- 使用 `setState` 觸發 `build` 方法，使界面更新以顯示新的計數值。

### 更新與顯示狀態

- 當點擊按鈕時，控制台會顯示 `build` 方法的調用次數。
- `initState` 僅在狀態對象創建時執行一次，後續的狀態更新僅通過 `build` 方法進行。

### 應用生命週期方法

- 在後續的開發中，可以利用 `initState` 方法從第三方 API 獲取數據。
- 理解生命週期方法對於有效管理小部件狀態至關重要。
# 25 - Asynchronous Code
### 非同步程式碼概述

- 非同步程式碼表示一個當前開始但將在未來完成的動作。
- 示例包括與 API 端點或資料庫交互以獲取資料。
- 請求啟動後，程式碼不應該停下來，應該非阻塞地運行。

### Flutter 中的非同步處理

- 使用非同步函數、`async` 關鍵字和 `Futures` 來處理非同步程式碼。
- `async` 和 `await` 的用法類似於 JavaScript 的 `async` 和 `await`。
- `Futures` 是類似於 JavaScript 的 `Promises` 的資料類型。

### 模擬非同步請求

- 創建一個無返回值的函數 `getData` 來模擬非同步請求。
- 使用 `Future.delayed` 來模擬請求的延遲，設置持續時間並執行回調函數。
- 通過 `initState` 方法調用 `getData`，以便在狀態對象創建時觸發該函數。

### 非阻塞特性

- 在請求發起後，程式碼會繼續執行其他部分，而不會被請求阻塞。
- 在請求過程中可以添加其他打印語句來證明非阻塞性。

### 處理依賴請求

- 如果需要等待前一請求完成才能發起下一請求，則需要使用 `await` 關鍵字。
- 將函數聲明為 `async` 並在必要的地方添加 `await` 來等待結果。
- 這樣可以確保在進行下一步之前，先獲取前一請求的結果。

### 返回值處理

- 在模擬請求時，可以返回字符串值並將其存儲在變數中。
- 將 `username` 和 `bio` 的值分別存儲，以便在所有請求完成後一起輸出。

### 非阻塞代碼示例

- 在非同步函數外部的代碼仍然可以執行，不會被阻塞。
- 當使用 `print` 語句在非同步請求下方時，這些語句會在請求完成之前被執行。


# 26 - Flutter Packages (http)
### 複雜功能的實現

- 在 Flutter 應用中，可能需要添加複雜的功能，例如動畫、文件操作等。
- 可以選擇從頭開始編寫代碼，或使用 Flutter 套件來簡化工作。
- 套件是其他開發者已經寫好的代碼和邏輯的集合，方便實現專門的功能。

### 使用 HTTP 套件

- 本課程中將使用 HTTP 套件，簡化對第三方 API 的 HTTP 請求。
- 可用來發送各類網路請求，包括獲取不同地區的時間資訊。

### 套件安裝步驟

- 前往 [pub.dev](https://pub.dev) 搜索 "HTTP" 套件。
- 查看套件的評分，較高的分數通常表示更好的品質。
- 在專案的 `pubspec.yaml` 文件中添加 HTTP 套件的依賴，然後運行 `get dependencies` 以安裝。

### 使用 HTTP 套件進行請求

- 在 `initState` 函數中使用 HTTP 套件來發送網路請求。
- 目標是從 JSONPlaceholder 獲取假數據。
- 請求的結果為一個 JSON 字串，需轉換為可用的格式。

### 解析 JSON 數據

- 將 HTTP 請求的響應儲存到 `response` 變數中。
- 使用 `json.decode` 將 JSON 字串轉換為 Dart 可用的 Map。
- 需要導入 `dart:convert` 來使用 JSON 解析功能。

### 測試資料獲取

- 透過 `print` 語句顯示解析後的資料，確保其正確性。
- 可以獲取 JSON 中的特定屬性，例如標題，並確認資料結構是否正確。
 

# 27 - World Time API
### 使用 World Time API 獲取時間數據

- 將使用 World Time API 獲取不同地區的時間數據。
- 可查詢的地點很多，提供了多種不同位置的時間資訊。

### 請求時間數據

- 確認 API 返回的數據格式為 JSON，並獲取所需的時間和偏移量。
- 複製所需的 API 端點以進行請求。

### 整理請求邏輯

- 刪除不需要的代碼，並設置一個新的 `getTime` 函數以處理 API 請求。
- 使用 `await` 來獲取 HTTP 響應，並將其解析為 JSON 格式的 Map。

### 解析 JSON 數據

- 獲取 JSON 中的 `datetime` 和 `utc_offset` 屬性。
- 注意確保屬性名稱正確，避免使用錯誤的名稱。

### 數據轉換與時間計算

- 將 `datetime` 字串轉換為 Dart 的 `DateTime` 對象。
- 使用 `DateTime` 類中的方法將時間加上所需的偏移量。

### 修正偏移量的處理

- 將 `utc_offset` 字串進行子字串操作，以提取數字部分。
- 將提取的字串轉換為整數，並將其加到 `DateTime` 對象中以獲取正確的時間。

### 時間更新與顯示

- 確保將更新的時間賦值回原始變數，因為 `add` 方法不會修改原始對象。
- 透過熱重啟功能檢查時間是否顯示正確。

### 邏輯分離與重構

- 考慮將請求邏輯分離到獨立的類別和文件中，以提高代碼的可重用性和可維護性。
# 28 - WorldTime Custom Class
### 目標
- 將 `get time` 函數從當前文件中提取到一個自定義的 `WorldTime` 類中，並將其放在 `services` 文件夾內。

### 創建文件夾和類
- 在 `Lib` 文件夾中創建一個名為 `services` 的新文件夾。
- 在 `services` 文件夾中創建 `world_time.dart` 文件。
- 導入所需的包：`http` 和 `dart:convert`。

### 定義 `WorldTime` 類
- 創建 `WorldTime` 類並定義以下屬性：
  - `location`：用戶友好的位置名稱。
  - `time`：特定位置的時間。
  - `flag`：對應位置的國旗圖像的 URL。
  - `url`：API 請求的 URL。

### 實現構造函數
- 實現命名參數的構造函數，用來初始化上述屬性。

### 移動 `get time` 函數
- 將 `get time` 函數移至 `WorldTime` 類中。
- 調整函數以使用類屬性 `url` 來發送請求。
- 將獲取的時間設置到 `time` 屬性中。

### 創建 `WorldTime` 實例
- 在當前文件中創建 `WorldTime` 類的實例並傳入必要的參數（例如位置、國旗 URL 和 API URL）。

### 更新 UI
- 在加載時執行設置 `WorldTime` 的函數，並獲取時間。
- 由於 `get time` 函數是異步的，因此需要使用 `async` 和 `await` 關鍵字。
- 更新狀態以顯示加載時間，然後顯示獲取的時間。

### 顯示加載狀態
- 在加載狀態下，顯示 “loading” 直到獲得時間數據。
- 使用 `setState` 方法更新 UI，當獲得時間數據後顯示實際的時間。

 
# 29 - Error Handling
### 錯誤處理的重要性
- 現在的代碼在正常運作，但可能會發生錯誤。
- 錯誤的 URL 或不正確的數據結構會導致無法獲取預期的回應。
- 需要使用錯誤處理機制來確保程式能正常運作。

### 使用 try-catch 處理錯誤
- 使用 `try` 和 `catch` 塊來捕捉並處理錯誤。
- 在 `try` 中放入可能會出錯的代碼。
- 在 `catch` 中捕捉錯誤並執行相應的處理，例如打印錯誤訊息。

### 更新時間變數以避免顯示錯誤
- 當發生錯誤時，應將時間變數設置為提示用戶的消息，例如「無法獲取時間數據」。
- 確保不再觸發顯示紅色錯誤屏幕。

### 確保良好的用戶體驗
- 即使在錯誤發生時，也能給用戶清晰的反饋。
- 測試代碼恢復正常後，應再次檢查功能的正確性。

### 從加載畫面到主頁的重定向
- 在獲取到數據後，需要將用戶從加載畫面重定向到主頁。
- 這一過程中需要學習如何在不同的路由之間傳遞數據。
# 30 - Passing Route Data
### 加載畫面與首頁的重定向
- 加載畫面是應用啟動時的第一個小部件。
- 在加載完成後，應該將用戶重定向到主頁。
- 移除時間的顯示，只顯示「加載中」。

### 使用 Navigator 進行路由重定向
- 使用 `Navigator` 對象的 `pushNamed` 方法進行路由重定向。
- 這會將新路由推入當前路由堆棧，但不希望保留舊的加載畫面。

### 使用 pushReplacementNamed 來替換路由
- 使用 `pushReplacementNamed` 方法來替換當前路由。
- 確保不再有舊的加載畫面在路由堆棧中。

### 傳遞數據到新路由
- 使用 `arguments` 參數來傳遞數據到新路由。
- 將需要的數據（位置、時間、標誌）作為鍵值對傳遞。

### 接收傳遞的數據
- 在新路由的狀態對象中聲明一個空的地圖變數來存儲數據。
- 在 `build` 方法中，使用 `ModalRoute.of(context).settings.arguments` 接收傳遞的數據。
- 直接將接收到的數據賦值給前面聲明的地圖變數。

### 確認數據傳遞是否成功
- 在新路由中打印出接收到的數據以確認傳遞成功。
- 確保可以在新路由的小部件樹中使用這些數據，為下一步的顯示做準備。

# 31 - Formatting & Showing Dates
### 時間格式化
- 使用 Flutter 的 `intl` 套件來格式化時間。
- 在 `pubspec.yaml` 文件中添加 `intl` 作為依賴。
- 使用 `DateFormat` 類的 `jm` 方法將當前時間格式化為更易讀的格式。

### 更新主頁顯示
- 在主頁上輸出格式化後的時間。
- 使用 `SizedBox` 為不同小部件之間添加間距。
- 使用 `Row` 小部件並添加圖標和位置文字的顯示。
- 使用 `Text` 小部件顯示位置並從 `data` 變數獲取。

### 美化文本樣式
- 設置 `Text` 小部件的樣式，包括字體大小和字母間距。
- 將 `Row` 的主軸對齊設置為居中。
- 使用 `Padding` 控制小部件的邊距，特別是將頂部邊距設置為 120 像素。

### 顯示時間
- 使用另一個 `SizedBox` 在位置和時間文本之間添加間距。
- 顯示時間文本並從 `data` 變數獲取。
- 增加時間文本的字體大小，提升可讀性。

### 改進加載畫面
- 目前的加載畫面看起來不夠美觀，計劃使用旋轉器來改善外觀。
- 將在下一個視頻中實現旋轉器的使用。
# 32 - Loaders / Spinners
### 加載畫面改進
- 目前的加載畫面只顯示「loading」字樣，顯得不夠美觀。
- 希望使用一個旋轉器來提升用戶體驗，讓用戶知道數據正在加載。

### 使用 Flutter SpinKit 套件
- 引入 `flutter_spin_kit` 套件以獲取多種旋轉器效果。
- 在 `pubspec.yaml` 中添加該套件，然後獲取依賴。

### 更新加載畫面的內容
- 在加載畫面中，移除原有的文本小部件和邊距設置。
- 使用 `Center` 小部件將旋轉器放在畫面中央。
- 將背景顏色設置為深藍色以便於顯示旋轉器。

### 自定義旋轉器
- 根據需要可以選擇不同類型的旋轉器，例如「Folding Cube」或「Fading Cube」。
- 修改旋轉器類型後保存並運行，以查看效果。

### 預覽旋轉器
- 進行預覽時，可以暫時註解掉導航到主頁的代碼，以便於觀察旋轉器的外觀和行為。
- 確保旋轉器在用戶等待數據加載時的顯示效果良好。
 
# 33 - Ternary Operators
### 背景圖片依時間顯示
- 目標是根據當前時間顯示日間或夜間背景圖片。
- 在 `WorldTime` 類別中增加一個布林屬性 `isDayTime`，用於判斷當前是白天還是晚上。

### 使用三元運算子
- 設定 `isDayTime` 的值，根據當前時間是否在早上6點到晚上8點之間進行判斷。
- 使用三元運算子來簡化布林值的設定。

### 傳遞資料到首頁
- 將 `isDayTime` 屬性通過導航傳遞到主頁，以便在主頁使用。

### 圖片資源管理
- 在 GitHub 資源庫中下載日間和夜間圖片，並將其放置於 `assets` 文件夾中。
- 在 `pubspec.yaml` 中聲明資源文件夾，以便 Flutter 應用可以使用這些圖片。

### 背景圖片的設定
- 根據 `isDayTime` 屬性決定要使用的背景圖片，使用三元運算子進行賦值。
- 使用 `Container` 和 `BoxDecoration` 來設定背景圖片，並確保圖片可以覆蓋整個畫面。

### 動態背景顏色設定
- 根據 `isDayTime` 的值設定背景顏色，白天使用淺藍色，夜間使用深藍色。
- 將背景顏色應用到 `Scaffold` 小部件中。

### 文字和圖標的顏色調整
- 調整文字和圖標的顏色，使其在背景上更為顯眼。
- 使用淺灰色或白色來提高可讀性，確保與背景顏色有良好對比。

 

# 34 - List View Builder
### 設計選擇位置頁面

- 目標是展示不同的地點選擇按鈕或卡片
- 點擊後將更新位置，創建新的 `WorldTime` 類實例並獲取時間數據
- 隨後將返回主頁顯示更新後的數據

### 數據定義

- 在 `choose_location.dart` 文件中定義位置數據
- 使用一個列表存儲不同的 `WorldTime` 實例
- 每個實例包含 URL、地點名稱和標誌圖標

### 引入所需檔案

- 將 `WorldTime` 類別引入 `services` 文件
- 這樣可以解決紅色下劃線錯誤

### 使用 ListView.builder

- 在 `Scaffold` 中定義 `body` 屬性為 `ListView.builder`
- 需要提供 `itemCount` 和 `itemBuilder` 兩個屬性
- `itemCount` 使用 `locations.length` 獲取列表長度
- `itemBuilder` 是一個函數，接受 `context` 和 `index` 參數，返回每個項目的卡片模板

### 設置 ListTile

- 使用 `Card` 和 `ListTile` 組合
- `ListTile` 需要 `onTap` 屬性，設置點擊事件
- 使用 `Text` 顯示地點名稱，通過 `locations[index].location` 獲取

### 顯示標誌圖標

- 使用 `CircleAvatar` 作為 `ListTile` 的 `leading`
- 設置 `backgroundImage` 為 `AssetImage`，圖片路徑來自 `flag` 屬性
- 使用字符串插值法來構建路徑

### 添加間距

- 將 `ListTile` 包裹在 `Padding` 中
- 使用 `symmetric` 方式設置垂直和水平間距

### 點擊事件測試

- 在 `onTap` 中打印選擇的地點
- 確認每次點擊時能正確顯示選擇的地點名稱

 

# 35 - Updating the Time
### 更新位置資料

- 當用戶點擊一個地點時，需更新位置資料
- 使用 `updateTime` 函數，該函數將調用 `getTime` 方法
- 點擊後應返回主頁並更新主頁資料

### 定義 `updateTime` 函數

- 定義一個名為 `updateTime` 的非同步函數
- 參數為 `index`，代表選中的地點
- 創建一個局部變數以存儲當前選中的 `WorldTime` 實例
- 調用該實例的 `getTime` 方法，並使用 `await` 等待結果

### 返回主頁並傳遞資料

- 使用 `Navigator.pop` 返回主頁，並傳遞時間資料
- 需要將資料以 Map 形式傳遞，包括時間、地點、旗幟和日間狀態

### 在主頁接收資料

- 使用 `await` 來處理返回的結果
- 將返回的資料存儲到 `result` 變數中
- 使用 `setState` 更新主頁的狀態，將 `data` 更新為返回的資料

### 確保資料更新

- 在 `setState` 中使用條件判斷來防止資料重置
- 若 `data` 不為空，則更新資料；若為空則返回原資料

### 測試功能

- 測試應用程序以確保選擇不同地點後，主頁時間資料正確更新
- 確保所有新地點能正確顯示時間

 


# Terminology
- Flutter：Google開發的開源UI框架，用來構建跨平台的原生應用。
- Dart：Flutter使用的編程語言，具備面向對象的特性。
- 原生應用：直接在手機操作系統上運行的應用，能使用設備硬體功能。
- 單一代碼庫：一份代碼可以同時構建iOS和Android應用，無需分別編寫。
- API：應用程序接口，應用用來與系統或服務交互的方式。
- Firebase：Google提供的後端服務，支援實時資料庫、認證和雲存儲。
- Material Design：Google設計語言，提供統一且現代化的UI風格。
- SDK：軟件開發工具包，提供必要工具來開發和運行應用。
- 熱重載：快速將代碼變更應用於正在運行的應用而無需重啟。
- 異步編程：一種處理並發操作的方式，允許程式在等待操作完成時不阻塞。
- Git：版本控制系統，用於跟蹤和管理代碼變更。
- 命令行：通過文本輸入執行指令和操作的界面。
- Clone：使用Git將遠端儲存庫複製到本地的操作。
- 路徑變量：系統用來定位可執行文件的環境變量。
- IDE：整合開發環境，提供編寫、調試和測試代碼的工具。
- Android Studio：Google推出的IDE，專門用來開發Android應用，也支持Flutter開發。
- Plugin：外掛程式，擴展IDE或開發框架的功能。
- Widget：Flutter中的UI元件，組成應用界面。
- Pub：Dart的包管理工具，用來管理外部庫和依賴。
- Branch：Git中的分支，允許開發者在不同的分支上進行獨立開發。
- **Widgets**：Flutter應用程式的基本構件，一切畫面元素都是由Widgets組成。
- **Root Widget**：最外層的Widget，包覆應用程式中的所有內容。
- **App Bar Widget**：應用程式頂部的條狀導航欄，通常包含標題和操作按鈕。
- **Text Widget**：顯示文字內容的Widget，能顯示應用標題或其他文字訊息。
- **Container Widget**：一個容器，包含和控制其他Widget的布局與樣式。
- **Widget Tree**：Widget的層級結構，顯示Widget如何相互嵌套，形成應用的界面。
- **Row Widget**：用來水平排列多個Widget的布局工具。
- **Column Widget**：用來垂直排列多個Widget的布局工具。
- **Image Widget**：用來顯示圖片的Widget。
- **Properties**：用來定義Widget外觀和行為的屬性，如字型、顏色、對齊方式等。
- **Style Property**：Text Widget的屬性，用於設定文字的樣式，如字型、字重等。
- **Text Align Property**：設定文字對齊方式的屬性（如左對齊或居中）。
- **Overflow Property**：控制文字溢出的處理方式的屬性。
- **Max Lines Property**：設定文字可顯示的最大行數的屬性。
- **Button Widget**：用來建立按鈕的Widget，支援不同狀態的樣式設定。
- **Color Property**：控制按鈕顏色的屬性。
- **Elevation Property**：設定按鈕的陰影高度，使其看起來有立體感。
- **Disabled Color Property**：設定按鈕在禁用狀態下的顏色。
- **Enabled Property**：控制按鈕是否可用的屬性。
- **Dart**：Google開發的編程語言，專為建構行動、桌面與網頁應用，Flutter使用的核心語言。
- Dart：Google開發的編程語言，用於構建跨平台應用程式，特別是Flutter框架。
- Flutter：Google開發的UI工具包，用於構建跨平台的高效能應用程式。
- 靜態型別：變數在宣告時需指定資料型別，且不能隨後更改型別。
- 變數：用來儲存資料的記憶體位置，Dart中變數需指定型別。
- int：整數型別，用於儲存整數數值。
- String：字串型別，用於儲存文字內容。
- bool：布林型別，用於儲存布林值（true或false）。
- 動態型別：允許變數的型別在程式執行期間更改，使用dynamic關鍵字。
- 函數：一段可重複執行的代碼，用來封裝特定邏輯。
- main函數：Dart中的入口函數，程式執行時自動調用。
- void：指示函數無回傳值的關鍵字。
- return：從函數回傳數據給呼叫方的指令。
- 箭頭函數：簡化版的函數語法，適用於單行回傳值的函數。
- 列表：用來儲存多個元素的集合，類似於JavaScript中的陣列。
- add方法：用於向列表添加新元素的方法。
- remove方法：用於從列表中移除指定元素的方法。
- 類別：Dart中用來定義物件的藍圖，包含屬性和方法。
- 實體化：從類別創建一個實體（物件）的過程。
- 建構子：在實體化過程中自動執行，用來初始化物件的特殊方法。
- 繼承：允許一個類別從另一個類別獲取屬性和方法的機制。
- 多型性：允許子類別覆寫父類別的方法，以實現不同的行為。
- Android Studio：一個官方的集成開發環境（IDE），用於開發 Android 應用程序，支持多種編程語言和工具。
- Flutter：一個由 Google 開發的開源 UI 軟件開發工具包，允許使用單一代碼庫構建跨平台應用。
- AVD（Android Virtual Device）：虛擬 Android 設備的管理器，允許開發者在模擬器中測試應用而無需物理設備。
- Emulator：模擬器，能在計算機上模擬移動設備的硬體和軟體環境，便於開發和測試應用。
- Gradle：一個強大的自動化構建工具，通常用於 Android 項目，負責編譯代碼、管理依賴項等。
- Plugin（插件）：擴展 Android Studio 功能的附加組件，提供對 Flutter 和 Dart 等技術的支持。
- Widget：Flutter 中的基本構建單元，代表 UI 的一個部分，可以是顯示元素（如文本、按鈕）或布局結構（如行、列）。
- Stateless Widget：不會改變狀態的 widget，一旦構建後其內容不會改變，適合靜態顯示的內容。
- Stateful Widget：可以改變狀態的 widget，能夠隨著用戶交互或數據變更而更新其顯示內容。
- Material App：Flutter 中的一個 widget，用於設置應用的基本外觀和功能，提供 Material Design 的支持。
- Scaffold：一種常用的 Flutter widget，提供應用的基本視覺布局結構，如應用欄、抽屜、底部導航等。
- Build Function：在 Flutter 中，每個 widget 都有一個 build 方法，負責構建該 widget 的 UI。
- Hot Reload：Flutter 的一項特性，允許開發者在不重啟應用的情況下快速應用代碼變更，極大提升開發效率。
- Dart：Flutter 使用的編程語言，具有現代化的語法和強大的功能，支持面向對象編程。
- Route：應用中的一個屏幕或視圖，Flutter 中的路由管理提供了不同屏幕之間的導航。
- Package：包含一組 Dart 程序碼和資源的可重用代碼庫，Flutter 生態系統中有許多第三方包可用於擴展應用功能。
- Configuration Files：設置項目的文件，包含應用的配置參數，如版本號、依賴庫等。
- External Libraries：在 Flutter 應用中引用的其他代碼庫，通常來自 Dart 的 package manager pub。
- Console：開發環境中的信息顯示區域，顯示應用運行過程中的日誌信息和錯誤提示。
- Hot Restart：重新啟動應用並加載最新的代碼變更，與 Hot Reload 相比，會清空應用的狀態。
- Material App：Flutter 中的根 widget，為應用提供 Material Design 的基本布局和主題。
- Home Property：指定應用啟動時顯示的主畫面，通常為一個 widget。
- Scaffold Widget：提供基本的視覺布局結構，包括應用欄、主體和浮動操作按鈕等。
- App Bar：位於應用上方的工具欄，通常用來顯示標題和操作按鈕。
- Title Property：用於設置應用欄的標題，通常需要使用 Text widget 顯示文本。
- Center Widget：將其子 widget 垂直和水平居中顯示的布局 widget。
- Body Property：指定應用主體的內容，位於應用欄下方。
- Text Widget：顯示文本的 widget，可以包含多種文本樣式和格式。
- Floating Action Button：一個圓形的浮動按鈕，通常用於觸發主要操作。
- OnPressed：一個回調函數，當按鈕被點擊時會被執行的代碼。
- Hot Reload：在不重啟應用的情況下快速查看代碼更改的效果，提升開發效率。
- Hot Restart：重新啟動應用以加載最新代碼變更，相較於 Hot Reload 清空應用狀態。
- Widget Tree：由多個 widget 嵌套組成的結構，展示應用的 UI 層次。
- Child Property：用於指定一個 widget 的子 widget，通常是嵌套結構的根據。
- Background Color：設置 widget 背景顏色的屬性，常用於提升視覺效果。
- Debugging：排查和修復代碼中的錯誤過程，Flutter 提供多種調試工具。
- Dart Language：Flutter 使用的編程語言，支持面向對象編程，語法現代化。
- External Libraries：可重用的代碼庫，通常來自 Dart 的 package manager pub，擴展應用功能。
- Route Management：管理應用中不同屏幕之間導航的過程，確保用戶流暢地切換視圖。
- Stateless Widget：一種不會改變自身狀態的 widget，適合靜態顯示內容。
- Background Color：設置 widget 背景顏色的屬性，增強視覺效果和用戶體驗。
- Material Design Color Palette：由 Material Design 提供的顏色選擇，包含多種顏色及其不同的色調。
- Color Class：Flutter 提供的顏色工具類，用來管理和使用顏色的屬性。
- Font Size：設置文本大小的屬性，影響字體在螢幕上的可讀性。
- Font Weight：設置字體粗細的屬性，使用預定義的 FontWeight 類來指定，如 bold。
- Text Style Widget：用於設置文本樣式的 widget，包含多種屬性以自定義顯示效果。
- Letter Spacing：設置字母之間的距離屬性，調整文本的可讀性和外觀。
- Custom Fonts：自定義字體，通過將外部字體文件添加到應用中來實現個性化設計。
- Google Fonts：一個提供各種免費字體的網站，用戶可以下載和使用這些字體。
- Pubspec.yaml：Flutter 項目的配置文件，用於指定依賴、資源及自定義字體等。
- Assets：指應用所需的文件和資源，包括圖片、字體和其他文件，需在 pubspec.yaml 中註明。
- Font Family：字體系列的名稱，用於在應用中引用特定的字體樣式。
- Indentation：在 YAML 文件中保持正確縮排的重要性，影響配置的有效性。
- Flutter SDK：Flutter 開發工具包，提供開發 Flutter 應用所需的庫和資源。
- Hot Restart：重新啟動應用以加載代碼變更，適用於清除應用狀態並重新加載所有資源。
- Stateless Widget：不會改變狀態的 widget，適合靜態內容的顯示。
- Stateful Widget：可以改變狀態的 widget，適合需要響應用戶交互的情境。
- Anonymous Function：不具名的函數，常用於回調和事件處理。
- Flutter Documentation：官方文檔，提供關於 Flutter 及其組件的詳細信息和範例。
- Debugging Tools：用於排查和修復程式錯誤的工具，幫助開發者提升代碼質量。
- Hot Reload：一種 Flutter 功能，允許在編輯代碼後自動更新應用程式的界面，無需重新啟動應用。
- Stateless Widget：一種不會隨著時間而改變狀態的 widget，其內部數據一旦初始化便不可更改。
- Stateful Widget：可以隨著時間而改變狀態的 widget，適用於需要響應用戶互動或數據改變的情況。
- Build Function：用於構建 widget 樹的函數，會返回一個 widget，並在狀態變更時被 Flutter 重新調用。
- Widget Tree：Flutter 中所有 widget 的層級結構，顯示應用的視覺元素及其關係。
- Container Widget：一種基本的 widget，常用於創建包含其他 widget 的矩形區域。
- Custom Widget：開發者自定義的 widget，允許重用和組織代碼。
- Override：用於表示子類別重新定義父類別的方法，通常用於替換已存在的方法實現。
- Inheritance：面向對象編程中的概念，允許一個類別從另一個類別獲取屬性和方法。
- Final：用於定義不可變的變數，意味著一旦賦值後就無法更改。
- Code Reusability：通過將代碼封裝在函數或類中，提高代碼的重用性和可維護性。
- Function Snippet：一種代碼片段，用於快速生成常用代碼結構，例如創建 widget 的簡寫。
- Widget Class：Flutter 中的所有視覺元素都是類的實例，並且這些類從基礎 widget 類繼承特性。
- Flutter Framework：提供一系列工具和庫的軟件架構，用於開發 Flutter 應用。
- User Interface (UI)：用戶與應用程式互動的界面，涉及所有視覺元素和布局。
- Debugging：排查和修復代碼錯誤的過程，確保應用正確運行。
- Flutter SDK：Flutter 軟體開發工具包，包含必要的庫和工具以支持 Flutter 應用開發。
- Asset Management：管理應用程序所需的資源（如圖像、字體和其他文件）的過程。
- Development Environment：開發者進行編碼和測試的環境，包括編輯器、SDK 和模擬器。
- Interactive Development：即時編程技術，允許開發者在編碼過程中實時查看更改效果。
- 網路圖片（Network Image）：從網路上獲取的圖片，通常使用 URL 來指定圖片位置。
- 資產圖片（Asset Image）：存儲在應用源文件中的圖片，通常放在專門的資料夾中。
- Image Widget：Flutter 中用於顯示圖片的 widget，可以是網路圖片或資產圖片。
- URL（Uniform Resource Locator）：用於指定網路資源位置的地址，通常用於獲取網路圖片。
- Assets Directory：存放應用資產（如圖片、字體等）的資料夾，通常命名為 assets。
- pubspec.yaml：Flutter 的配置文件，用於聲明資源和依賴項，必須配置資產以便在應用中使用。
- Dependency：在應用中需要的外部庫或框架，通常在 pubspec.yaml 中聲明。
- JPEG（Joint Photographic Experts Group）：一種常見的圖片檔案格式，適合存儲相片和圖片。
- Flutter SDK：Flutter 軟體開發工具包，包含開發 Flutter 應用所需的工具和庫。
- Image.asset：Flutter 提供的快捷方式，用於加載資產圖片，簡化圖片顯示的代碼。
- Image.network：Flutter 提供的快捷方式，用於加載網路圖片，簡化圖片顯示的代碼。
- 文件夾結構（Folder Structure）：應用中的文件和資料夾組織方式，有助於保持代碼整潔。
- 依賴管理（Dependency Management）：管理應用所需外部庫的過程，以確保代碼運行正常。
- 圖片格式（Image Format）：定義如何編碼和壓縮圖片的標準，常見格式有 JPEG、PNG 等。
- Widget 樹（Widget Tree）：所有 widget 的層級結構，描述應用的界面布局。
- 本地 URL（Local URL）：指向應用內部資源的地址，用於引用本地存儲的圖片或文件。
- 輸入（Input）：用戶或系統提供給應用的數據或命令。
- 布局（Layout）：定義 widget 如何在螢幕上排列和顯示的過程。
- 繼承（Inheritance）：面向對象編程中的概念，允許一個類別獲取另一個類別的屬性和方法。
- 快捷方式（Shortcut）：簡化代碼或操作的方式，通常是函數或語法的簡化版本。
- 圖示（Icon）：用於表示某個功能或狀態的視覺元素，通常為簡單的圖形符號。
- Material Design：Google 提出的設計語言，提供了統一的設計風格和規範，包含圖示和按鈕等元素。
- Icon Widget：Flutter 中用於顯示圖示的 widget，可以自定義顏色和大小。
- 顏色屬性（Color Property）：用於指定 widget 顏色的屬性，可以使用預設顏色或自定義顏色。
- 尺寸屬性（Size Property）：用於調整 widget 大小的屬性，通常以像素為單位。
- 按鈕（Button）：用於觸發行動或事件的 UI 元素，通常可被點擊。
- Raised Button：一種具有陰影效果的按鈕，給人浮起來的感覺，通常用於主要行動。
- Flat Button：沒有陰影效果的按鈕，顯得更平坦，通常用於次要行動或輕量級操作。
- onPressed 屬性：按鈕必須提供的函數屬性，用於定義按鈕被點擊後執行的動作。
- Child Property：用於指定子 widget 的屬性，通常用於將一個 widget 嵌套在另一個 widget 中。
- Text Widget：用於顯示文字的 widget，可以自定義字體、大小和顏色。
- Icon Button：一種專門用於顯示可點擊圖示的 widget，通常用於工具列或導航操作。
- Icon Property：在按鈕或其他 widget 中用於指定要顯示的圖示的屬性。
- Label Property：在某些按鈕中用於指定顯示的文字標籤的屬性。
- 鏈接（Link）：一種在應用中導向其他頁面的功能，通常通過按鈕或圖示實現。
- Shadow：給予按鈕或其他元素深度效果的視覺效果，常用於提高可視化層次感。
- 色彩（Color）：表示顏色的屬性，Flutter 中提供多種預設顏色，也支持自定義顏色。
- 自定義屬性（Custom Property）：開發者可以根據需求自定義的屬性，用於增強 widget 的功能。
- 實時打印（Real-time Print）：在控制台輸出信息的方式，常用於除錯過程中檢查狀態。
- 事件（Event）：用戶在應用中執行的行為，如點擊按鈕，觸發相關的函數或行動。
- 容器（Container）：Flutter 中一種最簡單的佈局 widget，用於包裹其他 widget，提供邊距、內邊距、顏色等屬性。
- 邊距（Margin）：容器外部的空間，用於控制容器與其他元素之間的距離。
- 內邊距（Padding）：容器內部的空間，用於控制內容與容器邊緣之間的距離。
- 顏色屬性（Color Property）：容器用於設置背景顏色的屬性，允許使用預設顏色或自定義顏色。
- EdgeInsets：一種用於設置邊距和內邊距的類別，支持對四個邊進行控制。
- symmetric：EdgeInsets 中的選項，允許設置水平和垂直方向的邊距或內邊距相同的值。
- all：EdgeInsets 中的選項，將相同的邊距或內邊距應用到所有四個邊。
- fromLTRB：EdgeInsets 中的選項，允許分別指定左、上、右、下四個方向的邊距或內邊距值。
- 子項（Child）：容器內部所包裹的 widget，容器會根據子項的大小調整自己的尺寸。
- 佈局（Layout）：在 Flutter 中，指的是組織和排列 widget 的方式，以達到所需的 UI 結構。
- Padding Widget：用於專門處理內邊距的 widget，可以包裹其他 widget 並提供內邊距功能。
- 錯誤提示（Error Highlight）：編程中出現問題時，編輯器提供的紅色波浪線提示，表示代碼有錯誤或不符合規範。
- Scaffold：Flutter 中的一個基礎佈局結構，提供應用的基本界面佈局，如標題欄、內容區域等。
- 標題欄（AppBar）：Scaffold 中的一部分，通常顯示應用的標題以及操作選項。
- Widget 樹（Widget Tree）：Flutter 應用中所有 widget 的結構化表示，組成一棵樹狀結構，顯示 widget 之間的父子關係。
- 寬度和高度（Width and Height）：用於設置 widget 大小的屬性，通常以像素為單位。
- 狀態管理（State Management）：在 Flutter 中，用於管理 widget 狀態的技術，確保 UI 及時更新以反映數據變化。
- 事件處理（Event Handling）：響應用戶操作（如點擊）的程式碼，通常用於按鈕等可互動元素。
- 自定義 widget（Custom Widget）：開發者自定義的 widget，通常由現有的 widget 組合而成，以滿足特定需求。
- 渲染（Rendering）：將 widget 轉換為視覺呈現的過程，在屏幕上顯示用戶界面。
- 行（Row）：Flutter 中的 widget，用於將多個子 widget 垂直排列在同一行中，支持水平佈局。
- 列（Column）：Flutter 中的 widget，用於將多個子 widget 垂直排列在同一列中，支持垂直佈局。
- 子項（Children）：行或列 widget 中的子 widget 列表，使用 children 屬性來添加多個子項。
- 主軸（Main Axis）：在行中，主軸指的是水平方向，而在列中則指的是垂直方向，用於控制佈局的主要方向。
- 副軸（Cross Axis）：在行中，副軸指的是垂直方向，而在列中則指的是水平方向，用於控制佈局的交叉方向。
- 主軸對齊（Main Axis Alignment）：用於控制行或列內子 widget 在主軸方向的對齊方式，如開始、結束、居中等。
- 副軸對齊（Cross Axis Alignment）：用於控制行或列內子 widget 在副軸方向的對齊方式，如開始、結束、居中等。
- 垂直居中（Center）：將 widget 在父容器的垂直方向上居中的對齊方式。
- 關鍵字對齊（Alignment）：用於指定 widget 在其父容器內的對齊方式，可以是四個方向中的任意一個。
- 空間分配（Space Distribution）：控制 widget 之間的空間分配方式，如均勻分配、間隔分配等。
- FlatButton：Flutter 中的一種按鈕 widget，通常用於觸發某個操作，支持子 widget 。
- 包裹（Wrap）：一種布局 widget，當一行中的 widget 超過屏幕寬度時，自動換行顯示。
- EdgeInsets：用於設置邊距和內邊距的類別，支持指定四個邊的不同值。
- 事件處理（Event Handling）：響應用戶操作（如點擊）的方法，通常用於按鈕等可互動的 widget。
- 佈局建構（Layout Building）：在 Flutter 中，創建和組織 widget 的過程，以實現所需的 UI 外觀。
- 錯誤提示（Error Highlighting）：編輯器用於顯示代碼錯誤的紅色波浪線，幫助開發者識別問題。
- 內容（Child）：行或列中的單個 widget，作為子項嵌入到父 widget 中。
- 顏色屬性（Color Property）：用於設置 widget 背景顏色的屬性，支持自定義顏色。
- 點擊事件（OnPressed）：按鈕的屬性，用於定義當用戶點擊按鈕時執行的操作。
- 鏡像（Mirroring）：在特定條件下，自動調整 widget 方向以適應不同的語言或環境，如從左到右或從右到左的文本方向。
- 容器（Container）：Flutter 中的一種通用 widget，用於創建一個包含單個子 widget 的矩形區域，支持設置邊距、顏色和裝飾。
- 垂直佈局（Vertical Layout）：將多個 widget 以垂直方向排列的方式，使用 Column widget 實現。
- 水平佈局（Horizontal Layout）：將多個 widget 以水平方向排列的方式，使用 Row widget 實現。
- EdgeInsets：用於設置 widget 的邊距和內邊距，支持四個邊的獨立配置。
- 對齊（Alignment）：用於控制 widget 在父容器內的顯示位置，例如：居中、靠左、靠右。
- 垂直中心（Vertical Center）：將 widget 在垂直方向上居中的對齊方式。
- 寬度（Width）：指定 widget 在水平方向上的大小，通常用於控制布局的空間使用。
- 高度（Height）：指定 widget 在垂直方向上的大小，通常用於控制布局的空間使用。
- 空間分配（Space Allocation）：控制 widget 之間的間距分配，例如均勻分配、間隔分配。
- 主軸對齊（Main Axis Alignment）：用於控制 widget 在主軸方向（垂直或水平方向）的排列方式。
- 副軸對齊（Cross Axis Alignment）：用於控制 widget 在副軸方向（垂直或水平方向）的排列方式。
- 空間均勻（Space Evenly）：將 widget 之間的間距均勻分配，確保左右邊距相同。
- 開始對齊（Start Alignment）：將 widget 集中於主軸的開始位置（例如在左側或上方）。
- 結束對齊（End Alignment）：將 widget 集中於主軸的結束位置（例如在右側或下方）。
- 自動調整（Auto Size）：根據內容自動調整 widget 尺寸的能力。
- 列表（List）：在 Flutter 中，使用 List 來表示 widget 的集合，通常用於承載多個子項。
- Row：將子 widget 以水平方向排列的 Flutter widget，支持多個子項的添加。
- Column：將子 widget 以垂直方向排列的 Flutter widget，支持多個子項的添加。
- 在列中添加行（Row in Column）：可以將 Row widget 嵌套於 Column 中，以創建更複雜的佈局。
- 在行中添加列（Column in Row）：可以將 Column widget 嵌套於 Row 中，以創建更複雜的佈局。
- Widget：Flutter 中的基本構建單位，所有的 UI 元素都是 widget。
- 動作選單（Action Menu）：提供對特定 widget 進行操作的快捷方式，例如添加 padding、包裝成其他 widget。
- Widget 樹（Widget Tree）：顯示 Flutter 應用中的 widget 層次結構，父子關係決定了 widget 的佈局和行為。
- 移動 widget（Move Widget）：將選定的 widget 上移或下移到 widget 樹中的其他位置。
- 添加 Padding（Add Padding）：在選定的 widget 之外添加內邊距，增強視覺間距。
- 替換 widget 與其子項（Replace Widget with its Children）：移除選定的 widget，保留其子 widget，簡化佈局。
- 包裝新 widget（Wrap with New Widget）：將選定的 widget 包裝進一個新的 widget，添加新層次結構。
- 中心對齊（Center Widget）：將選定的 widget 包裝進一個 Center widget，實現居中顯示。
- 包裝成 Row（Wrap with Row）：將選定的 widget 包裝進 Row widget，將子 widget 水平排列。
- 包裝成 Column（Wrap with Column）：將選定的 widget 包裝進 Column widget，將子 widget 垂直排列。
- Flutter Outline：顯示 Flutter 中 widget 樹的可視化工具，方便選擇和操作 widget。
- 邊緣集合（EdgeInsets）：用於設置 widget 的內邊距或外邊距。
- 屬性（Property）：Flutter 中每個 widget 都有許多可配置的屬性來定義其外觀和行為。
- 父 widget（Parent Widget）：包裹其他 widget 並決定其子 widget 的佈局或行為。
- 子 widget（Child Widget）：嵌套在其他 widget 中，依賴父 widget 進行佈局和渲染。
- 撤銷（Undo）：撤銷最近的操作，返回先前的狀態，通常使用 Ctrl + Z。
- 中心 widget（Center Widget）：將 widget 居中顯示的特殊 widget。
- Flutter Outline 快捷方式（Flutter Outline Shortcuts）：Flutter Outline 工具提供的操作按鈕，例如添加 padding、包裝成 Row 或 Column。
- 排列 widget（Organize Widgets）：使用操作選單或 Flutter Outline 工具來調整 widget 的佈局順序或結構。
- Flex 屬性（Flex Property）：用於控制 Row 或 Column 中子 widget 的彈性佈局行為，允許動態調整子 widget 的比例。
- Expanded Widget：自動擴展以填滿父 widget 中可用空間的 widget，用於彈性佈局。
- Row：水平方向排列子 widget 的容器，將其子 widget 放置在同一行內。
- Column：垂直方向排列子 widget 的容器，將其子 widget 放置在同一列內。
- Flex：決定 Expanded Widget 在 Row 或 Column 中佔據多少比例空間的屬性。
- Flexbox：CSS 中的彈性佈局模型，類似於 Flutter 中的 Row、Column 和 Expanded widget 的行為。
- EdgeInsets：定義 widget 的內邊距屬性，指定元素周圍的距離。
- Text Widget：用於顯示靜態文本內容的 widget。
- Color：定義 widget 背景顏色的屬性。
- Asset Image：從本地資產文件中加載圖片的 widget。
- Container：用來包裝其他 widget 並設置邊距、大小、顏色等屬性的容器。
- Child：指定容器或佈局 widget 的單一子元素。
- Children：指定容器或佈局 widget 的多個子元素的列表。
- Padding：用來設置 widget 內部邊距的屬性。
- Flex Property：用來設定每個 Expanded Widget 佔據父容器的空間比例。
- Proportion：用於計算 Flex 屬性的比例，總和用於分配可用空間。
- Wrap with New Widget：將現有的 widget 包裝到一個新的 widget 中的操作。
- Flex Layout：一種彈性佈局模式，用於根據可用空間自動調整元素的大小。
- Main Axis：在 Row 和 Column 中，定義子 widget 排列的主要方向。
- Cross Axis：在 Row 和 Column 中，定義子 widget 排列的次要方向。
- Overflow：當內容超出容器邊界時的情況，通常通過 Expanded widget 防止。
- Flutter：Google 開發的跨平台 UI 工具，用於構建 Android、iOS、Web 等應用程式。
- Widget：Flutter 中的基本構建單位，用於描述應用介面的視覺元素。
- MaterialApp：提供 Material Design 的根 widget，作為 Flutter 應用的進入點。
- Stateless Widget：一種不變的 widget，內容在構建後不會變動。
- Stateful Widget：可以隨狀態改變的 widget，使用 setState 方法更新 UI。
- Scaffold：提供基礎的應用頁面結構，包括 app bar、drawer、floating action button 等。
- AppBar：應用頂部的標題欄，通常包含標題、導航按鈕等。
- Column：一種 Flutter widget，允許將子 widget 垂直排列。
- Row：允許將子 widget 水平排列的 Flutter widget。
- Padding：提供子 widget 周圍的內間距，確保內容不緊貼邊界。
- Text Widget：顯示文字的 Flutter widget，可以自訂樣式與格式。
- TextStyle：用於自訂文字外觀，包括字體大小、顏色、字重等。
- Icon：顯示圖示的 Flutter widget，通常使用 material icons 庫。
- SizedBox：提供固定大小的空白框，用於增加間距。
- CircleAvatar：顯示圓形圖片或文字的 widget，常用於顯示使用者頭像。
- Divider：顯示分隔線的 widget，用於分隔不同區域的內容。
- CrossAxisAlignment：控制 Column 或 Row 中 widget 的水平對齊方式。
- AssetImage：從應用的資產中加載圖像的 widget。
- pubspec.yaml：Flutter 專案的配置文件，用於定義資產、依賴等。
- Hot Reload：一種開發工具功能，允許開發者在不重啟應用的情況下即時預覽代碼變更。
- **Stateless Widget**: 一種無狀態的小部件，不會根據外部或內部的改變而更新顯示內容。
- **Stateful Widget**: 可以根據內部狀態變化更新顯示內容的小部件，常用於動態數據的顯示或交互。
- **State Object**: 用於存儲和管理Stateful Widget中的變化數據，當數據變化時會觸發UI重新構建。
- **setState()**: 用於告訴框架數據已更改，並觸發Stateful Widget的重新構建以更新UI。
- **Widget Tree**: 由多個小部件組成的層級結構，決定應用程序的UI佈局和行為。
- **Build Context**: 構建過程中的上下文，用於追蹤小部件在應用中的位置及其相關信息。
- **Hot Reload**: 一種開發工具，允許開發者在不重新啟動應用的情況下快速更新代碼並查看變化。
- **FloatingActionButton**: 一個懸浮在頁面上的圓形按鈕，常用於觸發關鍵操作。
- **Scaffold**: 提供應用頁面佈局的結構，包括AppBar、FloatingActionButton等佈局組件。
- **Build Method**: 每當狀態或數據變化時，會自動調用此方法來重建UI。
- **Constructor**: 用於初始化小部件時的參數設置。
- **Hot Restart**: 完全重新啟動應用程序，清除所有狀態並重建小部件樹。
- **onPressed()**: 定義按鈕被點擊後的處理邏輯。
- **setState Callback**: 在setState()中定義的回調函數，用於改變狀態並觸發UI更新。
- **Dart**: Flutter應用使用的主要編程語言，用於編寫邏輯和UI。
- **Icon Widget**: 用於顯示圖標的內建小部件，通常與按鈕結合使用。
- **Color Class**: 用於定義顏色屬性的小部件，如背景顏色、文字顏色等。
- **Dynamic Data**: 根據用戶交互或其他因素變化的數據。
- **Rebuild**: 由於數據或狀態變化而重新構建UI的過程。
- **Key**: 標識小部件的唯一值，用於追蹤小部件在Widget Tree中的位置。
- **Material App**: 一個Flutter的基本小部件，用於應用的整體設置，提供主題和路由功能。
- **Stateful Widget**: 一種可隨著內部狀態改變而更新顯示內容的小部件，常用於動態數據的顯示。
- **Scaffold**: 提供頁面基本佈局結構的小部件，包括AppBar、Drawer、FloatingActionButton等。
- **AppBar**: 應用的標題欄，通常包含標題、操作按鈕和導航功能。
- **Column**: 垂直排列小部件的佈局容器，允許在垂直方向上添加多個子小部件。
- **List**: 一種集合數據結構，用於存儲一系列的元素，在Flutter中常用於管理多個小部件。
- **Map Function**: 一個高階函數，用於對列表中的每個元素執行指定的操作並返回一個新的列表。
- **Iterable**: 可迭代的數據結構，支持循環訪問其元素。
- **Text Widget**: 用於顯示文本的Flutter小部件，支持字體樣式和顏色設置。
- **Arrow Function**: 一種簡化的函數定義語法，適用於只有單一表達式的情況，通常用於簡化回調函數。
- **ListView**: Flutter內建的滾動列表小部件，能動態顯示大量數據並支持滾動。
- **String**: 一種數據類型，用於表示文本數據，例如字符串內容。
- **Child Property**: 小部件中的一個屬性，通常指定該小部件的子小部件，常見於容器類小部件。
- **Two List Method**: 將可迭代對象轉換為列表的方法，通常用於將Map函數的結果轉為可用的列表。
- **Quotes**: 表示名言或引語的字符串，通常是某個人所說的有影響力的話語。
- **Background Color**: 設置小部件背景顏色的屬性，通常用於改變視覺效果。
- **Set State**: 用於告訴Flutter框架需要更新UI，當內部狀態改變時調用此方法。
- **Preview**: 顯示應用在不同設備或環境中的預覽，以便開發者檢查UI的外觀。
- **Boilerplate Code**: 自動生成的代碼框架，通常用於快速開始新項目，但可能包含不必要的部分。
- **Data Structure**: 數據的組織方式，用於有效地存儲和管理數據。
- **Object**: 程式中的實體，由類別定義，包含屬性和行為。
- **Class**: 一種定義對象的藍圖，描述對象的屬性和方法。
- **Property**: 類別中的變量，儲存對象的狀態或數據，如`text`和`author`。
- **Constructor**: 用於創建類別實例的函數，並為該實例賦予初始值。
- **Named Parameters**: 帶名稱的參數，可以不按順序傳遞並提高可讀性。
- **String Interpolation**: 將變數或表達式嵌入字串的一種方法，通常使用`$`符號。
- **Hot Restart**: 在Flutter中重啟應用，刷新應用中的狀態和數據。
- **Separation of Concerns**: 程式設計中的原則，將不同責任分開，便於維護和擴展。
- **Modularization**: 將程式碼劃分成模塊的過程，每個模塊執行特定的功能。
- **Text Widget**: 用於顯示靜態或動態文本的Flutter小部件。
- **State Object**: 儲存小部件動態數據的地方，在狀態變更時影響UI。
- **Lib Folder**: 預設的Flutter專案資料夾，放置應用的主要程式文件。
- **Curly Braces**: 用於包裹表達式或變量，使得在字串中可以使用物件屬性。
- **Flutter Widget Tree**: Flutter應用中的組件層次結構，表示UI的結構。
- **Quote Object**: 由`Quote`類別定義的物件，包含`text`與`author`兩個屬性。
- **Quote Class**: 用於生成`Quote`對象的類別，包含兩個屬性`text`和`author`。
- **Import Statement**: 用於在一個文件中引用另一個文件的語句。
- **List Type**: 定義集合中元素的類型，如`List<String>`或`List<Quote>`。
- **Custom Class**: 開發者自定義的類別，用於描述應用中特定類型的物件。
- **Error Handling**: 識別和解決程式中的錯誤，避免系統崩潰。
- **Card Widget**: Flutter中的一種UI元件，用來創建帶有陰影效果和圓角的卡片，讓內容從頁面中凸顯出來。
- **Margin**: 用於調整元件外部的空間，控制元件與其周圍其他元素之間的距離。
- **Child Property**: 在Flutter元件中用來包含或包裹另一個元件的屬性。
- **Column Widget**: Flutter中的一種布局元件，用來垂直堆疊多個子元件。
- **Text Widget**: Flutter中用來顯示文本的元件，常用於靜態和動態文本顯示。
- **TextStyle**: 用來定義文本樣式的屬性，例如字體大小、顏色等。
- **SizedBox Widget**: Flutter中的一個元件，用來創建指定寬度或高度的空間，通常用於調整元素間距。
- **Font Size**: 用來控制文本字體大小的屬性，通常以像素為單位。
- **Color**: 定義UI元件的顏色屬性，如文本或背景顏色。
- **EdgeInsets**: 用於設置邊距或內距的類，通常用來定義元件的四個方向（上、下、左、右）的邊距大小。
- **Padding**: 用來設置元件內部與內容之間的距離，使內容不緊貼元件邊緣。
- **CrossAxisAlignment**: 在Column或Row中用來控制元件在副軸（橫向或縱向）對齊方式的屬性。
- **Stretch**: 一種CrossAxisAlignment的選項，將子元件拉伸至佔滿可用空間。
- **Widget Tree**: Flutter中的元件層次結構，每個UI元素都是一個元件，組合起來形成完整的UI。
- **Hot Reload**: 在Flutter中快速重載程式，以即時查看UI更新的功能，而不重置狀態。
- **Stateless Widget**: 一種無狀態的元件，僅用來顯示靜態資料，UI不會隨狀態變化而改變。
- **Stateful Widget**: 與Stateless Widget相反，能夠儲存狀態並在狀態變更時重新構建UI的元件。
- **Widget Mapping**: 在Flutter中通過對列表中的元素進行映射，生成對應的UI元件。
- **Template Function**: 一個生成和返回UI元件的函數，根據輸入動態返回不同的UI結構。
- **Map Function**: 用於對列表中的每個元素進行處理並生成新列表的方法。
- **Delete Icon**: 在UI中用於刪除項目的圖示，通常以垃圾桶或叉叉的形狀表示，觸發刪除操作。
- **Flat Button**: 一種Flutter的按鈕類型，外觀扁平且透明，通常用於不強調的操作，現在已被替換為`TextButton`。
- **OnPressed Property**: 按鈕的回調函數，當用戶按下按鈕時執行的代碼，通常用來處理事件。
- **SizedBox**: Flutter中的一個布局元件，用於設置空間大小，可以指定寬度和高度以控制間距。
- **SetState**: 在Stateful Widget中使用的方法，用於通知Flutter框架狀態已改變，觸發UI的重繪。
- **Remove Method**: List類中的一個方法，用於從列表中移除指定的元素。
- **Function Parameter**: 一種在函數或方法中使用的參數，允許傳遞可執行的代碼或邏輯，以供後續使用。
- **Stateless Widget**: Flutter中的一種元件，無法改變其內部狀態，適合用來顯示靜態內容。
- **Constructor Parameter**: 用於初始化Flutter元件的特殊參數，通常在創建實例時傳遞數據。
- **Final Keyword**: Dart中的一個關鍵字，用於聲明變量為不可變，一旦被賦值後不能再更改。
- **UI Update**: 指應用界面的更新過程，當數據或狀態改變時，自動反映在用戶界面上。
- **Pass Function**: 將一個函數作為參數傳遞給另一個函數或元件，允許高效的代碼重用和解耦。
- **Anonymous Function**: Dart中不具名的函數，通常用於短小的回調函數或事件處理器。
- **Hot Restart**: 在Flutter開發中，重新啟動應用並重新加載所有的代碼和資源，以便查看變更的效果。
- **State Object**: 在Stateful Widget中管理狀態的對象，負責持有和操作變量的當前狀態。
- **Map Function**: 用於將一個函數應用於列表的每個元素並返回一個新的列表，通常用於生成UI元件。
- **Card Widget**: Flutter中的一種UI元件，用於顯示與內容相關的信息，通常具有圓角和陰影效果。
- **Constructor**: Dart中的特殊方法，用於創建類的實例，通常用來初始化類的屬性。
- **Data Binding**: 在UI和數據之間建立關聯的技術，當數據改變時自動更新UI。
- **Flutter Framework**: 一個開源的UI框架，允許用戶快速構建高性能的跨平台應用程序。
- **路由（Routing）**：在應用程式中，路由是指用於導航和顯示不同頁面（或屏幕）的機制。每個路由對應於一個特定的頁面，並可以根據用戶的操作進行切換。
- **地圖（Map）**：在 Dart 中，地圖是一種數據結構，用於存儲鍵值對。類似於 JavaScript 中的物件字面量或 Python 中的字典。
- **上下文（Context）**：在 Flutter 中，上下文是一個對象，包含有關當前 Widget 樹的位置的信息。這個對象對於訪問主題、媒體查詢等非常重要。
- **初始路由（Initial Route）**：這是應用啟動時顯示的第一個路由。可以通過設定 `initialRoute` 屬性來指定。
- **狀態（State）**：狀態是用於跟蹤 Widget 的當前信息或數據。Flutter 提供了有狀態（Stateful）和無狀態（Stateless）兩種 Widget。
- **有狀態 Widget（Stateful Widget）**：這種 Widget 可以隨時間變化，並且會根據狀態的變化而重新構建 UI。
- **無狀態 Widget（Stateless Widget）**：這種 Widget 是靜態的，沒有內部狀態，無法隨時間變化。
- **推送（Push）**：在路由導航中，推送是將新的路由（或屏幕）添加到導航堆疊的過程。新的屏幕會顯示在當前屏幕之上。
- **彈出（Pop）**：彈出是從導航堆疊中刪除當前路由，並返回到上一个路由的過程。
- **列（Column）**：這是一種 Flutter 布局 Widget，用於將多個子 Widget 垂直排列。
- **子 Widget（Child Widget）**：子 Widget 是包含在其他 Widget 內部的 Widget。每個父 Widget 都可以有一個或多個子 Widget。
- **按鈕（Button）**：按鈕是一種用戶界面元素，當用戶點擊時會觸發特定的行為或事件。
- **圖標（Icon）**：圖標是一種圖形表示，通常用於在應用程序中表示動作或概念。
- **背景顏色（Background Color）**：背景顏色是設置 Widget 背景的顏色屬性，影響其顯示效果。
- **App Bar**：App Bar 是一個顯示在應用程序頂部的標題條，通常用於顯示應用的標題和導航元素。
- **函數（Function）**：函數是可以執行特定任務的代碼塊，通常接受參數並返回結果。
- **鍵（Key）**：在 Dart 中，鍵是地圖中的識別符，用於獲取對應的值。
- **值（Value）**：在地圖中，值是與鍵相關聯的數據。
- **堆疊（Stack）**：在路由管理中，堆疊是一種數據結構，用於存儲當前顯示的路由，最新的路由在最上面。
- **視圖樹（Widget Tree）**：視圖樹是由 Widget 組成的層次結構，描述應用程序的 UI 結構。
- **導航（Navigation）**：導航是用戶在應用程序中從一個屏幕轉換到另一個屏幕的過程。
- **Widget 生命周期**：指 Flutter 中 Widget 的存在和狀態變化的過程，包括創建、更新和銷毀的階段。
- **Stateless Widget**：一種不具備內部狀態的 Widget，無法在構建後更改其數據，只有在整個 Widget 被銷毀並重新創建時才能顯示不同數據。
- **Stateful Widget**：這種 Widget 可以擁有隨時間改變的狀態，當狀態發生變化時，能夠重新構建以反映新狀態。
- **setState**：一個方法，用於告訴 Flutter 框架狀態已經改變，應該重新構建 Widget 以反映更新的數據。
- **initState**：Stateful Widget 的一個生命周期方法，當 State 對象創建時第一次被調用，用於初始化狀態或訂閱數據流。
- **build 方法**：每當狀態發生變化或需要重新繪製 Widget 樹時被調用的方法，負責返回 Widget 的 UI 結構。
- **dispose 方法**：在 Widget 被銷毀時調用的生命周期方法，用於釋放資源，例如取消訂閱或釋放內存。
- **Context**：Flutter 中的上下文對象，提供有關當前 Widget 樹的位置和環境的信息，方便訪問主題和路由。
- **Widget 樹**：由各種 Widget 組成的層次結構，描述整個應用的 UI 結構。
- **State 對象**：與 Stateful Widget 相關聯的對象，持有該 Widget 的狀態信息並管理其生命周期。
- **Raised Button**：一種 Flutter 按鈕 Widget，當用戶點擊時會觸發某些行為，通常用於交互。
- **Key**：一個用於唯一識別 Widget 的標識符，有助於 Flutter 跟蹤 Widget 的狀態和位置。
- **Child Widget**：包含在其他 Widget 內的 Widget，形成 Widget 的層級結構。
- **Column**：一種 Flutter 布局 Widget，用於垂直排列多個子 Widget。
- **Text Widget**：用於顯示文本的 Flutter Widget，支持樣式和格式化。
- **Function**：一段可執行的代碼，通常用於處理事件或計算數據。
- **API**：應用程式介面，允許不同軟體系統之間的交互和數據交換。
- **Stream**：一種數據結構，允許按序傳輸數據流，通常用於處理異步事件。
- **State 管理**：管理應用中 Widget 的狀態變化的一種方法，涉及不同的策略和工具。
- **Print 語句**：用於在控制台輸出信息的調試工具，幫助開發者跟蹤代碼執行狀態。
- **異步程式碼**：代表當前動作立即開始，但結果會在未來某個時間點返回的程式碼，通常用於處理需要時間的操作，如 API 請求或數據庫查詢。
- **Future**：Dart 語言中的一種數據類型，類似於 JavaScript 的 Promise，代表一個尚未完成的異步操作的結果。
- **async**：用於標記函數為異步函數，告訴 Dart 這個函數內部會包含異步程式碼。
- **await**：在異步函數中使用的關鍵字，表示需要等待某個 Future 完成後再繼續執行後面的程式碼。
- **Network Request**：向網絡服務器發送請求以獲取數據的過程，常見於調用 API。
- **延遲（Delay）**：在異步操作中，設置一段時間後執行某個操作的方式，常用於模擬網絡請求的耗時。
- **Callback Function**：一種將函數作為參數傳遞給另一個函數，並在某個事件發生時執行的函數。
- **Console Output**：在開發過程中，將訊息輸出到控制台以幫助調試和監控程式執行狀態的方式。
- **非阻塞程式碼**：能夠在等待某個操作完成的同時，繼續執行其他程式碼的程式設計模式。
- **API Endpoint**：提供特定功能或數據的 API 地址，通過這個地址可以發送請求並獲取所需的數據。
- **String Variable**：在 Dart 中存儲字串資料的變數，用於保存和操作文本信息。
- **Function Definition**：函數的聲明和實現，用來定義可重用的代碼塊。
- **Method**：與類相關聯的函數，通常用於對類的實例執行操作。
- **Return Value**：函數或方法執行後返回的結果，可以是任何數據類型。
- **Synchronous Code**：程式碼按順序執行，每行程式碼的執行必須等到前一行完成後才能開始。
- **Data Fetching**：從外部來源（如 API 或數據庫）獲取數據的過程，通常涉及異步操作。
- **Package**：一組 Flutter 和 Dart 代碼的集合，提供額外的功能或庫以擴展應用程式的功能。
- **Dart Class**：用於創建對象的藍圖，包含屬性和方法，支持物件導向程式設計。
- **Simulated Request**：模擬實際網絡請求的一種方法，通常用於測試或開發時無法連接到實際服務器的情況。
- **Error Handling**：在程式碼中捕獲和處理錯誤或異常的過程，以提高應用的穩定性和用戶體驗。
- **Asynchronous Programming**：一種程式設計方式，允許程式在等待某些操作（如網絡請求）完成時，能夠繼續執行其他任務。
- **Flutter Package**: 一個用於 Flutter 應用程式的可重用代碼庫，封裝特定功能，開發者可以輕鬆導入使用。  
- **HTTP Package**: 一個 Flutter 包，提供方便的工具來發送 HTTP 請求和處理響應，常用於與 RESTful API 進行互動。  
- **Asynchronous Code**: 不阻塞主執行緒的代碼，允許程式在等待某些操作完成（如網路請求）時繼續執行其他任務。  
- **Future**: Dart 中的一個對象，代表未來某個時刻將會獲得的值，通常用於處理異步操作的結果。  
- **Async/Await**: Dart 中的語法，用於簡化異步代碼，使其看起來像是同步的。`async` 用於標記函數為異步，`await` 用於等待 Future 完成。  
- **Response Object**: HTTP 請求的回應，包含狀態碼、響應主體、標頭等信息。  
- **JSON (JavaScript Object Notation)**: 一種輕量級數據交換格式，易於人閱讀和撰寫，同時易於機器解析和生成，常用於 API 數據傳輸。  
- **Decode**: 將字符串或其他格式轉換為可用的數據結構，例如將 JSON 字符串轉換為 Dart 中的 Map。  
- **Map**: Dart 中的數據結構，類似於 JavaScript 的對象，鍵值對形式存儲數據。  
- **Endpoint**: 提供特定功能的 API URL，開發者可以發送請求並獲取數據的地址。  
- **YAML (YAML Ain't Markup Language)**: 一種用於數據序列化的格式，常用於配置文件，如 Flutter 的 `pubspec.yaml`。  
- **Import**: 將其他 Dart 文件或庫的代碼引入當前文件的過程，以便使用其功能和類別。  
- **Dependency**: 在 Flutter 中，其他包或庫的需求，通常在 `pubspec.yaml` 文件中聲明。  
- **Hot Restart**: Flutter 開發過程中的一個功能，重新啟動應用程序並加載最新的代碼更改，而不清空應用狀態。  
- **Pub.dev**: Flutter 和 Dart 的官方包管理平台，提供各種可用的包和庫，並提供其使用說明和版本信息。  
- **Status Code**: HTTP 響應中用於表示請求結果的數字代碼，例如 200 代表成功，404 代表未找到。  
- **Callback Function**: 一種在某個事件或操作完成後執行的函數，常用於處理異步操作的結果。  
- **Dart Convert Library**: Dart 中的庫，用於處理數據格式轉換，如將 JSON 字符串解碼為 Dart 對象。  
- **Print Statement**: 在代碼中使用的調試工具，用於輸出信息到控制台，幫助開發者了解代碼執行狀態。  
- **Stateful Widget**: 一種可變狀態的 Flutter 小部件，可以根據用戶交互或數據變化更新其顯示內容。  
- **World Time API**: 一個免費的 API，提供世界各地的當前時間和時區信息，開發者可以通過 HTTP 請求獲取時間數據。  
- **Timezone List**: 世界各地可用的時區和位置的清單，開發者可以通過這些時區來查詢當前時間。  
- **Endpoint**: 提供特定功能的 API URL，通過這個 URL 發送請求以獲取所需的數據。  
- **Response**: HTTP 請求的回應，包含請求結果的詳細信息，如狀態碼、響應體等。  
- **Date/Time String**: 表示日期和時間的字符串格式，通常遵循 ISO 8601 格式。  
- **Offset**: 表示與 UTC 時間的偏差，例如 +1 代表比 UTC 快一小時。  
- **JSON Format**: 一種輕量級數據交換格式，易於閱讀和編寫，常用於 API 數據傳輸。  
- **JSON Decode**: 將 JSON 字符串轉換為可操作的數據結構，如 Dart 中的 Map。  
- **Dart DateTime Class**: Dart 提供的類，用於處理日期和時間，可以創建和操作日期時間對象。  
- **Duration Object**: Dart 中的一個對象，用於表示一段時間，可以用來添加或減去時間。  
- **Hot Restart**: Flutter 開發過程中的一個功能，重新啟動應用程序並加載最新的代碼更改，保留應用狀態。  
- **Substring**: 字符串的一部分，通過指定起始和結束位置來提取。  
- **String Method**: 字符串類別中提供的函數，用於操作字符串，例如 `substring()`、`split()` 等。  
- **Integer Conversion**: 將字符串轉換為整數的過程，通常使用 `int.parse()` 方法實現。  
- **Non-destructive Update**: 不直接修改原始對象的方式，返回一個新對象而不影響原始數據。  
- **Reusability**: 代碼的可重用性，良好的代碼設計能夠使功能模組化，便於在不同地方重複使用。  
- **Error Handling**: 在程式中處理錯誤和異常的過程，確保應用在面對意外情況時能夠正常運行。  
- **Modular Code**: 將代碼劃分為小的、獨立的模塊，每個模塊執行特定的功能，增加代碼的可維護性。  
- **Comments**: 在代碼中添加的說明性文字，幫助其他開發者理解代碼的功能和意圖。  
- **Data Parsing**: 將數據從一種格式轉換為另一種格式的過程，常用於將 API 回應的數據轉換為應用可以使用的格式。  
- **自定義類別**：在 Dart 中，開發者可以定義自己的類別，並在應用中重複使用這些類別以封裝數據和行為。
- **導入（Import）**：在 Dart 中使用其他庫或文件的方式，允許程式碼中使用這些庫中的功能和類別。
- **非同步（Asynchronous）**：指一段程式碼的執行不會阻塞主執行緒，可以在等待某些操作（如網絡請求）時繼續執行其他代碼。
- **等待（Await）**：用於非同步函數中的關鍵字，告訴程式在這行代碼執行完之前，不要繼續執行後面的代碼，等待結果返回。
- **未來（Future）**：在 Dart 中表示一個可能在將來完成的操作，當操作完成時，它會提供一個結果或一個錯誤。
- **構造函數（Constructor）**：用於創建類的實例的特殊方法，通常用於初始化類的屬性。
- **屬性（Property）**：類中的變量，用於存儲與該類實例相關的數據。
- **方法（Method）**：類中定義的函數，用於執行特定的操作或計算。
- **JSON 解碼（JSON Decode）**：將 JSON 格式的數據轉換為 Dart 中的對象，便於程序進行操作和顯示。
- **狀態管理（State Management）**：在應用中管理 UI 和邏輯狀態的過程，以保持數據的一致性和響應性。
- **異常處理（Error Handling）**：在程式中處理錯誤或異常情況的機制，以防止程式崩潰並提供有用的反饋。
- **初始化（Initialization）**：為類的屬性賦初值的過程，通常在構造函數中進行。
- **API 端點（API Endpoint）**：指向一個可通過網絡請求訪問的特定位置，用於獲取數據或執行操作的 URL。
- **請求（Request）**：向服務器發送的數據請求，通常用於獲取或提交信息。
- **回調函數（Callback Function）**：將函數作為參數傳遞給其他函數，當特定事件發生時被調用的函數。
- **文本小部件（Text Widget）**：用於在 Flutter 應用中顯示文本的基本小部件。
- **數據類型（Data Type）**：指變量可以持有的值的類型，如整數、字符串、布爾值等。
- **圖像資源（Image Asset）**：應用程序中使用的靜態圖像文件，通常放置在特定的文件夾中以便於訪問。
- **重建（Rebuild）**：在 Flutter 中，當狀態發生變化時，自動更新 UI 的過程。
- **命名參數（Named Parameters）**：在 Dart 中定義的參數方式，允許以名稱方式傳遞參數，增加可讀性和靈活性。
- **錯誤處理（Error Handling）**：在程式中識別、捕捉並處理錯誤的過程，以防止程式崩潰並提供適當的反饋給用戶。
- **嘗試-捕捉區塊（Try-Catch Block）**：一種語法結構，允許程式在嘗試執行代碼時捕捉可能發生的異常，以便於後續處理。
- **異常（Exception）**：在程式執行過程中出現的錯誤情況，通常會導致程式停止運行，除非適當地處理它。
- **回調函數（Callback Function）**：一個被傳遞到其他函數中的函數，通常在某個事件發生後被調用。
- **狀態（State）**：在應用程序中表示組件或數據的當前情況，通常會影響UI的顯示。
- **更新狀態（Update State）**：改變應用程序或組件狀態的過程，通常會觸發重新渲染UI。
- **API（應用程序介面，Application Programming Interface）**：一組定義如何與其他應用程序或服務進行交互的規範和協議。
- **端點（Endpoint）**：API可訪問的特定URL位置，用於獲取或提交數據。
- **響應（Response）**：來自服務器的數據回應，通常是從API請求後返回的結果。
- **映射（Map）**：一種數據結構，用於將鍵（key）映射到值（value），常用於存儲結構化數據。
- **JSON（JavaScript Object Notation）**：一種輕量級的數據交換格式，易於人類閱讀和編寫，同時也易於機器解析和生成。
- **數據類型（Data Type）**：變量可以存儲的數據的類別，影響變量的存儲方式和操作方式。
- **變量（Variable）**：在程式中用於存儲數據的命名位置，可以在執行期間改變其值。
- **函數（Function）**：一段封裝了特定邏輯的可重用代碼塊，能夠執行特定任務並返回結果。
- **事件（Event）**：用戶與應用程序交互（如點擊、滑動）時發生的事情，通常會觸發相應的處理函數。
- **組件（Component）**：構成應用程序的獨立單位，負責渲染UI和管理狀態。
- **界面（Interface）**：不同系統或組件之間的交互方式和協議的定義，通常指API的表現形式。
- **狀態管理（State Management）**：管理應用程序中不同組件狀態的技術，確保數據的一致性和可追溯性。
- **緩存（Cache）**：臨時存儲最近使用的數據，以提高訪問速度並減少服務器請求。
- **異步處理（Asynchronous Processing）**：允許程式在等待某些操作（如網絡請求）完成時繼續執行其他代碼的技術。
- **路由（Routing）**：在應用程式中管理不同頁面之間的導航過程，定義如何從一個視圖轉換到另一個視圖。
- **導航器（Navigator）**：用於控制頁面切換的對象，提供方法來推送或替換當前路由。
- **推送路由（Push Route）**：將新頁面添加到導航棧的操作，通常會在當前頁面之上顯示新頁面。
- **替換路由（Replace Route）**：將當前頁面替換為新頁面的操作，從導航棧中移除舊頁面。
- **參數（Parameter）**：在函數或方法中傳遞的數據，用於控制功能的行為或輸入。
- **命名參數（Named Parameter）**：在函數調用時明確指定的參數名稱，增強代碼可讀性。
- **地圖（Map）**：一種鍵值對數據結構，用於存儲和檢索與鍵關聯的值，方便傳遞多個數據。
- **上下文（Context）**：在Flutter中提供對當前應用程序狀態的引用，允許組件訪問應用程序的配置、狀態和導航功能。
- **狀態管理（State Management）**：在應用程序中管理組件狀態的技術，以確保數據在UI和邏輯之間的一致性。
- **構建方法（Build Method）**：Flutter組件中定義的函數，負責構建和渲染UI。
- **數據傳遞（Data Passing）**：將數據從一個組件或頁面傳遞到另一個組件或頁面的過程。
- **初始化（Initialization）**：在變量或對象使用之前設置其初始狀態的過程。
- **屬性（Property）**：對象的特徵或狀態，通常用於描述對象的特定數據。
- **狀態對象（State Object）**：與Flutter組件的狀態相關聯的對象，通常用於儲存組件的狀態信息。
- **參數設置（Arguments Settings）**：設置或獲取傳遞給函數或組件的參數的過程，通常涉及數據的解包。
- **調試（Debugging）**：識別和修復程式中的錯誤或問題的過程，通常涉及查看輸出和日誌。
- **輸出（Output）**：程式生成的可見結果，通常包括顯示在用戶界面上的信息。
- **印刷（Printing）**：將信息輸出到控制台或日誌中，以便於調試或查看程式的運行狀態。
- **異步操作（Asynchronous Operation）**：允許程式在等待某些操作（如網絡請求）完成的同時繼續執行其他代碼的技術。
- **組件樹（Widget Tree）**：在Flutter中，所有UI組件的層次結構，描述了如何在屏幕上排列和顯示不同的組件。
- **日期格式化（Date Formatting）**：將日期和時間數據轉換為可讀格式的過程，通常使用特定的模式或規則來顯示。
- **Flutter套件（Flutter Package）**：可重用的代碼庫，提供特定功能或組件，通過pub.dev平台進行管理和共享。
- **依賴（Dependency）**：程式碼所需的外部庫或套件，通常在pubspec.yaml文件中聲明和管理。
- **導入（Import）**：將外部庫或模組引入當前文件的過程，使其可以在代碼中使用。
- **文本樣式（Text Style）**：定義文本顯示的外觀，包括字體大小、顏色、字母間距等屬性。
- **小部件（Widget）**：Flutter中構建用戶界面的基本單位，所有視覺元素都是小部件。
- **列（Column）**：Flutter中的一種佈局小部件，用於垂直排列子小部件。
- **行（Row）**：Flutter中的一種佈局小部件，用於水平排列子小部件。
- **間距（Padding）**：小部件與其父小部件之間的空白區域，用於改善佈局的可讀性和美觀性。
- **樣式屬性（Style Property）**：用於設置小部件外觀的屬性，例如文本大小和顏色等。
- **視圖（View）**：用戶界面中的可見部分，表示用戶與應用程序互動的區域。
- **熱重啟（Hot Restart）**：在開發過程中重新加載應用程序的過程，保留狀態並應用最新代碼變更。
- **狀態（State）**：小部件在其生命週期中的數據，可能會隨著用戶操作或數據更新而改變。
- **數據變量（Data Variable）**：存儲應用程序中使用的數據的變量，通常用於在小部件之間傳遞信息。
- **屬性訪問（Property Access）**：從對象中獲取特定屬性值的過程，通常使用點記法來完成。
- **字母間距（Letter Spacing）**：控制文本中各個字母之間的距離，通常用於改善可讀性或創造視覺效果。
- **標題（Title）**：在應用程序中提供主要信息的文本，通常用於標識頁面內容。
- **顯示數據（Display Data）**：將程序中的數據呈現給用戶的過程，通常涉及將數據轉換為UI元素。
- **設置佈局（Layout Setting）**：定義小部件如何在屏幕上排列和顯示的過程，通常涉及使用不同的佈局小部件。
- **標籤（Label）**：用於描述或標識UI元素的文本，通常用於提供上下文或提示。
- **載入螢幕（Loading Screen）**：應用程序啟動時顯示的界面，通常顯示載入進度或旋轉指示器，讓用戶知道正在加載數據。
- **旋轉指示器（Spinner）**：一種視覺元素，通常用於表示進程正在進行中，通過旋轉或變化的圖形來告訴用戶正在處理的狀態。
- **Flutter Spin Kit**：一個Flutter包，提供各種動畫旋轉指示器，用於美化載入過程的用戶界面。
- **背景顏色（Background Color）**：小部件或應用程序的背景色，用於改善可讀性或視覺吸引力。
- **小部件樹（Widget Tree）**：Flutter應用程序中小部件的層級結構，顯示如何組合不同的小部件以形成最終的用戶界面。
- **導入語句（Import Statement）**：用於將外部庫或包引入當前Dart文件的語句，從而使其可在該文件中使用。
- **依賴性管理（Dependency Management）**：管理應用程序使用的外部庫或包的過程，包括安裝、更新和刪除。
- **屬性（Property）**：小部件的可配置選項，例如顏色、大小、邊距等，決定小部件的顯示和行為。
- **熱重啟（Hot Restart）**：在Flutter開發中，重新加載應用程序的過程，以便查看代碼更改的效果，同時保留應用程序的狀態。
- **自定義樣式（Custom Style）**：為小部件創建和應用獨特的外觀和感覺的過程，通常使用文本樣式、顏色等進行調整。
- **示例（Example）**：用於演示如何使用某個包或功能的代碼片段，通常包括具體的用法和參數設置。
- **棄用（Deprecation）**：在軟體開發中，某個功能或API被標記為不推薦使用，可能在未來版本中被移除。
- **包的文檔（Package Documentation）**：對某個包的詳細說明，通常包含用法、屬性、示例代碼和安裝步驟。
- **自動化測試（Automated Testing）**：使用腳本自動執行測試以驗證應用程序功能的過程，有助於發現錯誤和確保代碼質量。
- **用戶體驗（User Experience, UX）**：用戶在使用應用程序過程中的整體感受，包括界面設計、交互方式和操作流暢度。
- **視覺效果（Visual Effects）**：用於增強用戶界面的動態效果或過渡效果，使界面更加生動和吸引人。
- **包管理工具（Package Manager）**：用於安裝和管理程序包或庫的工具，例如Flutter的pub工具。
- **參數（Parameter）**：傳遞給函數或方法的值，用於修改其行為或輸出。
- **自定義小部件（Custom Widget）**：開發者創建的符合特定需求的小部件，可以封裝重複使用的界面邏輯和樣式。
- **小部件屬性（Widget Attributes）**：用於定義小部件行為和外觀的具體選項，例如對齊、邊距和顏色。
- **背景圖像 (Background Image)**: 指在應用程序界面中作為背景顯示的圖像，通常用於增強視覺效果。  
- **三元運算子 (Ternary Operator)**: 一種簡化的條件運算符，用於根據布林條件返回不同的值，語法通常為 `condition ? valueIfTrue : valueIfFalse`。  
- **布林值 (Boolean)**: 一種數據類型，只有兩個可能的值：真 (true) 或假 (false)，通常用於邏輯運算和條件判斷。  
- **裝飾圖像 (Decoration Image)**: 在 Flutter 中，透過 `BoxDecoration` 為容器添加的背景圖像，通常用於設計應用界面。  
- **容器 (Container)**: Flutter 中的一種小部件，用於包裝其他小部件並提供樣式、間距和裝飾。  
- **盒子裝飾 (BoxDecoration)**: 一種用於容器的裝飾設置，可以包含顏色、邊框、陰影和背景圖像。  
- **資源 (Assets)**: 指應用程序中使用的靜態文件，如圖像、音頻和字型，通常存放在專門的資料夾中。  
- **圖像路徑 (Image Path)**: 在 Flutter 中指定圖像資源的相對路徑，以便加載和顯示圖像。  
- **適應模式 (BoxFit)**: 用於控制圖像在容器中的顯示方式，例如 `BoxFit.cover` 使圖像填滿整個容器。  
- **背景顏色 (Background Color)**: 指應用程序界面或小部件的背景顏色，通常用來增強視覺效果。  
- **字型樣式 (Text Style)**: Flutter 中用於設置文本顯示屬性的類型，包括顏色、大小、字體等。  
- **熱重啟 (Hot Restart)**: Flutter 開發中用於即時更新應用程序的功能，重啟應用而不需完全重建環境。  
- **狀態管理 (State Management)**: 在 Flutter 應用中管理狀態的技術和方法，確保 UI 根據數據狀態正確顯示。  
- **時間格式 (Time Format)**: 表示時間的方式，例如 24 小時制或 12 小時制，用於顯示當前時間。  
- **圖標顏色 (Icon Color)**: 指在 Flutter 應用中設置的圖標顯示顏色，通常用於提高可讀性和視覺效果。  
- **圖片縮放 (Image Scaling)**: 調整圖片大小的過程，可以保持其長寬比以適應容器的需求。  
- **資料傳遞 (Data Passing)**: 在不同小部件或屏幕之間傳遞數據的過程，以便不同部分的應用能夠使用相同的信息。  
- **色彩庫 (Color Palette)**: 定義應用程序中可用顏色的一組顏色，用於確保整體設計的一致性。  
- **主題 (Theme)**: 應用程序的整體外觀和感覺，包括顏色、字型和樣式的配置，用於統一界面設計。  
- **圖像資源 (Image Assets)**: 應用中使用的圖片文件，通常放在專案的 `assets` 資料夾中，以便引用和顯示。  
- **世界時間 (World Time)**: 一種應用程序用於獲取和顯示不同地區當前時間的功能，通常透過 API 獲取資料。  
- **位置選擇 (Location Selection)**: 用戶在應用中選擇地理位置的過程，通常透過按鈕或卡片形式呈現。  
- **資料列表 (Data List)**: 一種結構化的資料集合，通常用於存儲和顯示多個項目的資訊。  
- **清單視圖生成器 (ListView Builder)**: Flutter 中用於動態創建長列表的組件，能夠根據需求渲染可見項目。  
- **匿名函數 (Anonymous Function)**: 一種不具名的函數，通常用於簡化代碼結構，特別是在回調和事件處理中。  
- **上下文物件 (Context Object)**: 在 Flutter 中，提供有關組件位置和狀態的資訊，用於訪問主題、路由等功能。  
- **卡片模板 (Card Template)**: 用於組織和顯示資訊的界面元素，通常帶有陰影和圓角。  
- **列表項 (List Item)**: 清單中的單個元素，通常包含文本、圖片和互動功能。  
- **標題 (Title)**: 在界面上顯示的主要文本，通常用於描述或標識某個項目。  
- **事件處理 (Event Handling)**: 當用戶與界面互動（如點擊、觸摸）時，系統處理相應事件的過程。  
- **圓形頭像 (Circle Avatar)**: 一種顯示為圓形的圖片或圖標，通常用於顯示用戶或主題的標識。  
- **資產圖片 (Asset Image)**: 應用中存儲的靜態圖像，通常用於增強用戶界面的視覺效果。  
- **路由 (Routing)**: 在應用中導航到不同頁面或視圖的過程，通常涉及顯示新頁面或返回上一頁。  
- **數據傳遞 (Data Passing)**: 在不同組件之間傳遞資訊的過程，通常使用參數或狀態管理來實現。  
- **時間獲取 (Time Retrieval)**: 從服務或 API 獲取特定地區當前時間的過程。  
- **用戶介面 (User Interface)**: 用戶與應用程序互動的視覺部分，包括按鈕、圖像和文本等元素。  
- **按鈕 (Button)**: 一種可互動的界面元素，通常用於觸發事件或執行操作。  
- **圖標 (Icon)**: 一種小型圖形，通常用於表示特定功能或內容，增強可視性和易用性。  
- **數據模型 (Data Model)**: 用於表示應用程序數據結構的類，通常包括屬性和方法。  
- **狀態更新 (State Update)**: 在應用中修改某個組件或全局狀態的過程，通常會觸發界面重新渲染。  
- **void function**: 在 Dart 中，返回類型為 `void` 的函數，表示此函數不會返回任何值。
- **get time method**: 在 `WorldTime` 類中定義的一個方法，用於獲取特定地區的當前時間。
- **asynchronous function**: 一種函數，允許使用 `await` 關鍵字來暫停其執行，直到某個非同步操作完成，適合處理耗時的操作。
- **index**: 在數組或列表中表示元素位置的整數值，用於訪問特定元素。
- **Navigator**: Flutter 中的導航工具，用於在應用程序的不同頁面之間進行切換。
- **pop method**: Navigator 的一個方法，用於關閉當前頁面並返回到上一頁面。
- **context**: Flutter 中的一個對象，提供當前位置的上下文信息，幫助在 widget 樹中查找父級。
- **dynamic variable**: 可以存儲任何類型值的變量，因為其類型在運行時確定。
- **setState**: Flutter 中的一個方法，用於通知框架更新 widget 的狀態，並重建界面。
- **map**: 一種數據結構，通過鍵值對存儲數據，類似於字典，允許快速查找。
- **argument**: 傳遞給函數或方法的值，以便於該函數或方法的執行。
- **stateful widget**: Flutter 中的有狀態 widget，可以在其生命周期中持有狀態，並在狀態改變時重建。
- **stateless widget**: Flutter 中的無狀態 widget，沒有內部狀態，當其屬性改變時會重新構建。
- **await keyword**: 用於標記需要等待結果的非同步操作，確保其執行順序。
- **tile**: 在 Flutter 中常用的 UI 元素，通常用於顯示列表中的一項，包含標題和可選的圖像。
- **leading property**: 在 ListTile 中用來顯示左側圖標或圖像的屬性。
- **assets**: 應用程序中的靜態資源文件夾，通常包含圖像、字體和其他媒體文件。
- **ListView.builder**: Flutter 中的一種列表生成器，使用延遲加載來動態創建和顯示大量數據的列表。
- **return statement**: 用於從函數返回值的語句，結束函數的執行。
- **data property**: 在 widget 中用來存儲和管理狀態數據的屬性，通常在 setState 中更新。
- **ternary operator**: 一種簡化的條件語句，允許基於條件返回不同的值，通常以 `condition ? expr1 : expr2` 的形式使用。