Flutter: Layout Control with Expanded, Flexible, and Spacer

In Flex-based layouts, how you share space often determines how polished the UI feels. Expanded, Flexible, and Spacer look similar, but they behave differently.

Live Demo

You can try the Expanded widget in the interactive example below:

💡 If the example above doesn't load, click DartPad to run it in a new tab.

Which One Should You Use?

• Expanded: Fills the remaining space.
• Flexible: Handles content more loosely.
• Spacer: Only adds empty space.

This topic matches searches such as "flutter expanded flexible spacer", "row layout control", and "overflow fix".

Filling Space with Expanded

Row(
  children: [
    const Icon(Icons.person),
    const SizedBox(width: 12),
    Expanded(
      child: TextField(
        decoration: const InputDecoration(hintText: 'Name'),
      ),
    ),
  ],
)

Using Flexible for Softer Control

Row(
  children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.amber,
        child: const Text('Flexible content'),
      ),
    ),
  ],
)

Managing Blank Space with Spacer

Row(
  children: [
    const Text('Start'),
    const Spacer(),
    const Text('End'),
  ],
)

Reducing Overflow Issues

When used correctly, Flex widgets help reduce overflow risk in Row and Column layouts. Expanded is especially important when text, icons, and buttons appear together.

Practical Scenario: Product Card

Row(
  children: [
    const SizedBox(width: 64, height: 64, child: Placeholder()),
    const SizedBox(width: 12),
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const [
          Text('Product name'),
          Text('Product description'),
        ],
      ),
    ),
    const Icon(Icons.chevron_right),
  ],
)

Frequently Asked Questions

Does Spacer carry content?

No. It only creates empty space.

Can Flexible always replace Expanded?

No. Expanded gives tighter control, while Flexible stays more relaxed.

Are these widgets only for Row?

No. They also work in Column.

Summary

When used correctly, Expanded, Flexible, and Spacer make Flutter layout control much cleaner. Understanding the difference between them leads to fewer bugs and a more professional UI.