SKILL.md
$2a
Select the appropriate structural Widget based on the required spatial arrangement.
- **Use
RowandColumn:** ImplementRowfor horizontal linear layouts andColumnfor vertical linear layouts. Control child alignment usingmainAxisAlignmentandcrossAxisAlignment.
- **Use
ExpandedandFlexible:** Wrap children ofRoworColumninExpandedto force them to fill available space, orFlexibleto allow them to size themselves up to the available space.
- **Use
Container:** Wrap Widgets in aContainerwhen you need to apply padding, margins, borders, or background colors.
- **Use
Stack:** ImplementStackwhen Widgets must overlap on the Z-axis. UsePositionedto anchor children to specific edges of theStack.
- **Use
SizedBox:** Enforce strict, tight constraints on a child Widget by wrapping it in aSizedBoxwith explicitwidthandheightvalues.
Adaptive and Responsive Design
Apply conditional logic to handle varying screen sizes and form factors.
- If fitting UI into available space (Responsive): Use
LayoutBuilder,Expanded, andFlexibleto dynamically adjust the size and placement of elements based on the parent's constraints.
- If adjusting UI usability for a specific form factor (Adaptive): Use conditional rendering to swap entire layout structures. For example, render a bottom navigation bar on mobile, but a side navigation rail on tablets/desktop.
Workflow: Implementing a Complex Layout
Follow this sequential workflow to architect and implement robust Flutter layouts.
Task Progress
- Phase 1: Visual Deconstruction
- Break down the target UI into a hierarchy of rows, columns, and grids.
- Identify overlapping elements (requiring
Stack).
- Identify scrolling regions (requiring
ListVieworSingleChildScrollView).
- Phase 2: Constraint Planning
- Determine which Widgets require tight constraints (fixed size) vs. loose constraints (flexible size).
- Identify potential unbounded constraint risks (e.g., a
ListViewinside aColumn).
- Phase 3: Implementation
- Build the layout from the outside in, starting with the
Scaffoldand primary structural Widgets.
- Extract deeply nested layout sections into separate, stateless Widgets to maintain readability.
- Phase 4: Validation and Feedback Loop
- Run the application on target devices/simulators.
- Run validator -> review errors -> fix: Open the Flutter Inspector. Enable "Debug Paint" to visualize render boxes.
- Check for yellow/black striped overflow warnings.
- If overflow occurs: Wrap the overflowing Widget in
Expanded(if inside a flex box) or wrap the parent in a scrollable Widget.
Examples
Example: Resolving Unbounded Constraints in Flex Boxes
Anti-pattern: Placing a ListView directly inside a Column causes an unbounded height exception because the Column provides infinite vertical space to the ListView.
// BAD: Throws unbounded height exception
Column(
children: [
Text('Header'),
ListView(
children: [/* items */],
),
],
)Implementation: Wrap the ListView in an Expanded Widget to bound its height to the remaining space in the Column.
// GOOD: ListView is constrained to remaining space
Column(
children: [
Text('Header'),
Expanded(
child: ListView(
children: [/* items */],
),
),
],
)Example: Responsive Layout with LayoutBuilder
Implement LayoutBuilder to conditionally render different structural Widgets based on available width.
Widget buildAdaptiveLayout(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
// Conditional logic based on screen width
if (constraints.maxWidth > 600) {
// Tablet/Desktop: Side-by-side layout
return Row(
children: [
SizedBox(width: 250, child: SidebarWidget()),
Expanded(child: MainContentWidget()),
],
);
} else {
// Mobile: Stacked layout with navigation
return Column(
children: [
Expanded(child: MainContentWidget()),
BottomNavigationBarWidget(),
],
);
}
},
);
}