Layout Basics: Container, Padding, and Center

Before combining widgets into full screens, it helps to know the small set of layout widgets that do most of the work: Container, Padding, and Center. Each wraps a single child and adjusts how it's sized or positioned.

Container: the all-purpose box

Container is a convenience widget that combines sizing, spacing, decoration, and alignment into one widget, instead of nesting several single-purpose ones:

Container(
  width: 200,
  height: 100,
  padding: const EdgeInsets.all(12),
  margin: const EdgeInsets.symmetric(vertical: 8),
  decoration: BoxDecoration(
    color: Colors.blue.shade50,
    borderRadius: BorderRadius.circular(12),
    border: Border.all(color: Colors.blue.shade200),
  ),
  child: const Text('Inside a container'),
)

It's tempting to reach for Container for everything, but it's worth knowing what it's built from: internally it composes padding, alignment, and decoration widgets for you. When you only need one of those things — say, just padding — using the dedicated widget is clearer and very slightly cheaper.

Padding: space around a child

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  child: const Text('Breathing room on all sides'),
)

EdgeInsets describes spacing and has a few constructors worth knowing: EdgeInsets.all(8) for equal spacing on every side, EdgeInsets.symmetric(horizontal: ..., vertical: ...) for different horizontal/vertical spacing, and EdgeInsets.only(left: ..., top: ...) when only specific sides need space.

Center: positioning within available space

Center(
  child: Text('Dead center'),
)

Center gives its child as much space as its parent allows, then positions the child in the middle of that space. This trips people up at first: if Center's parent doesn't have a bounded size (for example, it's inside a Column without a fixed height), Center may end up expanding to fill unexpectedly large space, because it's centering within whatever space it's given, not shrinking to fit its child.

For more general positioning, Align is Center's more flexible sibling:

Align(
  alignment: Alignment.bottomRight,
  child: const Icon(Icons.info),
)

Sizing without a fixed number

Hard-coded width/height values work for icons and fixed elements, but most layouts should size themselves based on content or available space rather than magic numbers. SizedBox is the standard way to reserve exact spacing without decoration:

Column(
  children: [
    const Text('Title'),
    const SizedBox(height: 12), // a spacer, not a box with content
    const Text('Subtitle'),
  ],
)

Putting it together

Center(
  child: Container(
    padding: const EdgeInsets.all(24),
    decoration: BoxDecoration(
      color: Colors.white,
      boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 8)],
    ),
    child: const Text('A centered card'),
  ),
)

These three widgets — Container, Padding, Center — combined with SizedBox, cover the majority of spacing and positioning needs in a typical screen. The next lesson adds Row and Column, which is where you'll start arranging multiple widgets relative to each other rather than positioning one at a time.