What is the difference between Flexible and Expanded?

Overview

Both

Flexible

Expanded

Row

Column

Flex

Expanded - Forces Child to Fill Space

Expanded

Flexible(fit: FlexFit.tight)

dartCopy
Column(
  children: [
    Expanded(
      child: Container(color: Colors.red), // Takes all available space
    ),
    Container(color: Colors.blue, height: 100), // Fixed height
  ],
)

Result: Red container fills the remaining vertical space after the blue container's 100px.

Flexible - Allows Child to Size Within Constraints

Flexible

dartCopy
Column(
  children: [
    Flexible(
      child: Container(color: Colors.red, height: 50), // Can shrink if needed
    ),
    Container(color: Colors.blue, height: 100),
  ],
)

Result: Red container takes its preferred 50px height (doesn't expand).

Key Differences

FlexFit.tight

FlexFit.loose

FlexFit Comparison

dartCopy
// Expanded = Flexible with tight fit
Expanded(child: Widget) 
// Equivalent to:
Flexible(fit: FlexFit.tight, child: Widget)

// Flexible = loose fit by default
Flexible(child: Widget)
// Equivalent to:
Flexible(fit: FlexFit.loose, child: Widget)

Practical Examples

Example 1: Multiple Expanded Widgets

dartCopy
Row(
  children: [
    Expanded(
      flex: 2,
      child: Container(color: Colors.red), // Takes 2/3 of width
    ),
    Expanded(
      flex: 1,
      child: Container(color: Colors.blue), // Takes 1/3 of width
    ),
  ],
)

Example 2: Flexible with Intrinsic Size

dartCopy
Row(
  children: [
    Flexible(
      child: Text(
        'Short text', 
        overflow: TextOverflow.ellipsis,
      ), // Takes only needed width
    ),
    Icon(Icons.info),
  ],
)

Example 3: Mixed Usage

dartCopy
Column(
  children: [
    Flexible(
      child: Text('This can shrink if needed'),
    ),
    Expanded(
      child: ListView.builder(...), // Fills remaining space
    ),
    Container(height: 60), // Fixed bottom bar
  ],
)

The flex Property

Both widgets accept a

flex

dartCopy
Row(
  children: [
    Expanded(flex: 1, child: Container(color: Colors.red)),
    Expanded(flex: 2, child: Container(color: Colors.blue)),
    Expanded(flex: 1, child: Container(color: Colors.green)),
  ],
)

Result: Blue takes 50% of width (2/4), red and green each take 25% (1/4).

When to Use Which

Expanded

Flexible

Expanded

Flexible

flex

Flexible

overflow

Expanded

Common Pitfalls

dartCopy
// ❌ Wrong - Unbounded height error
Column(
  children: [
    ListView.builder(...), // Error: unbounded height
  ],
)

// ✅ Correct - Use Expanded
Column(
  children: [
    Expanded(
      child: ListView.builder(...), // Works: bounded height
    ),
  ],
)

// ❌ Wrong - Text overflow
Row(
  children: [
    Text('Very long text that will overflow...'),
    Icon(Icons.arrow_forward),
  ],
)

// ✅ Correct - Use Flexible or Expanded
Row(
  children: [
    Flexible(
      child: Text(
        'Very long text that will overflow...',
        overflow: TextOverflow.ellipsis,
      ),
    ),
    Icon(Icons.arrow_forward),
  ],
)

Summary

Expanded = "Fill all available space" (tight fit)

Flexible = "Take space if available, but don't force" (loose fit)

Both prevent overflow and work with

textCopy

flex

for proportional layouts.

For more details, see Flutter Layout Widgets.