Flutter Vibe Coding 案例集

面向零编程经验学员的 Flutter + AI Vibe Coding 课程。每个案例都是一个可以立刻跑起来的 Flutter 工程，用批处理文件帮你自动搞定环境。

课程路线图

课	主题	你要会的事	案例
1	环境即 Prompt	下载 3 个软件 + 跑一个脚本，空白 Flutter 项目跑在模拟器/Chrome 上	`example1`
2	UI 即对话	用 Prompt 描述布局，靠热重载验证；可交互计数器，热重载不溢出	`example2`
3	WebView 即封装	用 Prompt 控制 JS 与 Dart 边界；加载本地 HTML，按钮触发 Flutter 端 SnackBar	`example3`
4	AI 接入	用 Prompt 处理异步、错误、加载状态；文生图界面（图片显示在 WebView 场景中），正确显示”加载中/失败/成功”	`example4`
5	游戏循环	用 Prompt 驱动网页里的 WebGL 游戏循环并验证帧率；Brick Breaker 雏形，球和挡板能动	`example5`
6	状态同步	用 Prompt 让游戏逻辑与 UI 解耦；接水果游戏中，分数和生命值从 WebGL 游戏同步到 Flutter Widget，游戏结束弹对话框	`example6`
7	单机棋牌	用 Prompt 定义规则，让 AI 实现裁判逻辑；WebGL 五子棋，可完整游玩、有胜负判定的双人棋类游戏	`example7`

游戏主场景统一用 WebView + WebGL 实现：课程 5~~7 的游戏画面跑在各案例 assets/html/ 的网页场景里，Flutter 负责外壳界面。因此**课程 3~~7 需要在模拟器/真机上运行**；在 Chrome 里打开会看到一页”请用模拟器”的友好提示（这本身就是一个教学点）。

你只需要做两件事

① 下载 3 个软件

见 INSTALL.md：

Android SDK
Commandline Tools
Flutter SDK

② 跑这一个脚本

cd /d D:\Projects\Misc\AnyTest\flutter_vibe_examples
common\bootstrap.bat

它会自动修目录、接受许可、装组件、建模拟器、启用 Web、跑验证。

完成后，进入 example1/README.md 开始第一课。

目录结构

flutter_vibe_examples\
├── README.md                ← 本文件（课程路线图）
├── TASKS.md                 ← 每课任务卡 + 全局提示词工具箱
├── INSTALL.md               ← 下载 3 个软件 + bootstrap.bat 说明
├── example1\                ← 课程 1：环境与跑通空项目
│   ├── run-emulator.bat     ← 一键在模拟器运行
│   ├── run-chrome.bat       ← 一键在 Chrome 运行
│   └── README.md            ← 课程内容
├── example2\ … example7\    ← 课程 2~7（每个目录结构相同；
│                               课程 3~7 多一个 assets\html\ 网页场景）
└── common\                  ← 所有案例共享的脚本
    ├── env.bat              ← 配置 PATH / 环境变量
    ├── bootstrap.bat        ← 一键安装 SDK 组件 + AVD + Web
    ├── setup-example.bat    ← 用 flutter create 生成工程
    ├── start-emulator.bat   ← 启动模拟器
    ├── run-example.bat      ← flutter run 通用入口
    ├── build-apk.bat        ← 构建 APK（给真机用）
    ├── list-devices.bat     ← 列出设备/AVD
    └── README.md

一个案例的”约定”

每个 exampleN\ 目录都遵循同样的流程：

看 README.md —— 课程讲什么、Vibe Coding 怎么练
跑 common\setup-example.bat exampleN —— 生成 android/ 等平台代码
用 run-emulator.bat 或 run-chrome.bat 运行（课程 3~7 请用模拟器）
改 lib\main.dart（或课程 3~7 的 assets\html\index.html），保存即可看效果
- Dart：保存自动热重载（Hot Reload）
- HTML：点 App 右上角”刷新”，或重启 App
做 TASKS.md 里本课的 2~3 张任务卡 —— 从易到难，配全局提示词工具箱（任何 AI 工具通用）

无需关心 Gradle、不需要命令行编译，整个学习过程都在 VS Code / CodeBuddy 内完成。

7 个案例全部就绪：example1（环境）→ example2（UI）→ example3（WebView） → example4（AI 状态）→ example5（WebGL 游戏循环）→ example6（状态同步） → example7（五子棋毕业课）。

共享脚本速查

脚本	干什么
`common\env.bat`	把 Flutter / Android 工具加到当前 cmd 的 PATH
`common\bootstrap.bat`	安装 SDK 组件、建 AVD、启用 Web（一次性）
`common\setup-example.bat <目录>`	给一个案例跑 `flutter create`，生成 `android/` `web/`
`common\start-emulator.bat`	启动模拟器（默认启动第一个 AVD）
`common\run-example.bat <目录>`	在指定目录跑 `flutter run`
`common\build-apk.bat <目录>`	打 Debug APK（拷给真机装）
`common\list-devices.bat`	看 AVD / adb / flutter devices