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

Описание и применение

Создание адаптивного интерфейса в Flutter Web без сторонних пакетов: централизованная система брейкпоинтов, оптимизация сетки карточек и проверка визуальных ошибок с помощью снимков экрана.

Задача

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.

Источник