Flutter Vibe Coding 课程作业

课程仓库（开源）：code2art/vibe_flutter 课程通过 7 个由浅入深的示例（example1~7）讲解 Flutter「外壳 + WebView 场景 + vibeBridge 双向通信」的 Vibe Coding 模式。

本仓库是学员 Guanyu（cancanlala） 完成的四次课后作业与配套成果，所有产物均在安卓模拟器或真机上实际运行验证过。

作业一览

任务	主题	选择的示例	主要成果
Task01	安装环境与测试模拟系统	example1	bootstrap 成功截图、example1 运行截图、仓库总结
Task02	模拟器就绪、编译运行、源码流程图	example2	模拟器截图、应用运行截图、计数器流程图
Task03	给示例增加新功能	example3	原创「电子小鸡」：🥚🐣🐤🐔 成长 + 喂食/玩耍/睡觉 + 双向通信，含对话记录与 5 张截图
Task04	编译 APK 并安装到真机、抓 adb 日志	example3	REDMI K80 真机截图、按进程过滤的日志、可安装的 release APK

目录结构

task1/   环境安装与仓库总结
task2/   example2 计数器：运行截图 + 源码流程图（png/html）+ 构建日志
task3/   example3 电子小鸡：5 张过程截图 + 对话记录 + 改动源码备份(source/)
task4/   真机安装：真机截图 + adb 日志（精简版/完整版）+ arm64 release APK
pet-web/ 电子小鸡的纯网页版（单文件、零依赖，浏览器直接打开）
安卓环境安装步骤.md   从零复原整套 Flutter/Android 环境的详细手册（含国内镜像）

亮点：Task03 电子小鸡

在 example3（Flutter + WebView）基础上，用一句话需求驱动 Agent 实现的一个小应用：

• 网页（HTML/JS）承载宠物状态：饱腹度、心情值、精力值，三个按钮分别影响对应数值。
• 成长阶段：蛋 → 破壳 → 雏鸡 → 大鸡，全部用 Emoji 绘制，无需图片资源、完全离线。
• 网页 → Flutter：vibeBridge.postMessage 把状态实时推到 App 顶栏。
• Flutter → 网页：右下角闪电按钮调用 runJavaScript('playFromFlutter()') 反向逗宠物。
• 二次迭代：把纯数字改成红/黄/绿三色进度条（≥80 绿、≤20 红），并修复了进度条填充不显示的 CSS bug。

环境

开发环境全部安装在 D 盘（不占 C 盘），公司网络下使用 Flutter/Gradle/Maven 国内镜像。完整安装、模拟器配置、真机调试与故障排查见 安卓环境安装步骤.md。

• Flutter 3.47.7 / Dart 3.13.5、JDK 17（Temurin）、Android SDK platform-34
• 真机：REDMI K80（HyperOS / Android 16，arm64）