What is the flutter-build-responsive-layout skill?
Flutter-build-responsive-layout is a skill in the flutter/agent-plugins repository. It guides an AI coding agent to size Flutter interfaces from the available window with MediaQuery.sizeOf and LayoutBuilder, constrain wide content, use builder lists and grids, and support mouse, trackpad and keyboard input.
It is a skill in the flutter/agent-plugins repository. Its job is narrow: when an AI coding agent writes or changes a Flutter screen, the layout should respond to the space the app actually has, whether that is a phone, a resized desktop window or a tablet.
What changes in your agent's output
- Size decisions come from MediaQuery.sizeOf and LayoutBuilder, with a worked breakpoint example at 600.
- Rows and columns use Expanded and Flexible so children share space instead of overflowing.
- Wide content is capped with ConstrainedBox and a maxWidth.
- Long collections use ListView.builder and GridView.builder, and grids use SliverGridDelegateWithMaxCrossAxisExtent.
- Mouse, trackpad and keyboard input are supported next to touch.
What it tells the agent not to do
- Do not place OrientationBuilder at the top of the widget tree to switch layouts.
- Do not check for a hardware device type to choose a layout.
- Do not lock the screen orientation. If it must be locked, the skill points to the Display API.
Who the skill is for
Best for
- Flutter apps that ship to phones, tablets, desktop and web from one codebase.
- Teams whose agent keeps hard-coding widths or branching on device type.
- Projects that want one breakpoint approach across every screen.
Not for
- Diagnosing a layout exception you already have. Use flutter-fix-layout-issues for that.
- React Native and Expo apps. See building-native-ui.
- Web layouts in CSS. See layout for the web side.
How to install Flutter Build Responsive Layout
git clone https://github.com/flutter/agent-plugins.gitClone the repository
Run
git clone https://github.com/flutter/agent-plugins.git. The skill is the skills/flutter-build-responsive-layout folder.Copy the skill folder
Copy skills/flutter-build-responsive-layout into your AI coding agent's skills folder.
Open a Flutter project
Start the agent in the root of your Flutter app, next to pubspec.yaml.
Ask for a layout
Try: make the home screen use two columns above 600 logical pixels and one column below.
Check that it loaded
Ask for an adaptive screen and check that the generated code reads size from MediaQuery.sizeOf or LayoutBuilder and avoids OrientationBuilder at the top of the tree.
Key features
- Window-based sizingMediaQuery.sizeOf and LayoutBuilder are the inputs for layout choices, so the app responds to its window, not to a device label.
- Breakpoint exampleThe skill includes a LayoutBuilder example that switches layout at a width of 600.
- Flexible rows and columnsExpanded and Flexible are used so children share space and overflow is avoided.
- Constrained wide contentConstrainedBox with a maxWidth keeps text and forms readable on large windows.
- Builder lists and gridsListView.builder and GridView.builder are preferred for long collections, with SliverGridDelegateWithMaxCrossAxisExtent for adaptive grids.
- Input beyond touchThe skill asks for mouse, trackpad and keyboard support.
- Clear anti-patternsTop-of-tree OrientationBuilder, hardware type checks and orientation locks are called out as things to avoid.
- Display API fallbackWhen orientation must be locked, the skill points to the Display API rather than a lock call.
Frequently asked questions
What is the flutter-build-responsive-layout skill?
It is a skill in the flutter/agent-plugins repository that teaches an AI coding agent to build Flutter layouts that adapt to the available window. It covers sizing, breakpoints, constrained content, builder widgets and input support.
How do I install it?
Clone flutter/agent-plugins and copy the skills/flutter-build-responsive-layout folder into your AI coding agent's skills folder. The repository README also points to the Flutter documentation for plugin setup if your agent supports it.
Why avoid checking device type?
The skill says to size from the window, not the hardware. A resizable desktop window or a split-screen tablet can be any width, so a device label gives the wrong answer where available space gives the right one.
Why not use OrientationBuilder at the top of the tree?
The skill lists it as an anti-pattern. Orientation is a poor proxy for space, so layouts should react to constraints with LayoutBuilder or MediaQuery.sizeOf, which also behave properly in resizable and multi-window setups.
What breakpoint does it use?
Its worked LayoutBuilder example switches at 600. Treat that as an example from the skill, and change it to fit your own design, since the skill gives the pattern rather than a rule for every app.
What if my layout already throws an error?
Use flutter-fix-layout-issues, a sibling skill that maps common Flutter layout errors such as RenderFlex overflow to their fixes. This skill is for building layouts that avoid those errors from the start.
Does it cover mouse and keyboard?
Yes. The skill asks the agent to support mouse, trackpad and keyboard input alongside touch, which matters on desktop and web builds where people do not tap the screen. It is part of the skill's guidance, not an extra step.