Diff between flexible and expanded?

Question

Accepted Answer

## Overview

Both `Flexible` and `Expanded` are used inside `Row`, `Column`, or `Flex` widgets to control how children take up available space. The key difference is in how they handle **extra space**.

---

## Key Differences

| Feature | Expanded | Flexible |
|---------|----------|----------|
| **Fills available space** | ✅ Always fills | ⚙️ Optional (via `fit`) |
| **Default fit** | `FlexFit.tight` (must fill) | `FlexFit.loose` (can be smaller) |
| **Child can be smaller** | ❌ No | ✅ Yes |
| **Shorthand for** | `Flexible(fit: FlexFit.tight)` | — |

---

## Expanded Example

```dart
Row(
  children: [
    Expanded(
      child: Container(color: Colors.blue, height: 50),
    ),
    Expanded(
      child: Container(color: Colors.red, height: 50),
    ),
  ],
)
// Both containers split the space equally and FILL it
```

---

## Flexible Example

```dart
Row(
  children: [
    Flexible(
      child: Container(
        color: Colors.blue,
        width: 50, // Can be SMALLER than its allocated space
        height: 50,
      ),
    ),
    Container(color: Colors.red, width: 100, height: 50),
  ],
)
// Blue container only takes 50px, not the full flexible space
```

---

## Using flex Property

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

---

## FlexFit values

```dart
// Flexible with tight fit = same as Expanded
Flexible(
  fit: FlexFit.tight, // Child MUST fill allocated space
  child: Container(),
)

// Flexible with loose fit (default)
Flexible(
  fit: FlexFit.loose, // Child CAN be smaller
  child: Container(),
)
```

---

## When to Use Which?

| Scenario | Use |
|----------|-----|
| Child must fill all allocated space | `Expanded` |
| Child may be smaller than allocated space | `Flexible` |
| Proportional sizing (2:1 ratio) | `Expanded` with `flex` |
| Wrapping text that may not need full width | `Flexible` |

> **Quick Rule:** Use `Expanded` when you want it to fill space. Use `Flexible` when the child might need less space than allocated.

Feature	Expanded	Flexible
Fills available space	✅ Always fills	⚙️ Optional (via text `fit` )
Default fit	text `FlexFit.tight` (must fill)	text `FlexFit.loose` (can be smaller)
Child can be smaller	❌ No	✅ Yes
Shorthand for	text `Flexible(fit: FlexFit.tight)`	—

Diff between flexible and expanded?

Answer

Overview

Key Differences

Expanded Example

Flexible Example

Using flex Property

FlexFit values

When to Use Which?

Related Questions

Diff between column and Listview

What is the difference between sizedbox and container ?

Use pagination in the list and use `ListView.builder` instead of `ListView`.

Async state: `FutureBuilder` / `StreamBuilder`.

Listview.builder inside the column what error it will throw and why ?

Scenario	Use
Child must fill all allocated space	text `Expanded`
Child may be smaller than allocated space	text `Flexible`
Proportional sizing (2:1 ratio)	text `Expanded` with text `flex`
Wrapping text that may not need full width	text `Flexible`

Diff between flexible and expanded?

Answer

Overview

Key Differences

Expanded Example

Flexible Example

Using flex Property

FlexFit values

When to Use Which?

Related Questions

Diff between column and Listview

What is the difference between sizedbox and container ?

Use pagination in the list and use `ListView.builder` instead of `ListView`.

**Async state:** `FutureBuilder` / `StreamBuilder`.

Listview.builder inside the column what error it will throw and why ?

Async state: `FutureBuilder` / `StreamBuilder`.