flutter-layout
Installation
SKILL.md
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.
- Horizontal arrangement -> Use
- Does the content need to overlap (Z-axis)?
- Yes -> Use
StackwithPositionedorAlignchildren.
- Yes -> Use
- Does the content exceed the screen size?
- Yes, 1D list -> Use
ListView. - Yes, 2D grid -> Use
GridView. - Yes, custom scroll effects -> Use
CustomScrollViewwith Slivers.
- Yes, 1D list -> Use
- Does the layout need to adapt to screen size changes?
- Yes -> Use
LayoutBuilderorMediaQuery.
- Yes -> Use
- Is the content strictly 1-Dimensional?