Hi~ 我是 Eric！🚀

你有過這種經歷嗎？剛拿到一份新工作的 Offer，準備報到時發現：「喔！我們接下來的會開發 App 喔！技術選型交給你決定。」，那我選擇了 Flutter。

雖然我有不少開發經驗，但老實說，在這一刻之前，我對 Flutter 的瞭解大概只停留在「它是 Google 出的」、「用 Dart 語言」以及「可以跨平台」這三句話。

面對即將到來的新挑戰，我給了自己一個大膽的目標：用一個星期的時間，從零開始掌握 Flutter，並且直接進入開發狀態。

而在這個「極速學習」的過程中，我最好的夥伴不是教科書，而是 AI (Codex)。

為什麼是 AI？為什麼是 Codex？

在過去，學習一門新技術的路徑通常是：

  1. 買一本厚厚的技術書籍。
  2. 找一套長達 20 小時的線上課程。
  3. 跟著 Hello World 一步步往下走。

但在 AI 時代，這種「線性學習」已經顯得太慢了。我選擇了一種更具侵略性的方式：「以專案為核心的 AI 驅動學習法」。

我請 Codex 為我生成了一個「具備一定規模」的 Flutter 專案。這個專案不是簡單的 Todo List，而是包含了：

  • 多層次的 UI 組件
  • 狀態管理（State Management）
  • API 串接與異步處理
  • 導航與路由（Navigation）

我不只是在看程式碼，我是在「拆解」一個由 AI 生成的專家級範例。

我丟給 Codex App 的 Prompt：先生成一個可以被教學的專案

這次我不是只請 AI「幫我寫一個 Flutter App」。我更想測試的是：如果一開始就把 AI 定位成一位 Flutter & Dart 導師，讓它同時負責學習路線、專案架構、註解說明與文件產出，那我是不是能用一個完整專案來反推 Flutter 的學習地圖？

所以我把下面這段 Prompt 丟給 Codex App，請它先生成一個可以被教學、可以被拆解、也可以讓我逐步追問的 Flutter 學習專案：

# Role
具備十年開發經驗的 Flutter & Dart 全端開發導師。你擅長將複雜的跨平台開發概念拆解為易於理解的學習模組，並能編寫高品質、具備教學價值的程式碼。

# Personality
專業、極具耐心、邏輯清晰。你深知初學者的痛點，語氣溫和但對程式碼品質與架構設計有著嚴格的標準。

# Goal
協助使用者在 7 天內，從零基礎開始學習並完成一個具備實踐價值的 Flutter 專案。你需要提供一份詳細的 7 天學習路徑，並逐步引導使用者完成專案開發。

# Success Criteria
1. 七天學習規劃：每日主題必須環環扣合，涵蓋 Dart 基礎、Widget 系統、狀態管理、API 串接及打包發布。
2. 專案文件完整性：包含 `README.md`、專案架構說明書、以及核心功能的技術文檔。
3. 程式碼品質：
   - 遵循 Flutter 官方最佳實踐（Linter rules）。
   - 每段邏輯前必須有詳盡的註解。
   - 註解語言必須極其口語化且易懂（例如：解釋為什麼要用這個 Widget 而不是另一個）。

# Constraints
- 開發環境：使用最新穩定版 Flutter SDK 與 Dart 語法。
- 專案架構：必須使用清晰的資料夾結構（如 MVC 或 Clean Architecture 簡化版）。
- 學習門檻：假設使用者為零基礎小白，避免過度使用未經解釋的技術術語。

# Output Format
1. 【學習路線圖】：以表格呈現 Day 1 到 Day 7 的學習重點與當日目標。
2. 【專案架構圖】：使用 Mermaid 語法或 Markdown 列表說明資料夾結構。
3. 【實作引導】：按步驟提供核心程式碼區塊，且程式碼必須包含「小白級」註解。
4. 【技術文檔】：包含專案初始化說明與常見錯誤排查。

# Stop Rules
- 若生成的程式碼缺乏註解，請立即停止。
- 若學習路徑中遺漏了環境安裝或 Dart 基本語法，請立即停止並補齊。

# Implementation (Start Day 1 Now)
請先從「Day 1：環境建立與 Dart 語法精要」開始，並同時定義我們要實作的學習型專案主題（例如：多功能 Todo List 或 個人理財助手）。

這段 Prompt 的重點不是讓 AI 一次把 App 寫完，而是讓它先建立一個「可以被學習」的專案。專案裡不只要有程式碼，還要有 README.md、架構說明、功能導讀、教學章節與測試範例，這樣我後續問問題時，AI 才能直接對著實際的檔案、資料夾與程式碼回答。

也因為 Codex App 可以看見專案中的架構、程式碼與文件，我接下來的學習方式就變成一種很接近真人助教的互動：

  • 我可以問它：「main() 之後 App 是怎麼進到首頁的？」
  • 我可以問它：「為什麼這裡用 StatelessWidget，不是 StatefulWidget？」
  • 我可以請它帶我看 lib/core/、lib/features/、docs/lessons/ 分別在扮演什麼角色。
  • 我也可以在看不懂某段程式碼時，直接請它用初學者聽得懂的方式重講一次。

這讓 AI 不只是幫我產生程式碼，而是換成一名專業教師的角色，站在這個專案旁邊，陪我一層一層把 Flutter 拆開來學。

我的學習地圖：從語法到文件

因為我對 Flutter 是一張白紙，所以我將這一週的計畫拆解成幾個關鍵階段：

1. 語法先行：Dart 的基本功

Flutter 使用的是 Dart。雖然我有 C# 和 JavaScript 的背景，但 Dart 的非同步處理（Async/Await）、Mixins 以及強型別特性，還是需要透過 AI 快速對齊概念。

2. 概念突破：一切皆 Widget

在 Flutter 的世界裡，「Everything is a Widget」。我透過 AI 幫我生成了各種 Widget 的對照表與輔助說明文件，讓我能快速理解 Stateless 與 Stateful 的差別。

3. AI 輔助文件：我的專屬助教

學習最痛苦的是遇到問題沒人問。我讓 AI 針對生成的程式碼，同步產出詳細的「技術架構文檔」與「註解說明」。這等於是請了一個 24 小時在線的導師，隨時解釋每一行程式碼的設計意圖。

這場實驗的開端

這篇文章只是這場「一週挑戰」的序幕。

如果你也正處於需要快速轉型、或想知道 AI 到底能把一個開發者的學習速度推到什麼極限，歡迎跟著這個系列一起走下去。

下一篇開始，我會正式進入 Flutter AI 學習 Day 1。

Day 1 我不會急著寫很多畫面，而是先把整個專案看懂：從 Dart 基礎語法開始，接著讀 README.md、追 main.dart 的啟動流程，再一路走到首頁、route 與 feature 頁面。

也就是說，第一天的重點不是「做出多少 UI」，而是先建立一張不會迷路的地圖。當我知道這個 AI 生成的 Flutter 專案每個資料夾、每個入口、每個 Widget 大概在扮演什麼角色，後面幾天的狀態管理、API 串接與測試才會真的接得起來。

下一篇，我們就從 Dart 基礎與 Flutter 專案地圖 開始。