skills.rest
szeyu
szeyuCOMMUNITY
Explore all skills by this author →
GitHub

flutter-adaptive-ui

Create Flutter layouts that adapt to screen sizes using MediaQuery and LayoutBuilder.

5|Updated Feb 4, 2026
Search Tags:#flutter#breakpoints#responsive-design#adaptive-ui#mediaquery#layoutbuilder
One-click install
npx skills add https://github.com/szeyu/open-ssyok-finance --skill flutter-adaptive-ui-szeyu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-adaptive-ui
Source: https://github.com/szeyu/open-ssyok-finance/tree/main/.agents/skills/flutter-adaptive-ui
Command: npx skills add https://github.com/szeyu/open-ssyok-finance --skill flutter-adaptive-ui-szeyu

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Flutter developers often struggle to design UIs that behave well across phones, tablets, desktops, and web, requiring separate implementations for each platform.

Core Features & Use Cases

  • Three-step adaptive approach: Abstract, Measure, Branch to drive UI changes based on available space.
  • Breakpoint-driven layouts: Compact (mobile), Medium (tablet), Expanded (desktop) to switch navigation patterns like BottomNavigationBar and NavigationRail.
  • Cross-input support: Handles touch, mouse, and keyboard interactions for accessible UX across devices.
  • Use Case: Build a single app that presents a compact mobile layout on small screens and a spacious desktop navigation when opened on a large monitor.

Quick Start

Define breakpoints and implement a responsive layout using LayoutBuilder or MediaQuery, then design navigation that switches between bottom navigation and a side rail.

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 Flutter responsive layouts for mobile, tablet, and desktop?▼

Build Flutter responsive layouts by using MediaQuery.sizeOf(context) and LayoutBuilder to measure available space, then branch UI components across Compact, Medium, and Expanded breakpoints to scale across mobile, tablet, and desktop screens.

What is the best way to switch navigation patterns based on screen size in Flutter?▼

Switch navigation patterns in Flutter by applying breakpoint-driven layouts that transition between a BottomNavigationBar for mobile and a NavigationRail for tablet or desktop based on the measured window size.

How does Flutter handle cross-input interactions for adaptive UIs?▼

Flutter handles cross-input interactions for adaptive UIs by supporting touch, mouse, and keyboard events simultaneously, ensuring accessible UX and consistent behavior across diverse input devices and web platforms.

Can I use a single Flutter codebase for both mobile and web apps?▼

You can use a single Flutter codebase for mobile and web apps by implementing an Abstract, Measure, Branch approach that adapts scalable layouts and platform-agnostic interaction patterns to the available screen dimensions.

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

Use LayoutBuilder when adaptive UI branching depends on the specific constraints of a parent widget, and use MediaQuery.sizeOf(context) when responsive layout decisions require referencing the overall screen dimensions.

Why does my Flutter UI overflow on tablets but not on mobile phones?▼

Flutter UI overflows on tablets when layouts lack breakpoint-driven branching; implementing explicit Compact, Medium, and Expanded breakpoints ensures scalable layouts adapt properly to larger available screen widths.

Related Skills

Explore More Software Engineering Skills→
QunnnnQunnnn

flutter-building-layouts

Build responsive Flutter layouts with constraint-aware widget composition.

Community
Intermediate
yash-gargyash-garg

adaptive

Adapt Android Jetpack Compose UIs for responsive layouts across device form factors.

Community
Advanced
NNPopovNNPopov
2

bloc

Implement Flutter state management with Bloc and Cubit patterns.

Community
Advanced
riabtsevriabtsev

adapt

Adapt UI designs across screen sizes with breakpoint planning and responsive techniques.

Community
Intermediate