flutter-build-responsive-layout Skill: Adaptive Layouts

Makes Claude build Flutter layouts that adapt to phones, tablets and desktop windows. From the Flutter team.

Installs: 43.8K; on skills.sh
Stars: 3.1K; on GitHub
Updated: Nov 2026; last repo commit

This skill makes Claude size Flutter layouts from the space the app window actually has. It uses MediaQuery.sizeOf for the window and LayoutBuilder for the space a parent gives a widget. It does not decide layout by orientation or by phone versus tablet checks.

It has two workflows, one for building an adaptive layout around a width breakpoint and one for stopping lists and forms stretching on large screens. It is a single SKILL.md file from the Flutter team's agent-plugins repo.

Good for

Flutter developers whose app stretches badly on tablets and desktop
Teams targeting foldables, resizable windows and multi-window modes
Developers fixing orientation-locked layouts

Install flutter-build-responsive-layout

Claude Code

Copy this prompt.

Install the flutter-build-responsive-layout skill in Claude Code. Run this command:

npx skills add flutter/agent-plugins --skill flutter-build-responsive-layout

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

The repo holds 10 Flutter skills, so name this one with --skill or you install all of them. The README does not give install commands; it points to the Flutter docs page "Get started developing with AI" for installing the Flutter plugins.

From the vendor's docs. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

Contents
Space Measurement Guidelines
Widget Sizing and Constraints
Device and Orientation Behaviors
Workflow: Constructing an Adaptive Layout
Workflow: Optimizing for Large Screens
Examples
Adaptive Layout using LayoutBuilder
Constraining Width on Large Screens

Key facts

Author: The Flutter team. The README says the plugins are maintained by the Flutter team
Repo: flutter/agent-plugins
Installs on skills.sh: 43,753 (Nov 2, 2026)
GitHub stars: 3,136 (Nov 2, 2026)
License: BSD-3-Clause
Last commit: Nov 1, 2026
Files: 1 file including SKILL.md
Last modified: Apr 21, 2026, per the SKILL.md metadata
skills.sh checks: Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

MediaQuery.sizeOf for the window, LayoutBuilder for the parent's space
Does not use OrientationBuilder or hardware-type checks at the top of the tree.
Write · Space measurement
Expanded and Flexible in Row and Column; ConstrainedBox for maxWidth
The rule it works from: constraints go down, sizes go up, the parent sets position. It uses ListView.builder and GridView.builder for long lists.
Write · Widget sizing
Do not lock orientation; support mouse, trackpad and keyboard
If orientation must be locked, it uses the Display API instead of MediaQuery.
Device and orientation rules
Wrap in LayoutBuilder, read maxWidth, switch layouts at a breakpoint such as 600
Above the breakpoint, a sidebar next to content; below it, a single column.
Write · Workflow: adaptive layout
Turn lists into grids and cap form and text width
Uses SliverGridDelegateWithMaxCrossAxisExtent and a centred ConstrainedBox with maxWidth.
Write · Workflow: large screens
An AdaptiveLayout widget and a width-constrained list
Two Dart examples.
Code examples

From the official docs

Permissions

Low risk

Claude edits your Flutter UI files and may ask you to run the app and resize the window to check the result. Review the diff before you commit.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It rewrites layout code
Switching a list to a grid or wrapping widgets in new constraints can change how screens look. Review the result at several window sizes. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	The skill's workflows change layout code.
Scopes	Edits Dart UI files Its checklist steps say to run the validator and resize the app window

Questions

How do I install it?

Use the install box above, which installs this one skill. The README gives no commands; it points to the Flutter docs page "Get started developing with AI" for installing the Flutter plugins in your preferred agent. It says the plugins bundle skills, MCP server configuration and rules.

What prompt triggers it?

The README gives this example: "Make the home screen responsive so it displays a grid on tablets and a list on phones". SKILL.md says to use it when the UI must look good on mobile and tablet or desktop.

Why does it avoid checking for phone or tablet?

SKILL.md says Flutter apps run in resizable windows, multi-window modes and picture-in-picture, so layout should depend on available window space, not hardware type or orientation.

Does it need an API key?

No key is named, and the skill is one SKILL.md file with no scripts.

Does flutter-build-responsive-layout work in the Claude app or Claude.ai?

You can zip the skill folder and upload it under Customize, then Skills, in the Claude app. That is our generic instruction; the README documents no Claude app route.

Is it safe to use?

It is Markdown instructions with no scripts. When Claude follows it, it edits your Flutter UI files and may ask you to run the app and resize the window. Review the diff before you commit.

flutter-build-responsive-layout vs flutter-fix-layout-issues?

This skill builds layouts that adapt to screen size. The README describes flutter-fix-layout-issues as fixing layout errors such as RenderFlex overflows and unbounded constraints, using Dart and Flutter MCP tools.

Information

updated Nov 2, 2026

Repository: flutter/agent-plugins
Folder: skills/flutter-build-responsive-layout

flutter/agent-plugins skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 4

agent-plugins · github.com
commands.md · github.com
flutter-build-responsive-layout SKILL.md · github.com
README.md · github.com