Stack and Positioned in Flutter - UI Render Trace

Component - Stack and Positioned

The Stack widget lets you place widgets on top of each other, like stacking papers. The Positioned widget is used inside a Stack to place a child widget at a specific position, like sticking a note at a certain spot on a board.

Widget Tree

Scaffold
 └─ Stack
     ├─ Container (blue box)
     ├─ Positioned (top: 20, left: 20)
     │    └─ Container (small red box)
     └─ Positioned (bottom: 20, right: 20)
          └─ Container (small green box)

The Scaffold provides the basic screen structure. Inside it, a Stack holds three children: a large blue box filling the space, a small red box positioned near the top-left corner, and a small green box positioned near the bottom-right corner. The Positioned widgets control where the small boxes appear on top of the blue box.

Render Trace - 5 Steps

Step 1: Scaffold

Step 2: Stack

Step 3: Container (blue box)

Step 4: Positioned (top-left red box)

Step 5: Positioned (bottom-right green box)

State Change - Re-render

Trigger:No state change in this static layout example

Before

Stack with blue background and two positioned boxes

→

After

Same layout, no changes

Re-renders:No re-render since no state changes

UI Quiz - 3 Questions

What does the Stack widget do in this layout?

A It layers widgets on top of each other

B It arranges widgets side by side horizontally

C It scrolls widgets vertically

D It hides widgets behind the screen

Key Insight

Using Stack with Positioned widgets lets you place elements freely on the screen, like layering stickers on a board. This is useful for creating complex layouts where items overlap or need precise placement.