基于Vibe Coding的安卓手机应用开发

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

课程路线图

课	主题	你要会的事	案例
1	环境即 Prompt	下载 Android 命令行工具 + Flutter SDK（Chrome 可选）+ 跑脚本，空白 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 里打开会看到一页”请用模拟器”的友好提示。

案例预览

7 个案例截图

📅 14天学习时间线

天数	日期	内容	形式	打卡任务
Day1	10/19	开营，课程介绍	直播
Day2-4	10/20-10/22	第1课：安装环境与测试模拟系统	自学/录播	✅ Task01
Day5-7	10/23-10/25	第2课：在模拟器上运行示例程序	自学/录播	✅ Task02
Day8-10	10/26-10/28	第3课：修改示例程序并重新编译测试	自学/录播	✅ Task03
Day11-13	10/29-10/31	第4课：更新程序到手机端	自学/录播	✅ Task04
Day14	11/1	结营，课程总结与展望	直播

按时完成Task打卡 → 11/1前完成全部4个任务 → 提交到Issue的对应页面注意：虽然每个Task只要求大家理解和运行1-2个示例程序，但是7个示例各有特点，希望有精力的同学把它们全部吃透。也欢迎大家提出对课程的意见，以及提交你发现的问题和改进方案。

你只需要做两件事

① 下载软件包

见 INSTALL.md。学员手动下载的只有两类：

Android 命令行工具（command-line tools）：下载后放进 D:\Android\Sdk\cmdline-tools\（SDK 平台/构建工具由 bootstrap.bat 自动安装）
Flutter SDK：解压到 D:\Android\FlutterSDK
（可选）Chrome：想在 Chrome 上运行才需要

② 跑这一个脚本

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

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

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

目录结构

vibe_flutter\
├── README.md                ← 本文件（课程路线图）
├── TASKS.md                 ← 每课任务卡 + 全局提示词工具箱
├── AGENTS.md                ← 给 AI 编程助手看的工作说明（Agent 打开本仓库时自动生效）
├── INSTALL.md               ← 软件包下载与 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
    ├── clean-example.bat    ← 一键清理生成文件、还原初始状态
    └── 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 张任务卡 —— 从易到难，配全局提示词工具箱

无需关心 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