flutter-build-responsive-layout Skill
Use LayoutBuilder, MediaQuery, or Expanded/Flexible to create a layout that adapts to different screen sizes. Use when you need the UI to look good on both mobile and tablet/desktop form factors. Published by flutter in agent-plugins.
What is flutter-build-responsive-layout Skill?
Use LayoutBuilder, MediaQuery, or Expanded/Flexible to create a layout that adapts to different screen sizes. Use when you need the UI to look good on both mobile and tablet/desktop form factors. Published by flutter in agent-plugins. This profile combines repository metadata with install, compatibility, and usage signals so developers can quickly decide whether it fits their agent workflow before opening the source repository.
Automated repository signals based on public metadata such as recency, license, installation evidence, and adoption. These are not a security audit or endorsement.
Key capabilities
- Includes SKILL.md support
- Reusable instructions support
- Design and media
- Design and media use cases
Technical details
- Install or run with Copy skill directory
When to use flutter-build-responsive-layout Skill
- Use it for design and media.
Built with
Editorial notes
Source
- Creator: flutter
- Repository: flutter/agent-plugins
- Skill file: skills/flutter-build-responsive-layout/SKILL.md
What it does
Use LayoutBuilder, MediaQuery, or Expanded/Flexible to create a layout that adapts to different screen sizes. Use when you need the UI to look good on both mobile and tablet/desktop form factors.
Skill instructions
Implementing Adaptive Layouts Contents - Space Measurement Guidelines - Widget Sizing and Constraints - Device and Orientation Behaviors - Workflow: Constructing an Adaptive Layout - Workflow: Optimizing for Large Screens - Examples Space Measurement Guidelines Determine the available space accurately to ensure layouts adapt to the app window, not just the physical device. Use MediaQuery.sizeOf(context) to get the size of the entire app window. Use LayoutBuilder to make layout decisions based on the parent widget's allocated space. Evaluate constraints.maxWidth to determine the appropriate widget tree to return. Do not use MediaQuery.orientationOf or OrientationBuilder near the top of the widget tree to switch layouts. Device orientation does not accurately reflect the available app window space. Do not check for hardware types (e.g., "phone" vs. "tablet"). Flutter apps run in resizable windows, multi-window modes, and picture-in-picture. Base all layout decisions strictly on available
Explore related resources
Frequently asked questions
What is flutter-build-responsive-layout?
flutter-build-responsive-layout is a open-source AI agent skill with Copy skill directory. Use LayoutBuilder, MediaQuery, or Expanded/Flexible to create a layout that adapts to different screen sizes.
Who is flutter-build-responsive-layout best for?
flutter-build-responsive-layout is best for reusing agent instructions, scripts, and references, design and media workflows.
How do I install flutter-build-responsive-layout?
Install or run flutter-build-responsive-layout using Copy skill directory. Check flutter-build-responsive-layout for the latest setup command.
Is flutter-build-responsive-layout actively maintained?
flutter-build-responsive-layout may need a closer maintenance check before production use.
Auto-fetched from GitHub.
