Flutter Build Responsive Layout
Reach for this one when a Flutter screen has to work on both a phone and a tablet or desktop window. The skill pushes you toward `LayoutBuilder` and `constraints.maxWidth` for picking a layout, with a 600px breakpoint as the example, rather than checking `MediaQuery.orientationOf` or device type, which it explicitly warns against because resizable and multi-window setups make those misleading. It also covers `Expanded` versus `Flexible`, capping content with `ConstrainedBox` so forms and lists don't stretch across a 27-inch monitor, and avoiding orientation locks, which cause letterboxing on foldables. The examples are minimal, using placeholders and a sidebar-plus-content split, so you'll fill in the real widgets yourself. My one take: the workflow checklists are heavier than the code they produce, but the core advice is sound and worth keeping in front of you.
- skills.sh installs
- 45.1K
- GitHub stars
- 3.2K
- last updated
- Oct 26, 2026
Install
$ npx -y skills add flutter/agent-plugins --skill flutter-build-responsive-layout --agent claude-codeInstalls into .claude/skills of the current project.
Files
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.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/flutter/agent-plugins
- Categories
- Frontend Development, DevOps & CI/CD, AI & Agent Building, Mobile Development, CLI & Terminal
- First seen
- Oct 26, 2026
More from flutter/agent-plugins
All 10- Flutter Fix Layout Issues42.2K
- Flutter Add Widget Test41.4K
- Flutter Add Integration Test40.2K
- Flutter Setup Declarative Routing39.7K
- Flutter Implement Json Serialization39.4K
- Flutter Add Widget Preview38.7K
- Flutter Setup Localization38.7K
- Flutter Use Http Package37.9K
- Flutter Apply Architecture Best Practices45.5K
Recommended
More Frontend Development
flutter-build-responsive-layoutflutter/skillsflutter build responsive layout23.2Kskills.sh installs
angular-ssranalogjs/angular-skillsImplement server-side rendering and hydration in Angular v20+ using @angular/ssr. Use for SSR setup, hydration strategies, prerendering static pages, and handli3.9Kskills.sh installs
react-component-performancedimillian/skillsAnalyze and optimize React component performance issues (slow renders, re-render thrash, laggy lists, expensive computations). Use when asked to profile or impr1.1Kskills.sh installs
shadcn-component-discoverymattbx/shadcn-skillsDiscover shadcn-compatible components and registries across the entire ecosystem before writing any custom UI. Use PROACTIVELY before building tables, forms, mo761skills.sh installs
react-ui-patternsdavila7/claude-code-templatesModern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.529skills.sh installs