flutter-layout
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.
- 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?
-
Apply the Golden Rule of Constraints
More from flutter/skills
flutter-building-layouts
Builds Flutter layouts using the constraint system and layout widgets. Use when creating or refining the UI structure of a Flutter application.
10.6Kflutter-architecting-apps
Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.
10.4Kflutter-animating-apps
Implements animated effects, transitions, and motion in a Flutter app. Use when adding visual feedback, shared element transitions, or physics-based animations.
9.6Kflutter-managing-state
Manages application and ephemeral state in a Flutter app. Use when sharing data between widgets or handling complex UI state transitions.
9.6Kflutter-theming-apps
Customizes the visual appearance of a Flutter app using the theming system. Use when defining global styles, colors, or typography for an application.
9.5Kflutter-implementing-navigation-and-routing
Handles routing, navigation, and deep linking in a Flutter application. Use when moving between screens or setting up URL-based navigation.
9.3K