flutter-adaptive-ui

The flutter-adaptive-ui skill helps developers build, fix, review, and validate adaptive and responsive Flutter user interfaces that work seamlessly across mobile phones, tablets, desktops, web browsers, large screens, foldables, and devices with mixed input methods. Unlike traditional approaches that rely on platform detection, this skill uses a constraint-based methodology where layout decisions are driven by available window or parent constraints rather than device labels. It ensures touch interfaces remain usable while explicitly adding mouse, keyboard, and platform-specific behaviors that can be independently tested.

This skill implements adaptive layouts using standardized breakpoints (compact <600px, medium 600-840px, expanded ≥840px) and provides specialized guidance on responsive navigation patterns, adaptive dialogs, lists, and grids. It leverages Flutter's core layout principles—constraints flow down, sizes flow up, parent sets position—and uses MediaQuery and LayoutBuilder for intelligent space measurement. The skill includes comprehensive resource routing that directs developers to specific references for layout constraints, common widgets, adaptive workflows, and platform behavior branching through Capability and Policy patterns. It comes with starter code for responsive navigation and capability-based platform adaptations.

This skill is ideal for Flutter developers building cross-platform applications that need to maintain consistent user experiences across different form factors and input methods. It's particularly valuable for teams working on applications that must support phone-to-desktop continuity, adaptive navigation patterns, orientation changes, foldable devices, or complex multi-platform deployments. By focusing on constraint-driven design rather than device detection, it helps create maintainable, testable UI code that preserves application state—including scroll position, navigation state, form input, and focus—across resize, orientation, and fold changes.