flutter-building-layouts

Builds Flutter layouts using constraint rules and structural widgets like Row, Column, and Stack.

1|Updated Apr 30, 2026
One-click install
npx skills add https://github.com/Wishtohear/bucket-water-oms --skill flutter-building-layouts-wishtohear
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-building-layouts
Source: https://github.com/Wishtohear/bucket-water-oms/tree/main/bucket-water-oms-admin-mobile/skills/flutter-building-layouts
Command: npx skills add https://github.com/Wishtohear/bucket-water-oms --skill flutter-building-layouts-wishtohear

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Flutter developers frequently encounter render exceptions such as unbounded constraint errors and overflow warnings when composing UI layouts, because the constraint system (constraints go down, sizes go up, parent sets position) is not intuitive. ## Core Features & Use Cases - Constraint System Guidance: Explains how constraints flow down the widget tree and how to avoid unbounded constraint exceptions in flex boxes and scrollables. - Structural Widget Selection: Directs the choice of Row, Column, Expanded, Flexible, Container, Stack, and SizedBox based on the required spatial arrangement. - Adaptive and Responsive Design: Uses LayoutBuilder and conditional rendering to adapt layouts across mobile, tablet, and desktop form factors. - Use Case: When a ListView inside a Column throws an unbounded height exception, wrap the ListView in Expanded so it is constrained to the remaining vertical space. ## Quick Start Ask the assistant to build a responsive Flutter page layout with a sidebar on wide screens and a bottom navigation bar on mobile, following the constraint rules.

Frequently Asked Questions about flutter-building-layouts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix unbounded height exception in Flutter Column?▼

An unbounded height exception occurs when a ListView is placed directly inside a Column, because the Column gives it infinite vertical space. Wrap the ListView in an Expanded widget so it is constrained to the remaining space in the Column.

How to build responsive layouts in Flutter?▼

Use LayoutBuilder to read the parent constraints and conditionally render different structures based on maxWidth. For example, show a Row with a sidebar above 600 pixels and a Column with bottom navigation below that threshold.

When should I use Expanded vs Flexible in Flutter?▼

Use Expanded to force a child of Row or Column to fill all available space along the main axis. Use Flexible when the child should size itself up to the available space without being forced to fill it.

What causes yellow and black overflow stripes in Flutter?▼

Overflow stripes appear when a widget's content exceeds the constraints given by its parent, commonly in Row or Column. Fix it by wrapping the overflowing child in Expanded, or wrapping the parent in a scrollable widget like SingleChildScrollView.

When should I use Stack instead of Column in Flutter?▼

Use Stack when widgets must overlap on the z-axis, such as badges or floating labels over content. Use the Positioned widget to anchor children to specific edges of the Stack.