跨越開發鴻溝:
音樂播放器開發全攻略

本互動教材將帶領您從 App Inventor 2 的視覺化積木邏輯,轉化為 Flutter 跨平台開發的專業程式碼思維。

🧩 1. App Inventor 2 邏輯核心

在實作 Flutter 之前,我們必須熟練掌握 AI2 的邏輯組塊。從單曲播放 (Music01) 到多曲清單選擇 (Music02),核心在於「資料與事件的分離」。

積木邏輯對照 (Music02)

🟠

Initial Global (變數宣告)

宣告 `ListStream` (網址清單) 與 `ListRadio` (顯示清單)。這是程式的資料庫。

🟡

When ... Click (事件觸發)

當按鈕被點擊,程式執行播放、暫停或隨機邏輯。這是程式的動力來源。

🔵

Select List Index (項目選取)

依據清單選擇器的 `SelectionIndex` 抓取正確網址。這是程式的精準定位。

AI2 模擬介面
Player Test
MP3 PLAYER
選擇音樂:
Select Song...

透過 Nox 或 AIStarter 進行模擬測試是部署的第一步

技能樹與程式邏輯佔比分析

根據教材第 23 頁的分析,我們將開發核心能力拆解為五個維度。理解這些佔比能幫助您在學習 Flutter 時分配資源。

事件監聽 (Event Listeners) - 90%

音樂播放器的靈魂。無論是積木的 `When click` 還是程式碼的 `onPressed`,都是為了響應使用者互動。

陣列操作 (Arrays) - 65%

管理歌曲清單。從單一變數進化到 `List`,這是處理大量資料的基礎。

DOM/Widget 操作 - 40%

這部分在 Flutter 中轉化為「狀態管理 (State Management)」,是從積木跨入專業開發的關鍵門檻。

2. Flutter 實作:環境建置 SOP

開發 Flutter 並非難事,但正確的環境設定是成功的 80%。請嚴格按照以下步驟操作。

01

VS Code & 插件安裝

下載並安裝 VS Code。進入「擴充功能」搜尋並安裝 FlutterDart

Crucial
02

SDK 下載與 C:\src 設定

1. 下載 Flutter SDK 壓縮檔。
2. 手動建立資料夾: 打開 C 槽,右鍵新增資料夾並命名為 src
3. 將 SDK 解壓縮至 C:\src\flutter

⚠️ 為什麼不裝在 Program Files?
因為那裡有檔案寫入權限限制,會導致 SDK 更新失敗。

03

系統 Path 變數設定

在 Windows 搜尋「環境變數」,點擊 Path -> 編輯 -> 新增。填入:
C:\src\flutter\bin

# 驗證指令
flutter doctor

若看到 "✓ Flutter" 即表示成功。

程式碼實作:音樂清單邏輯 (Dart)

這對應了您在 AI2 設定的「三首歌選擇」邏輯。我們使用物件陣列 (Map) 來儲存標題與網址。

// Initial Global 轉換 final List<Map<String, String>> playlist = [ {"title": "Westlife", "url": "http://.../westlife.mp3"}, {"title": "Not Together", "url": "http://.../not.mp3"}, {"title": "God Blessing", "url": "http://.../god.mp3"}, ]; // Select List Item 轉換 void playSong(int index) { player.setSource(UrlSource(playlist[index]['url']!)); player.resume(); }
Live Preview Box
尚未播放
請選擇音樂 ▼
PLAY
RANDOM

3. 作業要求與報告規範

完成實作後,請將您的報告整理為 PDF。我們不只看「成果」,更看重您對「邏輯」的理解。

實作畫面的截圖 (包含模擬器執行)
各個按鈕功能測試說明
邏輯應用說明:Initial Global, Click, Select List Index