How do Flutter's core layout widgets work together?

Flutter layout is constraint-based, not coordinate-based. A widget receives a BoxConstraints with minimum and maximum width and height, picks a size that satisfies them, and reports that size to its parent. The parent then positions the child. Understanding this explains most overflow and unbounded-constraint errors.

Scaffold(
  body: SafeArea(
    child: Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const [
          Text('Account'),
          SizedBox(height: 8),
          Card(child: ListTile(title: Text('Billing'))),
        ],
      ),
    ),
  ),
)

• Padding reduces the constraints given to its child and adds the padding back to its own size
• SizedBox forces a specific size when constraints allow
• Container combines padding, margin, decoration, alignment and constraints
• Align and Center place a child inside available space
• Expanded and Flexible only work inside Flex widgets such as Row and Column

Debugging layout errors

An unbounded constraint error means a widget that wants infinite size is inside a scrollable or another unbounded parent. A RenderFlex overflow means the children's minimum sizes exceed the available main-axis space. Fix the constraint chain rather than hiding the error with clipping.