flutter-layout

SKILL.md

Build responsive Flutter layouts by composing widgets, managing constraints, and adapting to screen sizes.

Provides a decision tree for selecting the right base layout widget (Row, Column, Stack, ListView, GridView, CustomScrollView) based on content dimensionality, overlap, scrolling, and responsiveness needs

Enforces Flutter's core constraint system: constraints flow down, sizes flow up, parents set position; includes ConstrainedBox patterns for forcing specific dimensions

Implements adaptive layouts using LayoutBuilder to branch UI logic based on available width, supporting mobile-to-tablet transitions

Covers flex layout composition with Expanded and Flexible widgets for managing child sizing in Rows and Columns, plus fixes for unbounded constraint errors in scrollable contexts

Goal

Constructs robust, responsive Flutter user interfaces by composing layout widgets, managing constraints, and implementing adaptive design patterns. Assumes the target environment has the Flutter SDK installed and the user is familiar with Dart syntax and state management fundamentals.

Instructions

Determine Layout Strategy (Decision Logic)
Analyze the UI requirements and select the appropriate base layout widgets using the following decision tree:

Is the content strictly 1-Dimensional?

Horizontal arrangement -> Use Row.

Vertical arrangement -> Use Column.

Does the content need to overlap (Z-axis)?

Yes -> Use Stack with Positioned or Align children.

Does the content exceed the screen size?

Yes, 1D list -> Use ListView.

Yes, 2D grid -> Use GridView.

Yes, custom scroll effects -> Use CustomScrollView with Slivers.

Does the layout need to adapt to screen size changes?

Yes -> Use LayoutBuilder or MediaQuery.