Container, Padding, SizedBox, Expanded and Flexible

Container: a box with style

Container is a convenience widget that combines several simpler ones: Padding, a size, a colour or decoration, a margin and alignment. Use it when you need a styled box, like a coloured card or a rounded badge.

Container(
  margin: const EdgeInsets.all(8),                  // space outside the box
  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),   // space inside
  decoration: BoxDecoration(
    color: Colors.orange.shade50,
    borderRadius: BorderRadius.circular(12),
    border: Border.all(color: Colors.orange),
  ),
  child: const Text('Diwali offer: 20% off sweets'),
)

EdgeInsets describes space on each side: EdgeInsets.all(8), EdgeInsets.symmetric(horizontal: 16, vertical: 12), or EdgeInsets.only(left: 12, top: 4). Margin is outside the decoration; padding is inside it.

Padding and SizedBox

If you only need space, Padding is clearer and lighter than a Container. SizedBox forces a size on its child (SizedBox(width: 120, child: ...)) or, without a child, makes an empty gap. SizedBox.expand() fills all available space.

BoxDecoration can also add a boxShadow for a raised look, a gradient instead of a flat colour, or shape: BoxShape.circle for round badges. For most cards, though, the Material Card widget already gives a good default shape and elevation that follows the theme.

Expanded: fill the rest

Row(
  children: [
    const Icon(Icons.search),
    const SizedBox(width: 8),
    Expanded(                                   // takes all remaining width
      child: Text('Search for kurtas, sarees, dupattas and more', overflow: TextOverflow.ellipsis),
    ),
    IconButton(onPressed: () {}, icon: const Icon(Icons.mic)),
  ],
)

Expanded only works as a direct child of a Row, Column or Flex.

flex factors

Row(
  children: [
    Expanded(flex: 2, child: Container(height: 40, color: Colors.green)),   // 2 parts
    Expanded(flex: 1, child: Container(height: 40, color: Colors.amber)),   // 1 part
  ],
)

Flexible versus Expanded

Expanded is simply Flexible with fit: FlexFit.tight. Use Flexible when a child, such as a short label, should not be stretched but must still shrink if space is tight. Row and Column are both special cases of the Flex widget, which takes a direction parameter.

Common mistakes

• Setting both color and decoration on a Container: an assertion error. Move the colour into BoxDecoration.
• Using Expanded outside a Row, Column or Flex: "Incorrect use of ParentDataWidget".
• Using Container only for padding. Prefer Padding; it says what you mean.
• Forgetting overflow: TextOverflow.ellipsis for long text inside Expanded, so it wraps or overflows awkwardly.