What is the purpose of the Expanded widget in Flutter?

Overview

The

Expanded

Row

Column

Flex

Basic Usage

dartCopy
Row(
  children: [
    Text('Label: '),        // Takes only the space it needs
    Expanded(
      child: TextField(),   // Takes ALL remaining width
    ),
  ],
)

How It Works

textCopy
|---Row--------------------------------------------|
| [Text: 60px] | [Expanded fills remaining space→] |
|--------------------------------------------------|

In Column

dartCopy
Column(
  children: [
    AppBar(), // Fixed height
    Expanded(
      child: ListView.builder(...), // Fills all remaining vertical space
    ),
    BottomNavigationBar(), // Fixed height
  ],
)

Using flex for Proportional Sizing

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

Expanded vs Flexible

dartCopy
// Expanded: child MUST fill all allocated space
Expanded(child: Container(color: Colors.blue))

// Flexible: child CAN be smaller than allocated space
Flexible(child: Container(width: 50, color: Colors.red))

Common Use Cases

Row → [Label] + [Expanded(TextField)]

Column → [AppBar] + [Expanded(body)] + [BottomBar]

Row → [Expanded] + [Expanded]

Row → [Expanded(flex:2)] + [Expanded(flex:1)]

Note:

textCopy

Expanded

is just shorthand for

textCopy

Flexible(fit: FlexFit.tight)

. It always forces the child to fill its allocated space.