# Container, Padding, SizedBox and Stack — Flutter

Source: https://www.skillbyai.com/en/flutter/l-box

> Single-child layout and overlapping layers.

## 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.

```dart
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.

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

- [ ] Flexible
- [ ] Expanded
- [x] Positioned
- [ ] Padding

*Answer:* Positioned. Positioned works only as a direct child of a Stack.