本例用 Material 控件实现新增、完成和待学过滤，使用 ListView.builder 按需构建条目。业务记录是不可变值，输入控制器在 dispose 中释放。数据没有持久化，刷新或重启会重置。

创建与运行

安装 Flutter 稳定 SDK，先运行 flutter doctor 检查目标平台工具。在独立目录建立工程：

flutter create --empty --platforms web --project-name study_flutter study_flutter
cd study_flutter

将 main.dart 保存为 lib/main.dart，将 widget_test.dart 保存为 test/widget_test.dart；test 目录若不存在先创建。测试 import 使用 study_flutter，与上面的 project-name 一致。

flutter analyze
flutter test
flutter run -d chrome
flutter build web --no-web-resources-cdn

本例没有第三方包，也不依赖服务器。要运行 Android 或 iOS，需为对应平台生成配置并准备原生工具链；iOS 本地构建需要受支持的 macOS/Xcode 环境。不要把 Web 构建成功当成移动端签名、权限和真机测试已经完成。

布局与状态

Scaffold 提供页面结构，SafeArea 避开系统侵入区域，ConstrainedBox 限制宽屏内容宽度。输入行中的 TextField 使用 Expanded；剩余高度交给列表，避免无界布局。正文没有固定卡片高度，系统字号变大时仍需检查实际布局。

新增把控制器文字 trim，拒绝空内容，再产生新 ID。切换完成时根据 ID 更新记录；过滤后的索引不能直接拿去修改原始列表，否则隐藏条目后可能改错对象。CheckboxListTile 的稳定 Key 也来自 ID。

测试通过真实控件交互验证新增和筛选，不只检查模型能构造。测试仍不覆盖输入法、屏幕阅读器、系统返回、网络和不同设备的图形渲染。

性能和平台排查

需要分析掉帧或重建时，按目标平台使用受支持的 profile 模式与 Flutter DevTools，区分 UI 工作、栅格化和内存。debug 模式用于开发，不适合直接作生产性能结论；热重载后的表现也不能代表冷启动。给耗时动作写清数据规模与设备条件，再比较相同操作，不能把浏览器的 Web Vitals 直接当作原生帧指标。参见 Flutter 性能指南。

练习与验收

完成新增“网络缓存”，勾选“HTML 表单”，打开“只看待学”，检查被完成的条目隐藏；清除过滤后仍能看到完成状态。提交空白时保留输入区域与错误说明。反复改变窗口大小和系统文字缩放，检查输入行与列表。

练习：把数据操作抽成独立模型并增加单元测试，再加入存储适配层。若使用插件，分别写明支持平台、初始化错误和数据迁移方式；异步读取后要处理卸载和旧结果。

参考：Flutter 起步、Widget 测试、响应式布局。