flutter-adaptive-ui_skill

Overview

This skill teaches how to build adaptive and responsive Flutter UIs that scale cleanly across phones, tablets, desktops, web, and foldables. It focuses on measurable breakpoints, input-device awareness (touch, mouse, keyboard), and practical patterns like Capability/Policy separation to control platform-specific behavior. Use the guidance to make layouts that read well, navigate appropriately, and behave correctly in multi-window and split-screen scenarios.

How this skill works

Follow a three-step workflow: Abstract common data and components, Measure available space using MediaQuery.sizeOf or LayoutBuilder, and Branch UI decisions with clear breakpoints (compact, medium, expanded). The skill provides concrete layout rules (constraints go down, sizes go up), recommended breakpoints, and widget-level patterns for navigation, grids, and dialogs. It includes example Dart files you can copy into your project for responsive navigation, adaptive grids, and Capability/Policy usage.

When to use it

• Building a Flutter app that must adapt from phone to large desktop windows
• Creating navigation that switches between bottom bars, rail, and side panels
• Targeting multiple input types: touch-first UIs with keyboard and mouse enhancements
• Optimizing layouts for foldables, multi-window, or split-screen contexts
• Enforcing platform-specific rules without scattering device checks across code

Best practices

• Design small focused widgets and prefer const where possible for performance
• Make layout decisions on window size (MediaQuery/LayoutBuilder), not device type or orientation
• Support multiple inputs: keyboard focus, hover states, and touch sizes first
• Avoid locking orientation and avoid filling full width on large displays; constrain content
• Separate Capabilities (what’s available) from Policies (what should be shown) for clear testing

Example use cases

• Switch from BottomNavigationBar to NavigationRail when width >= 600
• Use LayoutBuilder to change GridView maxCrossAxisExtent for multi-column layouts
• Render dialogs fullscreen on mobile but modal on desktop using breakpoint checks
• Implement a Capability class to check hardware, and a Policy class for business rules
• Constrain article content width on large screens while keeping responsive columns for images