skills.rest
jrollin
jrollinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

flutter-adaptive-ui

Build adaptive Flutter UIs using MediaQuery and LayoutBuilder breakpoints.

2|Updated Mar 21, 2019
Search Tags:#ui#responsive design#cross-platform#mobile development#flutter#adaptive layout
One-click install
npx skills add https://github.com/jrollin/dotfiles --skill flutter-adaptive-ui-jrollin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-adaptive-ui
Source: https://github.com/jrollin/dotfiles/tree/main/claude/.claude/skills/flutter-adaptive-ui
Command: npx skills add https://github.com/jrollin/dotfiles --skill flutter-adaptive-ui-jrollin

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps developers create Flutter applications that adapt seamlessly to any screen size, platform, or input device, ensuring a consistent and excellent user experience across all devices.

Core Features & Use Cases

  • Adaptive Layouts: Design UIs that scale gracefully from mobile phones to large desktop displays.
  • Cross-Platform Support: Ensure your app looks and functions beautifully on mobile, tablet, desktop, and web.
  • Responsive Navigation: Implement navigation patterns that adjust based on available screen real estate (e.g., bottom bar vs. navigation rail).
  • Input Device Handling: Support touch, mouse, and keyboard interactions effectively.
  • Use Case: You are building a new Flutter app and want to ensure it looks great on both a small smartphone screen and a large desktop monitor. This Skill provides the patterns and best practices to achieve this.

Quick Start

Use the flutter-adaptive-ui skill to build a responsive layout that adapts to screen width using MediaQuery and LayoutBuilder.

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 different screen sizes?▼

Build responsive Flutter UIs by measuring available space with MediaQuery and LayoutBuilder, then branching UI components based on defined breakpoints. This approach abstracts UI elements to ensure layouts scale gracefully from mobile phones to large desktop displays.

What is the best way to implement responsive navigation in a cross-platform Flutter app?▼

Implement responsive navigation by adjusting patterns based on available screen real estate, such as switching between a bottom bar for mobile and a navigation rail for larger displays. This ensures a consistent user experience across diverse platforms and screen dimensions.

How do I handle multiple input devices like touch and mouse in Flutter?▼

Handle multiple input devices in Flutter by applying capability and policy patterns that support touch, mouse, and keyboard interactions effectively. This ensures your adaptive UI functions correctly regardless of the user's input method.

Can I use MediaQuery and LayoutBuilder to adapt Flutter layouts for desktop and web?▼

Yes, you can use MediaQuery and LayoutBuilder to measure available space and branch UI components for desktop and web. This method allows your cross-platform Flutter application to look and function beautifully across diverse platforms.

When should I branch UI components using breakpoints in Flutter?▼

Branch UI components using breakpoints when your Flutter application needs to scale gracefully across diverse screen dimensions. This technique abstracts UI elements to maintain a consistent user experience from small smartphones to large desktop monitors.

Related Skills

Explore More Software Engineering Skills→
QunnnnQunnnn

dart-build-cli-app

Build Dart command-line applications with argument parsing and testing workflows.

Community
Advanced
MADTeacherMADTeacher
104

flutter-adaptive-ui

Create adaptive Flutter UIs for different screen sizes and platforms.

Community
Basic
Vivekmano27Vivekmano27

flutter-patterns

Organizes Flutter projects with clean architecture, Riverpod or BLoC state management, and responsive UI patterns.

Community
Intermediate
aliciaplsaliciapls

uiux-design-principles

Define enterprise UI and UX principles for layout, hierarchy, and accessibility.

Community
Advanced