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

Description and use

Building a responsive Flutter Web UI without external packages: a unified breakpoint enum, optimized card grid layout, and visual regression testing to catch AI‑generated rendering bugs.

Problem

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.

Outcome

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

Workflow

• 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.

Evidence

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.

Source

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.

Source