Widget City · Module 5
Stack & Position
Stack layers its children on top of each other. Positioned places a child at a precise offset inside the Stack. Align anchors a child to a named alignment like
These three widgets are the building blocks of floating buttons, badges, and overlays.
Alignment.bottomLeft.These three widgets are the building blocks of floating buttons, badges, and overlays.
The layer toolkit
Stack
Stack(children: [...])
Layers children on top of each other.
Positioned
Positioned(top: 0, right: 0, child: ...)
Places a child at exact coordinates inside Stack.
Align
Align(alignment: Alignment.topRight, child: ...)
Aligns a child using named positions.
Progress
0 / 5 mini-games solved
Stage 1
Layer Detective
Spot the difference between Stack and Column.
Column
A
B
C
Stack
A
B
C
Which widget places children on top of each other (overlapping), instead of stacking them linearly?