flutter-adaptive-ui
CommunityBuild responsive Flutter UIs for all screens.
Software Engineering#layout#flutter#breakpoints#responsive-design#adaptive-ui#LayoutBuilder#MediaQuery
AuthorIm5tu
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Flutter apps often struggle to provide a consistent user experience across mobile, tablet, desktop, and web. This Skill offers a structured approach to designing adaptive UIs that respond to screen size and input devices, ensuring usable interfaces in any context.
Core Features & Use Cases
- 3-step adaptive workflow (Abstract → Measure → Branch) to derive responsive layouts.
- Breakpoint-driven UI patterns that switch between navigation styles, grids, and content density based on available width.
- Use cases include mobile-first apps that scale to tablet and desktop, foldable devices, and environments with mouse/keyboard input.
Quick Start
Implement an adaptive Flutter layout by detecting width with MediaQuery or LayoutBuilder and rendering MobileLayout for small widths and DesktopLayout for large widths.
Dependency Matrix
Required Modules
None requiredComponents
referencesassets
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: flutter-adaptive-ui Download link: https://github.com/Im5tu/claude/archive/main.zip#flutter-adaptive-ui Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.