🛠️ 1. 開發環境建置進度
請依照下列步驟完成 VS Code 與 Flutter SDK 的設定。完成一項後請勾選，系統將記錄你的準備進度。
安裝 VS Code 與 Flutter 插件
至官網下載 VS Code，並在擴充功能中安裝由 Dart Code 發行的 Flutter 插件。
設定 Flutter SDK 與環境變數
下載 SDK 並解壓縮至 C:\src\flutter，將 bin 資料夾路徑加入系統 Path 變數中。
執行 flutter doctor 診斷
開啟終端機輸入 `flutter doctor`，並確保 Android 授權與 SDK 狀態皆為正確。
建立專案並加入 audioplayers 套件
在 `pubspec.yaml` 的 dependencies 中加入 `audioplayers: ^5.2.1` 並存檔。
完成以上所有步驟即可開始撰寫你的第一個跨平台 App 代碼！
🧠 2. 邏輯橋接：AI2 vs. Flutter
在 AI2 中我們透過視覺化的「積木」來定義行為，而在 Flutter 中我們使用「程式碼」來管理「狀態」。下圖展示了這兩種開發環境在思維重心上的顯著轉變。
關鍵轉變：狀態管理 (State)
AI2 是「事件驅動」，畫面會自動更新。但在 Flutter 中，若要變更畫面上顯示的曲名，必須呼叫 setState()。這就像是告訴手機：「資料變了，請你重新畫一次螢幕」。
資料結構的進化
AI2 使用 `List`。Flutter 則常用 List<Map<String, String>>，這能讓你更精確地管理「歌曲標題」與「播放網址」之間的成對關係。
💻 3. 程式碼解析 (main.dart)
我們將繁雜的 Flutter 代碼拆解為三個核心區塊。點擊標籤查看對應的程式碼解析，這有助於你建立「組件化」的開發觀念。
📝 學生作業繳交規範
完成實作後，請將開發過程整理成 PDF 報告。這不僅是成果的記錄，更是對開發邏輯的二次反思。請確保你的報告包含下列事項：
- VS Code 程式碼視窗截圖 (含 pubspec.yaml)
- App 運行於模擬器之實機操作畫面
- 解釋為何 Flutter 需要使用 setState 來更新歌名
- 說明 UrlSource 在播放網路音樂中的角色