🧩 1. App Inventor 2 邏輯核心
在實作 Flutter 之前,我們必須熟練掌握 AI2 的邏輯組塊。從單曲播放 (Music01) 到多曲清單選擇 (Music02),核心在於「資料與事件的分離」。
積木邏輯對照 (Music02)
Initial Global (變數宣告)
宣告 `ListStream` (網址清單) 與 `ListRadio` (顯示清單)。這是程式的資料庫。
When ... Click (事件觸發)
當按鈕被點擊,程式執行播放、暫停或隨機邏輯。這是程式的動力來源。
Select List Index (項目選取)
依據清單選擇器的 `SelectionIndex` 抓取正確網址。這是程式的精準定位。
透過 Nox 或 AIStarter 進行模擬測試是部署的第一步
技能樹與程式邏輯佔比分析
根據教材第 23 頁的分析,我們將開發核心能力拆解為五個維度。理解這些佔比能幫助您在學習 Flutter 時分配資源。
事件監聽 (Event Listeners) - 90%
音樂播放器的靈魂。無論是積木的 `When click` 還是程式碼的 `onPressed`,都是為了響應使用者互動。
陣列操作 (Arrays) - 65%
管理歌曲清單。從單一變數進化到 `List`,這是處理大量資料的基礎。
DOM/Widget 操作 - 40%
這部分在 Flutter 中轉化為「狀態管理 (State Management)」,是從積木跨入專業開發的關鍵門檻。
⚡ 2. Flutter 實作:環境建置 SOP
開發 Flutter 並非難事,但正確的環境設定是成功的 80%。請嚴格按照以下步驟操作。
SDK 下載與 C:\src 設定
1. 下載 Flutter SDK 壓縮檔。
2. 手動建立資料夾: 打開 C 槽,右鍵新增資料夾並命名為 src。
3. 將 SDK 解壓縮至 C:\src\flutter。
⚠️ 為什麼不裝在 Program Files?
因為那裡有檔案寫入權限限制,會導致 SDK 更新失敗。
系統 Path 變數設定
在 Windows 搜尋「環境變數」,點擊 Path -> 編輯 -> 新增。填入:
C:\src\flutter\bin
flutter doctor
若看到 "✓ Flutter" 即表示成功。
程式碼實作:音樂清單邏輯 (Dart)
這對應了您在 AI2 設定的「三首歌選擇」邏輯。我們使用物件陣列 (Map) 來儲存標題與網址。
3. 作業要求與報告規範
完成實作後,請將您的報告整理為 PDF。我們不只看「成果」,更看重您對「邏輯」的理解。