Box: ซ้อนและทับซ้อน

When children should overlap rather than line up, you use a Box. It layers content on the same spot. 🗂️

A Box draws its children in order, each one on top of the previous. Later children sit above earlier ones, like stacked cards.

The last child you write wins the top layer. So to put a label over a photo, place the Image first and the Text after it.

By default a Box wraps its largest child. The other children are positioned within that footprint instead of expanding it.

The contentAlignment parameter sets a default spot for every child. Alignment.Center pulls them all to the middle of the Box.

Inside a Box, each child can use the align modifier to override the default. This is how you pin one item to a corner.

Overlap plus align gives you a classic badge: an avatar fills the Box while a small dot pins to the TopEnd corner.

A common pattern is a caption over a photo. Put the Image first, then align Text to BottomStart so it reads over the image.

Make a Box fill space with fillMaxSize, then add a background color. It becomes a handy layered container for a whole screen.

A Box offers nine alignment positions, from TopStart to BottomEnd, with Center in the middle. They cover every placement you need.

Choose Box whenever pieces share the same area: overlays, badges, captions, or a spinner centered over content. It is your layering tool.

Let's confirm how a Box layers its children.

You learned Box: it stacks children on the same spot in source order, sizes to its biggest child, and uses contentAlignment and align to place them.