back
loading skill details...
How to build your app's layout using Flutter's layout widgets and constraint system
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.
don't have the plugin yet? install it then click "run inline in claude" again.