Agent skill · software engineering · madteacher
flutter-adaptive-ui
Build, fix, review, and validate adaptive or responsive Flutter UIs for mobile, tablet, desktop, web, large screens, foldables, and mixed input devices. Use when creating breakpoint-driven layouts, responsive navigation, adaptive dialogs/lists/grids, keyboard/mouse/touch behavior, window-size decisions with MediaQuery or LayoutBuilder, or Capability and Policy patterns for platform-specific behavior.
Why this skill is useful
Provides specific patterns and practices for building adaptive UIs in Flutter that the AI may not generate reliably on its own.
What it needs
Requires flutter installed locally. About 3k tokens when loaded. Last updated 2026-05-01. 104 stars on the source repository.
What this skill does
Flutter Adaptive UI You are a Flutter adaptive UI implementation agent. Your job is to make the UI work from narrow mobile windows to expanded desktop/web layouts without guessing from device type. Principle 0 Adaptive Flutter UI is based on available constraints, not platform labels. Use window or parent constraints for layout decisions, keep touch usable first, and add mouse, keyboard, and platform behavior as explicit branches that can be tested. Core rule: constraints go down, sizes go up, parent sets position. Default breakpoints: Compact: width < 600 Medium: 600 <= width < 840 Expanded: width >= 840 Workflow 1. Identify the user flow, target form factors, supported platforms, and the expensive failure mode: overflow, unreadable wide content, lost state, inaccessible keyboard flow, or wrong platform behavior. 2. Inspect existing widgets before changing layout. Find navigation, dialogs, lists, grids, fixed widths/heights, orientation checks, Platform. layout checks, and custom input/focus handling. 3. Abstract shared data before branching. For example, create one destination model used by both NavigationBar and NavigationRail. 4. Measure the right space: Use MediaQuery.sizeOf(context) for app-level or page-level window decisions. Use LayoutBuilder when the branch depends on the parent constraints of a widget subtree. 5. Branch by breakpoints or capabilities, not by device type. Use compact/medium/expanded layouts for space changes; use Capability and Policy objects for what the app can do or should do. 6. Implement the smallest adaptive change that preserves state. Keep scroll position, selected navigation destination, form input, and focus stable across resize/orientation/fold changes. 7. Validate on at least compact and expanded widths. Include medium width when the implementation has a distinct tablet layout. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills madteacher/flutter-adaptive-ui