Expanded and Flexible in Flutter - UI Render Trace

Component - Expanded and Flexible

This Flutter UI component demonstrates how Expanded and Flexible widgets control the size of children inside a Row. They help distribute space in a flexible way, like sharing a pizza slice fairly among friends.

Widget Tree

Scaffold
├─ AppBar
│  └─ Text
└─ Body
   └─ Row
      ├─ Expanded
      │  └─ Container
      ├─ Flexible
      │  └─ Container
      └─ Container

The Scaffold provides the basic page structure with an AppBar showing a title. The body contains a Row with three children: an Expanded widget wrapping a Container, a Flexible widget wrapping another Container, and a plain Container. This layout arranges the three colored boxes horizontally.

Render Trace - 5 Steps

Step 1: Scaffold

Step 2: Row

Step 3: Expanded

Step 4: Flexible

Step 5: Container

State Change - Re-render

Trigger:No state change in this static layout example

Before

Initial layout with Expanded, Flexible, and fixed Container

→

After

No change

Re-renders:No re-render triggered

UI Quiz - 3 Questions

Which widget forces its child to fill all remaining space proportionally?

A Container

B Flexible

C Expanded

D Row

Key Insight

Using Expanded and Flexible helps create responsive horizontal layouts by sharing available space. Expanded forces a child to fill space, while Flexible lets a child shrink if needed. Fixed-size Containers keep their size no matter what. This is like adjusting furniture in a room to fit space nicely.