Wrap widget in Flutter - UI Render Trace

Component - Wrap widget

The Wrap widget arranges its child widgets in horizontal or vertical lines and automatically moves to the next line when there is no more space. It is like wrapping text in a paragraph, but for widgets.

Widget Tree

Wrap
├─ Container (child 1)
├─ Container (child 2)
├─ Container (child 3)
├─ Container (child 4)
└─ Container (child 5)

The root widget is Wrap, which contains five Container widgets as children. These containers are arranged horizontally and wrap to the next line if they don't fit in one row.

Render Trace - 6 Steps

Step 1: Wrap

Step 2: Container (child 1)

Step 3: Container (child 2)

Step 4: Container (child 3)

Step 5: Container (child 4)

Step 6: Container (child 5)

State Change - Re-render

Trigger:Screen width changes (e.g., device rotated or resized)

Before

Children arranged in two rows with current spacing and wrapping

→

After

Wrap recalculates layout, possibly changing how many children fit per row

Re-renders:Entire Wrap widget and its children re-layout and repaint

UI Quiz - 3 Questions

What happens when the Wrap widget runs out of horizontal space for its children?

A It moves the extra children to the next line below.

B It hides the extra children.

C It shrinks the children to fit in one line.

D It scrolls horizontally to show all children.

Key Insight

The Wrap widget is useful when you want to display a list of items that automatically flow to the next line if they don't fit horizontally, like words in a paragraph. This helps create responsive layouts that adapt to different screen sizes without scrolling.