skills.rest
andrelucassvt
andrelucassvtCOMMUNITY
Explore all skills by this author →
GitHub

flutter-adaptive-ui

Implement breakpoint-driven Flutter UIs using MediaQuery and LayoutBuilder.

Updated Feb 16, 2026
Search Tags:#flutter#breakpoints#responsive-design#adaptive-ui#mediaquery#layoutbuilder#capability-policy
One-click install
npx skills add https://github.com/andrelucassvt/verify_local_purchase --skill flutter-adaptive-ui-andrelucassvt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-adaptive-ui
Source: https://github.com/andrelucassvt/verify_local_purchase/tree/main/.agents/skills/flutter-adaptive-ui
Command: npx skills add https://github.com/andrelucassvt/verify_local_purchase --skill flutter-adaptive-ui-andrelucassvt

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Developers need to deliver UI that adapts to mobile, tablet, desktop, web, foldables, and mixed input devices without resorting to device-type checks.

Core Features & Use Cases

  • Breakpoint-driven layouts using MediaQuery.sizeOf or LayoutBuilder across compact, medium, and expanded widths.
  • Responsive navigation, adaptive dialogs, lists, and grids that respond to touch, mouse, and keyboard inputs.
  • Capability and Policy pattern guidance to tailor behavior per platform while keeping code portable.

Quick Start

Open a Flutter project and implement a breakpoint-driven UI using LayoutBuilder and MediaQuery guided by the references.

Frequently Asked Questions about flutter-adaptive-ui

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

FAQPage Schema
How do I build responsive Flutter layouts that scale across mobile and desktop?▼

Build responsive Flutter layouts by applying a three-step workflow: abstract your widgets, measure constraints with MediaQuery or LayoutBuilder, and branch UI rendering by compact, medium, or expanded breakpoints.

What is the best way to adapt Flutter UIs without device-type checks?▼

Adapt Flutter UIs without device-type checks by measuring window size with MediaQuery.sizeOf and applying a capability and policy pattern to tailor behavior per platform while keeping code portable.

When should I use LayoutBuilder vs MediaQuery for adaptive UI in Flutter?▼

Use MediaQuery.sizeOf when you need global window dimensions for breakpoint-driven layout decisions, and use LayoutBuilder when you need to measure the specific constraints of a parent widget subtree.

How do I handle mixed touch and mouse inputs in Flutter responsive design?▼

Handle mixed touch and mouse inputs by implementing adaptive navigation, dialogs, and grids that respond to varying input devices, guided by a capability and policy pattern for platform-specific behavior.

Does Flutter adaptive UI support foldable devices and different form factors?▼

Flutter adaptive UI supports foldables, web, tablet, and desktop form factors by using breakpoint-driven layouts with MediaQuery and LayoutBuilder to scale across compact, medium, and expanded widths.

Why does my Flutter breakpoint layout not scale correctly on desktop?▼

Flutter breakpoint layouts fail to scale when using device-type checks instead of measuring actual available space; fix this by using MediaQuery.sizeOf or LayoutBuilder to branch by compact, medium, and expanded widths.

Related Skills

Explore More Software Engineering Skills→
Vivekmano27Vivekmano27

flutter-patterns

Organizes Flutter projects with clean architecture, Riverpod or BLoC state management, and responsive UI patterns.

Community
Intermediate
manuelbrandner85manuelbrandner85

flutter-build-responsive-layout

Implement adaptive Flutter layouts with LayoutBuilder for varying screen sizes.

Community
Intermediate
kyamsSRLkyamsSRL

responsive-design

Implement responsive layouts with container queries, fluid typography, and CSS Grid.

Community
Intermediate
Im5tuIm5tu
6

flutter-adaptive-ui

Build adaptive Flutter layouts using MediaQuery and LayoutBuilder breakpoints.

Community
Advanced