flutter-build-responsive-layout
This skill provides guidelines and code patterns for building responsive Flutter layouts. It focuses on using LayoutBuilder and MediaQuery to adapt UI components to available window space rather than specific device types.
Is flutter-build-responsive-layout safe to install?
Safe to install: our audit of flutter-build-responsive-layout's source files found 0 shell commands, 0 external URLs, no file writes (none risk). Every command and URL listed appears verbatim in the skill's source. The skill provides documentation and code examples for UI implementation. It does not execute commands or perform network requests.
How we audit skills: our security review methodology.
Who is this skill for?
Flutter developers building applications that support multiple screen sizes, including mobile, tablet, and desktop.
What can you do with it?
- Implementing adaptive layouts that switch between mobile and desktop views based on window width.
- Constraining widget width on large screens to improve readability.
- Optimizing list and grid rendering for varying display sizes.
- Handling orientation changes and foldable device layouts.
How good is this skill?
Quality score: 5/10. The skill provides clear, actionable workflows and code examples that follow Flutter best practices for responsive design.
What does the skill file contain?
# Implementing Adaptive Layouts ## Contents - [Space Measurement Guidelines](#space-measurement-guidelines) - [Widget Sizing and Constraints](#widget-sizing-and-constraints) - [Device and Orientation Behaviors](#device-and-orientation-behaviors) - [Workflow: Constructing an Adaptive Layout](#workflow-constructing-an-adaptive-layout) - [Workflow: Optimizing for Large Screens](#workflow-optimizing-for-large-screens) - [Examples](#examples) ## Space Measurement Guidelines Determine the available space accurately to ensure layouts adapt to the app window, not just the physical device. * **Use...
Frequently asked questions
Should I use OrientationBuilder to detect device orientation?
No. The skill advises against using OrientationBuilder or MediaQuery.orientationOf near the top of the widget tree because device orientation does not accurately reflect available app window space.
How do I handle layout decisions for tablets versus phones?
Base all layout decisions on available window space using LayoutBuilder or MediaQuery.sizeOf. Do not check for specific hardware types like phone or tablet.
What is the recommended way to prevent UI stretching on large screens?
Wrap components in a ConstrainedBox with a defined maxWidth and center the content using a Center widget.
Related skills
web-design-guidelines
440.2KDevelopers and designers who need to verify UI code compliance with interface standards
The web-design-guidelines skill audits UI code against Web Interface Guidelines. It fetches current rules from a remote source and compares them against specified local files.
shadcn
217.3KDevelopers building UI components and design systems using shadcn/ui
The shadcn skill manages UI components and design systems for projects using the shadcn/ui framework. It provides tools to search, add, debug, and style components, while enforcing strict composition and styling rules based on project-specific configuration.
emil-design-eng
114.3KDevelopers and designers building user interfaces who want to improve the feel and responsiveness of their software
This skill provides design engineering guidance based on Emil Kowalski's philosophy for UI polish, component design, and animation. It includes specific frameworks for animation decision-making, CSS transition techniques, and component interaction patterns.
make-interfaces-feel-better
37.7KFrontend developers and designers using AI agents to review UI code or implement design system improvements
This skill provides design engineering principles for polishing user interfaces. It guides the agent in reviewing and implementing UI details such as typography, animations, border radii, optical alignment, and performance optimizations.