flutter-adaptive-ui

Create adaptive Flutter UIs using MediaQuery, LayoutBuilder, and breakpoints.

5|Updated Oct 14, 2025

Search Tags:#ui #layout #mobile #responsive #adaptive #flutter #desktop

Ready to run

npx skills add https://github.com/reloveution/dart-flutter-rules --skill flutter-adaptive-ui-reloveution

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: flutter-adaptive-ui
Source: https://github.com/reloveution/dart-flutter-rules/tree/main/skills/flutter-adaptive-ui
Command: npx skills add https://github.com/reloveution/dart-flutter-rules --skill flutter-adaptive-ui-reloveution

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating Flutter user interfaces that seamlessly adapt to various screen sizes, platforms (mobile, tablet, desktop, web), and input devices, ensuring a consistent and optimal user experience across all contexts.

Core Features & Use Cases

Adaptive Layouts: Dynamically adjust UI elements based on screen width using breakpoints.
Platform-Agnostic Design: Build UIs that work well on mobile, tablet, desktop, and web without device-specific code.
Input Device Support: Ensure usability with touch, mouse, and keyboard inputs.
Use Case: Developing a Flutter e-commerce app where product listings display as a single column on mobile, a two-column grid on tablets, and a multi-column layout with a sidebar on desktop.

Quick Start

Use the flutter-adaptive-ui skill to build a responsive navigation bar that switches between a bottom navigation bar on mobile and a navigation rail on larger screens.

Frequently Asked Questions about flutter-adaptive-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build responsive Flutter UIs that adapt to mobile, tablet, and desktop screens?▼

Build responsive Flutter UIs by measuring available space using MediaQuery and LayoutBuilder, then branching layout logic based on defined screen breakpoints. This dynamically adjusts UI elements to ensure a consistent user experience across mobile, tablet, desktop, and web platforms.

What is the best way to switch between a bottom navigation bar and a navigation rail in Flutter?▼

The best way to switch navigation components in Flutter is by branching UI logic based on screen width breakpoints. This platform-agnostic design approach dynamically swaps a bottom navigation bar on mobile for a navigation rail on larger screens.

Can I use MediaQuery and LayoutBuilder to create adaptive layouts for Flutter web?▼

Yes, you can use MediaQuery and LayoutBuilder to create adaptive layouts for Flutter web. These tools measure available screen space, enabling you to branch UI logic and build platform-agnostic interfaces that work across mobile, desktop, and web contexts.

How do you handle multiple input devices like touch and mouse in Flutter cross-platform apps?▼

Handle multiple input devices in Flutter cross-platform apps by applying platform-agnostic design principles. This approach separates capabilities from policies, ensuring your adaptive UI remains fully usable whether interacting via touch, mouse, or keyboard inputs across different screen sizes.

Why separate capabilities from policies when building Flutter responsive layouts?▼

Separating capabilities from policies when building Flutter responsive layouts ensures robust cross-platform development. This abstraction prevents device-specific code, allowing your adaptive UI to dynamically adjust elements based on screen size while maintaining consistent core functionality.