🎯

flutter-build-responsive-layout

🎯Skill

from flutter/skills

What it does

A Flutter agent skill for building responsive layouts using LayoutBuilder, MediaQuery, and Expanded/Flexible widgets so UIs adapt correctly across mobile and tablet/desktop form factors. Part of the official Flutter skills collection (currently in development) that covers accessibility, testing, routing, localization, and more.

📦

Same repository

flutter/skills(56 items)

flutter-build-responsive-layout

Installation

Vibe Index InstallInstalls to .claude/skills/

npx vibeindex add flutter/skills --skill flutter-build-responsive-layout

skills.sh Install⚠ Installs to .agents/skills/

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

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/flutter-build-responsive-layout/SKILL.md

SKILL.md

16,203Installs

AddedApr 24, 2026

View on GitHub Back to Skills

More from this repository10

🎯

flutter-apply-architecture-best-practices🎯Skill

A collection of agent skills for Flutter development, covering accessibility auditing, integration testing, widget previews, and best practices to help AI agents work effectively with Flutter projects.

🎯

flutter-fix-layout-issues🎯Skill

A collection of agent skills for Flutter development, covering accessibility audits, integration tests, widget tests, responsive layouts, architecture best practices, and more.

🎯

flutter-add-widget-test🎯Skill

Implements component-level tests using WidgetTester to verify Flutter UI rendering and user interactions like tapping, scrolling, and text entry, ensuring widgets display correct data and respond to events as expected.

🎯

flutter-setup-declarative-routing🎯Skill

Configures MaterialApp.router with go_router for advanced URL-based navigation in Flutter, enabling deep linking and browser history support for web and mobile apps.

🎯

flutter-add-integration-test🎯Skill

Configures Flutter Driver for app interaction and converts MCP actions into permanent integration tests using the integration_test package, enabling automated user flow testing.

🎯

flutter-implement-json-serialization🎯Skill

Creates Flutter model classes with fromJson and toJson methods using dart:convert for manually mapping JSON keys to class properties, ideal for simple data structures.

🎯

flutter-setup-localization🎯Skill

Adds flutter_localizations and intl dependencies, enables code generation in pubspec.yaml, and creates an l10n.yaml configuration file to initialize localization support for a new Flutter project.

🎯

flutter-add-widget-preview🎯Skill

Adds interactive widget previews to a Flutter project using the previews.dart system, enabling consistent design verification and interactive testing when creating new UI components or updating existing screens.

🎯

flutter-use-http-package🎯Skill

Uses the Flutter http package to execute GET, POST, PUT, or DELETE requests for fetching data from or sending data to REST APIs.

🎯

flutter-building-layouts🎯Skill

Official Flutter agent skill for building layouts, providing tailored instructions for responsive and adaptive UI construction. Maintained by the Flutter team as part of a collection that teaches agents best-practice Flutter development workflows.