# Responsive Adaptive

> Breakpoint rules and adaptive layout conventions for Flutter — LayoutBuilder for component decisions, MediaQuery for screen decisions, and the rule that the design artboard width is a reference and never a hardcoded target. Use this whenever writing layout code, whenever a RenderFlex overflow appears, whenever tablet or desktop or foldable support comes up, whenever a fixed pixel dimension is abo…

- **Type:** Skill
- **Install:** `agentstack add skill-draz26648-flutter-claude-skills-responsive-adaptive`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [draz26648](https://agentstack.voostack.com/s/draz26648)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [draz26648](https://github.com/draz26648)
- **Source:** https://github.com/draz26648/flutter_claude_skills/tree/main/plugins/flutter-code-quality/skills/responsive-adaptive

## Install

```sh
agentstack add skill-draz26648-flutter-claude-skills-responsive-adaptive
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Responsive and Adaptive Layout

A design file gives you one width. The app runs on hundreds. Every fixed dimension copied
from the artboard is a future overflow.

## Breakpoints

| Name | Width | Typical |
|---|---|---|
| compact | < 600 | phones, portrait |
| medium | 600–839 | small tablets, phones landscape, unfolded |
| expanded | ≥ 840 | tablets, desktop |

Define these once in `core/layout/breakpoints.dart`. Never inline a magic number
comparison in a widget.

## Which tool for which decision

**`LayoutBuilder`** for how a component lays itself out. It reports the space the widget
actually has, which is what the widget needs to know. A card in a 400pt sidebar on a
1200pt screen should lay out as a narrow card — `MediaQuery` would tell it the screen is
wide and it would be wrong.

**`MediaQuery`** for screen-level decisions: navigation pattern, number of grid columns
for the whole page, whether to show a modal or a side panel.

Reading `MediaQuery.sizeOf(context)` inside a leaf widget is almost always the wrong tool.
Note `sizeOf` rather than `MediaQuery.of(context).size` — the latter subscribes the widget
to every MediaQuery change including keyboard appearance, causing rebuilds on every
keystroke.

## Rules

**No hardcoded screen dimensions.** `width: 390` is a bug regardless of what the design
says. Fixed sizes are only valid for things that are genuinely fixed: an icon, an avatar,
a fixed-height app bar.

**Avoid percentage-of-screen sizing for text containers.** `width: screenWidth * 0.8`
looks fine at the design width and breaks at 2.0 text scale. Let content determine height
and constrain with `ConstrainedBox` where a maximum is genuinely needed.

**Scroll by default.** Any screen that can plausibly overflow — which is any screen with
more than three elements once text scale is raised — goes in a scroll view. Wrap fixed
layouts in `SingleChildScrollView` with `physics: ClampingScrollPhysics()` rather than
discovering the overflow on a small device.

**Handle the keyboard.** `resizeToAvoidBottomInset` plus a scroll view, or the form
disappears behind the keyboard on short screens.

**Safe areas are not optional.** `SafeArea` on every screen, and mind that a bottom
navigation bar needs the bottom inset while the content above it does not.

## Orientation and foldables

Do not lock orientation without a product reason. If landscape is supported, a
two-column layout above the medium breakpoint is usually the right move rather than
stretching a single column to 900pt — a text line longer than about 75 characters is
measurably harder to read.

## Common mistakes

- `MediaQuery.of(context).size.width * 0.44` to fit two cards in a row. Use
  `GridView` or `Expanded` — the arithmetic version breaks the moment padding changes.
- Testing only on the simulator's default device. Check the smallest supported device
  and the largest, at 2.0 text scale, before considering layout work finished.
- Using `Wrap` where `Flexible` was needed. `Wrap` moves the overflowing item to the
  next line, which is rarely what a design intends for a row of two elements.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [draz26648](https://github.com/draz26648)
- **Source:** [draz26648/flutter_claude_skills](https://github.com/draz26648/flutter_claude_skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-draz26648-flutter-claude-skills-responsive-adaptive
- Seller: https://agentstack.voostack.com/s/draz26648
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.