Flutter Spacer Widget - Flexible Spaces

Spacer is a special widget used to create flexible spaces between widgets inside Row or Column. It creates "infinite" space between at least two widgets.

What is Spacer?

Spacer expands to fill the available empty space in the Flex container (Row, Column) it's in. It's ideal for distributing space between multiple widgets.

Basic Usage

Spacer in Row

Row(
  children: [
    Text('Left'),
    Spacer(),
    Text('Right'),
  ],
)

In this example, all the empty space between "Left" and "Right" texts is filled by Spacer, so the texts align to both ends.

Spacer in Column

Column(
  children: [
    Text('Top'),
    Spacer(),
    Text('Bottom'),
  ],
)

Maximum vertical space is created between "Top" and "Bottom" texts.

Multiple Spacers

You can distribute spaces equally by using multiple Spacers:

Row(
  children: [
    Text('Left'),
    Spacer(),
    Text('Center'),
    Spacer(),
    Text('Right'),
  ],
)

Two Spacers share equal space, three texts are distributed at equal intervals.

Flex Parameter

You can adjust the ratio of spaces with Spacer's flex parameter:

Row(
  children: [
    Text('Left'),
    Spacer(flex: 1), // 1 unit space
    Text('Center'),
    Spacer(flex: 2), // 2 units space
    Text('Right'),
  ],
)

The second Spacer takes up twice as much space as the first Spacer. The space between "Center" and "Right" is twice the space between "Left" and "Center".

⚠️ Important Warnings

1. Never Use in Infinite Size

Spacer should NEVER be used in infinite size screens:

// ❌ WRONG - Gives error
ListView(
  children: [
    Text('Top'),
    Spacer(), // ERROR! ListView has infinite height
    Text('Bottom'),
  ],
)

Why? Scrollable widgets like ListView have infinite size. Spacer can't know how much to expand in this case.

2. Use Inside Limited Area

// ✅ CORRECT
Container(
  height: 300, // Limited height
  child: Column(
    children: [
      Text('Top'),
      Spacer(),
      Text('Bottom'),
    ],
  ),
)

Spacer vs SizedBox

SizedBox - Fixed Space

Row(
  children: [
    Text('Left'),
    SizedBox(width: 20), // Always 20 pixels
    Text('Right'),
  ],
)

• Fixed size space
• Stays the same even if screen size changes

Spacer - Flexible Space

Row(
  children: [
    Text('Left'),
    Spacer(), // Fills all available space
    Text('Right'),
  ],
)

• Expands according to available space
• Useful in responsive layouts

When to Use?

Use Spacer:

• When you want flexible space between two or more widgets
• When you want to control space ratios
• When you want to place widgets at both ends
• When working inside limited size container

Don't use Spacer:

• In scrollable widgets like ListView, GridView
• Inside SingleChildScrollView
• In infinite size areas
• When fixed space is sufficient (use SizedBox)

Summary

Spacer:

• Creates flexible space inside Row and Column
• Distributes proportional space with flex parameter
• Must be used between at least two widgets
• Should not be used in infinite size scrollable widgets
• Equivalent to Expanded(child: SizedBox())
• Designed for space, use Expanded for content

Golden Rule: Only use Spacer in limited size (bounded) Flex containers (Row, Column). Never use in scrollable widgets!