flutter-adaptive-ui
Adaptive Flutter layouts that respond to screen size, platform, and input device across mobile, tablet, desktop, and web.
- Three-step workflow: abstract common widgets, measure available space with MediaQuery or LayoutBuilder, and branch UI based on width breakpoints (compact <600, medium 600–840, expanded ≥840)
- Covers layout fundamentals including Flutter's constraint system, common patterns (Row, Column, Expanded, Container), and responsive grid/navigation examples
- Best practices emphasize size-based decisions over device type checks, support for touch/mouse/keyboard input, and avoiding full-width layouts on large screens
- Capability and Policy pattern for cleanly separating platform-specific features from business logic decisions
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
- 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.
More from madteacher/mad-agents-skills
flutter-animations
>-
13.4Kflutter-architecture
>-
1.4Kflutter-testing
>-
1.2Kflutter-networking
>-
552flutter-navigation
>-
440flutter-drift
Implement, fix, review, migrate, test, or debug Drift persistence in Flutter apps using SQLite, drift_flutter, type-safe Dart queries, generated tables, StreamBuilder or Riverpod StreamProvider UI, write operations, transactions, schema migrations, web assets, isolate sharing, and local database testing. Use when a Flutter task mentions drift, local database storage, SQLite, reactive database streams, CRUD, schemaVersion, build_runner, drift_dev make-migrations, migration tests, or Flutter-specific database setup across mobile, web, or desktop.
419