Explain the difference between Container and SizedBox

Reach for SizedBox for spacing or simple sizing; use Container only when you genuinely need multiple capabilities at once (padding + decoration + alignment). Better still, prefer the specialised widgets Container composes internally — Padding, ColoredBox, DecoratedBox — since each is cheaper and more explicit.

Container is literally implemented as a series of these widgets stacked on each other based on which params you set.

---

Code in action

// SizedBox — fixed size
SizedBox(width: 100, height: 100, child: const Text('hi'));

// SizedBox.expand → fills parent
const SizedBox.expand(child: Text('fills'));

// SizedBox for spacing — no child, just a gap
Column(children: const [
  Text('top'),
  SizedBox(height: 16),
  Text('bottom'),
]);

// Container — when you need multiple things at once
Container(
  width: 120,
  height: 40,
  padding: const EdgeInsets.symmetric(horizontal: 12),
  margin: const EdgeInsets.all(8),
  alignment: Alignment.center,
  decoration: BoxDecoration(
    color: Colors.indigo,
    borderRadius: BorderRadius.circular(8),
    boxShadow: const [BoxShadow(blurRadius: 4)],
  ),
  child: const Text('Save'),
);

---

Decision table — pick the right widget

Rule of thumb: use the most specific widget that fits the job. It's smaller, faster, easier to read.

---

Common mistakes to avoid

// ❌ Reaching for Container when SizedBox would do
Container(width: 16);                              // overkill for a spacer
// ✅ const SizedBox(width: 16)

// ❌ Container with only `color` instead of ColoredBox
Container(color: Colors.red, child: ...);
// ✅ const ColoredBox(color: Colors.red, child: ...)
//    — lighter; const-friendly

// ❌ Setting both `color` and `decoration` on Container
Container(color: Colors.red, decoration: BoxDecoration(...));  // 💥 assertion failure
// ✅ Put the color INSIDE the BoxDecoration

// ❌ Skipping const where possible
SizedBox(height: 16);                              // rebuilt every parent build
// ✅ const SizedBox(height: 16);

// ❌ Using Container's margin for inter-item spacing in a Row/Column
// ✅ Just drop in SizedBoxes between items — easier to reason about

---

Interview follow-ups

1. Why is SizedBox "lighter" than Container? SizedBox is one tiny RenderObject that enforces fixed constraints. Container is a composition widget that conditionally wraps in Padding, Align, DecoratedBox, ColoredBox, Transform, etc. More widgets = more work each build, even when most params are null.

2. What does SizedBox.expand actually do? It sets width: double.infinity, height: double.infinity — instructing the layout to take all available space along both axes (subject to parent constraints).

3. Why does Flutter throw if you set both color and decoration on a Container? Because decoration.color and the standalone color would conflict. The assertion forces you to put colour inside the decoration so there's a single source of truth.

4. When should you use Container(margin: ...) vs an outer Padding? Padding is more explicit when only spacing is needed and avoids the rest of Container's machinery. Container(margin: ...) is fine when you already need a Container for other reasons — otherwise prefer Padding.

---