Container, Padding, SizedBox and Stack

Boxes and layers

Padding adds space around a child; SizedBox forces a size or adds fixed gaps; Center and Align position a child within the space they get. Container is a convenience widget combining padding, margin, size constraints, alignment and decoration (colour, border, radius, shadow) - reach for it when you need several of these, and for the simpler widgets otherwise. Stack paints children on top of each other; Positioned places a child relative to the Stack's edges, and non-positioned children are aligned by the Stack's alignment. Use ConstrainedBox or SizedBox to cap or fix sizes and AspectRatio to keep proportions.

A badge over an avatar

Stack, Positioned and a decorated Container.

SizedBox(
  width: 64,
  height: 64,
  child: Stack(
    clipBehavior: Clip.none,
    children: [
      const CircleAvatar(radius: 32, child: Icon(Icons.person)),
      Positioned(
        right: -4,
        top: -4,
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
          decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(12),
          ),
          child: const Text('3', style: TextStyle(color: Colors.white)),
        ),
      ),
    ],
  ),
)

Use the Widget Inspector

DevTools' Widget Inspector and its layout explorer show each widget's constraints and size, which is the fastest way to understand an unexpected layout.

Quick check: Which widget lets you place a child at a specific offset from the edges of a Stack?

• Flexible
• Expanded
• Positioned
• Padding