# 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` 的形式使用。