skills.rest
zakariaf
zakariafCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

adaptive-layout

Implements constraint-based responsive Flutter layouts using window size classes and MediaQuery aspect getters.

Updated Aug 22, 2026
Search Tags:#responsive design#flutter#mediaquery#master-detail#adaptive layout#layoutbuilder#window size classes
One-click install
npx skills add https://github.com/zakariaf/NearlyStop --skill adaptive-layout-zakariaf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adaptive-layout
Source: https://github.com/zakariaf/NearlyStop/tree/main/.claude/skills/adaptive-layout
Command: npx skills add https://github.com/zakariaf/NearlyStop --skill adaptive-layout-zakariaf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Flutter UIs that branch on device or platform checks break on resized desktop windows, split-screen, foldables, and tablets. This Skill enforces adapting layout to actual constraints and window size instead of guessing the device, preventing overflow, unreadable two-pane layouts on phones, and clipped content at large text scales. ## Core Features & Use Cases - Constraint-based breakpoints: Uses the Material 3 window size classes (compact <600, medium 600-840, expanded 840-1200, large >1200) as one shared enum, with LayoutBuilder for local boxes and MediaQuery.sizeOf for window-level decisions. - Adaptive navigation and list-detail: Selects NavigationBar, NavigationRail, or NavigationDrawer by width in one shell, and collapses list-detail to a single pane on compact while splitting side-by-side on expanded with shared selection state. - Insets, foldables, and verification: Handles SafeArea, display cutouts, keyboard insets, and foldable hinge awareness, plus a check_adaptive.sh script that greps for Platform.is* layout branching, MediaQuery.of over-subscription, and orientation locking. - Use Case: When building a tablet/desktop version of a Flutter app, apply this Skill to replace a hardcoded bottom navigation bar with a width-driven shell and convert a list screen into a two-pane master-detail layout. ## Quick Start Ask the AI to make a Flutter screen adaptive using window size classes, LayoutBuilder, and MediaQuery.sizeOf instead of platform checks, then run scripts/check_adaptive.sh to verify.

Frequently Asked Questions about adaptive-layout

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a Flutter layout responsive without platform checks?▼

Branch on constraints using LayoutBuilder for local boxes or MediaQuery.sizeOf(context) for window size, never Platform.isAndroid or kIsWeb. Map the width to Material 3 window size classes (compact under 600, medium 600-840, expanded 840-1200) through one shared enum.

How to choose between NavigationBar, NavigationRail, and NavigationDrawer in Flutter?▼

Choose the navigation affordance by width in one shell: NavigationBar for compact widths, NavigationRail for medium and expanded, and NavigationDrawer for large screens. Deciding once in the shell keeps every screen consistent and coordinates with a StatefulShellRoute.

What is the difference between MediaQuery.of and MediaQuery.sizeOf in Flutter?▼

MediaQuery.of(context) subscribes the widget to every MediaQuery field, so it rebuilds on keyboard, rotation, and text-scale changes. MediaQuery.sizeOf, paddingOf, and viewInsetsOf subscribe only to that one aspect, limiting rebuild scope.

How do I build a list-detail two-pane layout in Flutter?▼

On compact widths show only the list and navigate to a detail route; on expanded widths show list and detail side by side. Keep the selected item in a shared Notifier so selection survives resizes and both panes stay in sync.

Does Flutter support foldable devices and hinge awareness?▼

Yes, via MediaQuery.displayFeaturesOf(context), which reports fold and hinge DisplayFeatures with bounds. A vertical seam suggests splitting content left and right around it, treating the hinge as a dead zone, as a progressive enhancement over the base size-class layout.

Why does my Flutter UI overflow on tablets or desktop windows?▼

Overflow usually comes from fixed pixel widths on top-level regions or assuming a phone-sized window. Use Expanded, Flexible, and FractionallySizedBox for regions, cap readable content with ConstrainedBox, and verify with golden tests at multiple widths.

Related Skills

Explore More Software Engineering Skills→
aashahinaashahin

flutter-setup-declarative-routing

Configure declarative routing and deep linking in Flutter apps using go_router.

Community
Intermediate
evancaevanca
628

flutter-use-column-row-first

Build responsive Flutter layouts using Row, Column, Expanded, and Flexible widgets.

Community
Basic
soeiroosoeiroo

typography-scale

Design modular typography scales with size, weight, and line-height mappings for web and app interfaces.

Community
Advanced
flutterflutter
2.8k

flutter-building-layouts

Create Flutter app layouts using constraints and layout widgets.

Official
Intermediate