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

面向零编程经验学员的 Flutter + AI Vibe Coding 课程。每个案例都是一个可以立刻跑起来的 Flutter 工程，用脚本（Windows 批处理 / Linux 与 macOS shell）帮你自动搞定环境。

课程路线图

课	主题	你要会的事	案例
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。学员手动下载的只有两类：（Windows 装到 D:\Android\...，Linux 装到 ~/Android/...，两套脚本完全等价）

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

② 跑这一个脚本

Windows（cmd）：

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

Linux / macOS（bash）：

cd ~/Public/Misc/vibe_flutter
bash common/bootstrap.sh

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

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

需要 Visual Studio / gcc 吗？

不需要。 本课程的目标平台是 Android（模拟器/真机）和 Chrome Web：

你要做的事	Windows 需要	Linux 需要	macOS 需要
编译 / 运行 Android 应用	JDK 17+、Android SDK；不需要 Visual Studio	JDK 17+、Android SDK；不需要 gcc / g++	JDK 17+、Android SDK；不需要 Xcode
在 Chrome 里运行	Chrome 浏览器	Chrome / Chromium	Chrome 浏览器
编译桌面版（本课程不用）	Visual Studio + “使用 C++ 的桌面开发”	clang / g++、ninja、GTK 开发包	Xcode

flutter doctor 里 “Visual Studio”（Windows）、”Linux toolchain”（Linux）或 “Xcode / CocoaPods”（macOS）显示红叉时，只影响桌面端 / iOS，不影响 Android 编译和本课程。 WebView 里的 WebGL 由手机/模拟器的 WebView 渲染；Android NDK 需要时会由 Gradle 自动下载（NDK 自带 clang），与主机上的 gcc / Visual Studio 无关。

运行 bootstrap 后的 flutter doctor 会把上述可选检查显示成黄色 [!]，只有 Android toolchain 必须通过。

macOS 能用吗？

可以，Linux 的 .sh 脚本在 macOS 上基本通用：

一键安装、环境加载、编译/运行命令与 Linux 完全相同。
JDK 探测覆盖 /Library/Java/JavaVirtualMachines、Homebrew openjdk 和 Android Studio 自带 JBR；找不到时会自动下载 Temurin 的 macOS 版本。
Apple Silicon 自动使用 arm64-v8a 模拟器镜像，Intel Mac 使用 x86_64。
模拟器使用 macOS 自带的 Hypervisor.framework，不需要 KVM。
脚本兼容 macOS 自带的 bash 3.2；缺少 curl 时可用 brew install curl。
flutter doctor 的 Xcode / CocoaPods 红叉同样会显示为可选 [!]。

目录结构

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

一个案例的”约定”

每个 exampleN\ 目录都遵循同样的流程（Windows 用 .bat，Linux 用 .sh）：

看 README.md —— 课程讲什么、Vibe Coding 怎么练
跑 common\setup-example.bat exampleN（Linux：bash common/setup-example.sh exampleN）—— 生成 android/ 等平台代码
用 run-emulator 或 run-chrome 运行（课程 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（五子棋毕业课）。

共享脚本速查

干什么	Windows	Linux
把 Flutter / Android 工具加到当前 shell 的 PATH	`call common\env.bat`	`source common/env.sh`
安装 SDK 组件、建 AVD、启用 Web（一次性）	`common\bootstrap.bat`	`bash common/bootstrap.sh`
给一个案例跑 `flutter create`，生成 `android/` `web/`	`common\setup-example.bat <目录>`	`bash common/setup-example.sh <目录>`
启动模拟器（默认启动第一个 AVD）	`common\start-emulator.bat`	`bash common/start-emulator.sh`
在指定目录跑 `flutter run`	`common\run-example.bat <目录>`	`bash common/run-example.sh <目录>`
打 Debug APK（拷给真机装）	`common\build-apk.bat <目录>`	`bash common/build-apk.sh <目录>`
看 AVD / adb / flutter devices	`common\list-devices.bat`	`bash common/list-devices.sh`
友好地查看环境检查（可选红叉显示为 `[!]`）	`common\doctor.bat`	`bash common/show-doctor.sh`
清理生成文件、还原初始源码状态	`common\clean-example.bat`	`bash common/clean-example.sh`