Description
flutter-build-responsive-layout is an agent skill from Flutter's agent-plugins collection that helps a coding agent build a Flutter layout that adapts to different screen sizes. It describes the techniques to use, including LayoutBuilder, MediaQuery and Expanded or Flexible widgets, and it explains how to measure the available space correctly. The skill says to use MediaQuery.sizeOf to get the size of the app window, and to use LayoutBuilder to choose a widget tree based on the space the parent gives the widget. It warns against switching layouts with MediaQuery.orientationOf or OrientationBuilder near the top of the widget tree, because device orientation does not reflect the space the app has. It also says not to branch on hardware types such as phone or tablet, since Flutter apps can run in resizable windows, multi-window modes and picture-in-picture, so decisions should be based on the window space. The skill covers Flutter's core constraint rule, that constraints go down and sizes go up, and it has workflows for building an adaptive layout and for optimising for large screens. It is listed on skills.sh, where the page shows install counts, GitHub stars and security audit results. Install it with npx skills add https://github.com/flutter/agent-plugins --skill flutter-build-responsive-layout.…
Highlights
- Adaptive layouts with LayoutBuilder and MediaQuery
- Expanded and Flexible widgets
- Decisions based on window space, not hardware
- Flutter constraint rules explained
- Large screen optimisation workflow
- Installs from skills.sh
Ratings & Reviews
No ratings yet
Be the first to rate flutter-build-responsive-layout.
People also visit
flutter-build-responsive-layout FAQ
What does this skill do?
It helps a coding agent build Flutter layouts that adapt to different screen sizes and window sizes.
Which widgets does it use?
LayoutBuilder, MediaQuery.sizeOf, and Expanded or Flexible widgets.
Should I check for phone or tablet?
No. The skill says to base layout decisions on available window space, since Flutter apps can run in resizable windows and picture-in-picture.
Is orientation a good trigger?
The skill advises against switching layouts with MediaQuery.orientationOf or OrientationBuilder near the top of the tree, because device orientation does not show the window space.
How do I install it?
Run npx skills add https://github.com/flutter/agent-plugins --skill flutter-build-responsive-layout.
What are the security audit results?
skills.sh lists three audits: Gen Agent Trust Hub Pass, Socket Pass and Snyk Pass.
What are the best flutter-build-responsive-layout alternatives?
Popular alternatives to flutter-build-responsive-layout include flutter-fix-layout-issues, flutter-dev and flutter-apply-architecture-best-practices. See all flutter-build-responsive-layout alternatives