Flutter Layouts Deep Dive: Row, Column, Stack, and Expanded

This article was translated specially for the channel FlutterPulseYou'll find lots of interesting things related to Flutter on this channel. Don't hesitate to subscribe!🚀

Flutter, Google's UI toolkit for building natively compiled applications, offers a rich set of widgets for creating flexible, responsive…

Flutter, Google's UI toolkit for building natively compiled applications, offers a rich set of widgets for creating flexible, responsive, and beautiful layouts. Among the most fundamental of these are Row, Column, Stack, and Expanded. Understanding these core widgets is essential for any Flutter developer aiming to build clean and maintainable UIs.

In this deep dive, we'll explore how each of these layout widgets works, when to use them, and how to combine them effectively.

1. Row Widget

Overview

The Row widget arranges its children horizontally in a single line. It's ideal for horizontal alignment of widgets like buttons, icons, or text.

Key Properties

• mainAxisAlignment: Aligns children horizontally (e.g., start, center, spaceBetween).
• crossAxisAlignment: Aligns children vertically within the row.
• children: A list of widgets to display in a horizontal array.

Example

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Icon(Icons.star),
    Icon(Icons.star_border),
    Icon(Icons.star_half),
  ],
)

Use Cases

• Horizontal navigation menus
• Button toolbars
• Custom cards with icons and text

2. Column Widget

Overview

The Column widget works just like Row, but arranges its children vertically. It's frequently used to stack widgets like text, images, and form fields.

Key Properties

• mainAxisAlignment: Aligns children vertically.
• crossAxisAlignment: Aligns children horizontally within the column.
• children: A list of widgets to arrange vertically.

Example

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Title', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
    SizedBox(height: 10),
    Text('Subtitle or description goes here'),
  ],
)

Use Cases

• Forms and input fields
• Lists of labels and content
• Layouts for detail pages

3. Stack Widget

Overview

The Stack widget allows you to overlay widgets on top of each other. Think of it like a pile of widgets, where each one is layered on top of the previous.

Key Properties

• alignment: Controls the alignment of children.
• fit: Determines how the non-positioned children are sized.
• children: A list of widgets to be stacked.

Example

Stack(
  alignment: Alignment.center,
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Text('Overlay Text', style: TextStyle(color: Colors.white)),
  ],
)

Use Cases

• Badges on icons
• Floating action buttons over content
• Background images with foreground widgets

4. Expanded Widget

Overview

The Expanded widget is used within a Row, Column, or Flex to occupy available space. It flexibly sizes a child of a layout, stretching it to fill the remaining space.

Key Properties

• flex: Defines how much space this child should take compared to others.

Example

Row(
  children: [
    Expanded(
      child: Container(color: Colors.red, height: 50),
    ),
    Container(width: 100, color: Colors.green, height: 50),
  ],
)

In this example, the red container fills the remaining space after allocating 100 pixels to the green one.

Use Cases

• Responsive layouts
• Equal spacing between widgets
• Stretching widgets to fit screen width/height

Combining Widgets for Complex Layouts

Example Layout

Here's how you can use these widgets together for a more dynamic layout:

Column(
  children: [
    Row(
      children: [
        Expanded(child: Text('Item 1')),
        Text('Price'),
      ],
    ),
    SizedBox(height: 10),
    Stack(
      children: [
        Container(height: 100, color: Colors.grey[300]),
        Positioned(
          bottom: 10,
          right: 10,
          child: FloatingActionButton(onPressed: () {}),
        ),
      ],
    ),
  ],
)

This layout combines Column, Row, Expanded, and Stack to create a modern UI that adapts to various screen sizes and interactions.

Best Practices

• Don't over-nest: Deep nesting can lead to unreadable code. Consider breaking into reusable widgets.
• Use Expanded wisely: It should only be used inside flex widgets (Row, Column).
• Leverage Spacer: When you just need empty space in a flex layout, Spacer() is a cleaner alternative to an Expanded with an empty Container.

Conclusion

Mastering Row, Column, Stack, and Expanded gives you the power to create virtually any layout in Flutter. These building blocks, when used thoughtfully, form the foundation of visually appealing and responsive apps. With Flutter's hot reload, don't be afraid to experiment with different layouts until you find the one that works best.

Start small, iterate quickly, and soon you'll be crafting stunning UIs with ease.