# adaptive-layout

> Claude/Codex skill by [@zakariaf](https://omgskills.com/library/zakariaf/index.md) · 61 stars · Updated 2026-09-23

Enforces adapting layout by available CONSTRAINTS/size, never device or platform checks — LayoutBuilder + MediaQuery.sizeOf/paddingOf/viewInsetsOf (not .of) for narrow rebuilds, Material 3 window size classes (compact \<600, medium 600-840, expanded 840-1200, large \>1200) as the breakpoint vocabulary, navigation affordance chosen by width (NavigationBar → NavigationRail → NavigationDrawer), list-detail single-pane-vs-two-pane, readable max-width via ConstrainedBox, Flexible/Expanded/FractionallySizedBox over fixed widths, SafeArea + display cutouts + keyboard insets, never lock orientation, foldable/hinge awareness via MediaQuery.displayFeatures, and golden-matrix verification across sizes. Use when building responsive or adaptive UI, tablet/desktop/foldable support, master-detail or two-pane screens, a NavigationRail-vs-BottomNav shell, breakpoints, LayoutBuilder, MediaQuery sizing, SafeArea/cutouts, or fixing overflow at large widths.

Tags: agent-skills, ai-agents, best-practices, claude-code, codex, coding-agent, cursor, dart, dartlang, developer-tools, drift, flutter, flutter-architecture, github-copilot, go-router, llm, material-design, mvvm, riverpod, skills

## Install

```sh
git clone https://github.com/zakariaf/Flutter-Skills /tmp/Flutter-Skills && ln -s /tmp/Flutter-Skills/skills/adaptive-layout ~/.claude/skills/adaptive-layout
```

## From README

Adaptive Layout Adapt to the space you are given, never to the device you think you are on. A phone in a foldable's front display, a resized desktop window, and a tablet in split-screen all defeat Platform.isX checks — but they all report their real constraints. Branch on width, not hardware. Read the reference for the task at hand: references/window-size-classes.md — the Material 3 window size-class breakpoints as a shared vocabulary, the WindowSizeClass enum pattern, MediaQuery.sizeOf/paddingOf/viewInsetsOf vs .of, readable max-width, SafeArea and display cutouts, keyboard insets, orientation, foldable hinge awareness. references/list-detail-and-navigation.md — single-pane-navigate vs side-by-side two-pane, choosing the navigation affordance by width and coordinating with the gorouter shell, keeping selection state in a Notifier so both panes agree. Run scripts/checkadaptive.sh before a PR. Non-negotiable rules Adapt by constraints/size, never by device or platform.

## Links

- HTML page: https://omgskills.com/library/zakariaf/flutter-skills/skills/adaptive-layout/
- GitHub: https://github.com/zakariaf/Flutter-Skills
- Author: [@zakariaf](https://omgskills.com/library/zakariaf/index.md)

## More from this repo

- [accessibility-as-code](https://omgskills.com/library/zakariaf/flutter-skills/skills/accessibility-as-code/index.md) — Enforces accessibility as a correctness property authored into each widget — Semantics(button/label) or...
   - [@zakariaf](https://omgskills.com/library/zakariaf/index.md) · 61 stars
- [ads-and-iap-monetization](https://omgskills.com/library/zakariaf/flutter-skills/skills/ads-and-iap-monetization/index.md) — Enforces opt-in, rewarded-first monetization over the service seam — a rewarded view grants exactly one benefit and...
   - [@zakariaf](https://omgskills.com/library/zakariaf/index.md) · 61 stars
- [app-startup-and-bootstrap](https://omgskills.com/library/zakariaf/flutter-skills/skills/app-startup-and-bootstrap/index.md) — Enforces a fixed main() cold-launch order — crash-log sink + FlutterError.onError + PlatformDispatcher.onError...
   - [@zakariaf](https://omgskills.com/library/zakariaf/index.md) · 61 stars