Responsive Flutter without a single package — and what building it with AI actually taught me

说明与用途

在 Flutter Web 中不使用外部包构建响应式 UI：统一的断点枚举、优化卡片网格布局，并通过截图进行视觉回归测试以捕捉 AI 生成的渲染错误。

问题

Implementing responsive layouts in Flutter Web without relying on external packages, while ensuring consistency across multiple files and catching visual bugs introduced by AI-generated code.

结果

Consistent, maintainable responsive layout achieved without external packages; AI accelerated boilerplate generation but required visual regression testing to catch rendering bugs.

工作流

• 1. Define ScreenSize enum with breakpoints and a pick method.
• 2. Replace all width checks with screen.pick calls.
• 3. Centralize breakpoint constants and spacing scale.
• 4. Build explicit rows for card grids using IntrinsicHeight and Row(crossAxisAlignment: stretch).
• 5. Add visual regression tests: capture screenshots at each breakpoint, compare before/after.
• 6. Pair AI (Claude Code) to generate pick calls and refactor constants.
• 7. Review screenshots to catch visual bugs not caught by flutter analyze.

证据

Claude Code was fast at generating the pick‑based breakpoint calls across a dozen sections once the pattern existed, and good at catching redundant const after a refactor moved code between const and non‑const contexts.

来源

The bug only exists as pixels — and pixels are the one artifact an AI reading a diff never sees unless someone forces the loop to include them.

来源