Flutter Lesson 17 of 83 3 min read

Padding, Align, Center and SizedBox in Flutter

Add space and position widgets in Flutter with Padding, SizedBox, Center, Align, Spacer and SafeArea, and choose consistent spacing.

Flutter has no margin or padding properties on most widgets. You add space by wrapping a widget in another widget.

Padding #

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Padding(
            padding: EdgeInsets.all(24),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Welcome back', style: TextStyle(fontSize: 28)),
                SizedBox(height: 8),
                Text('Here is what happened while you were away.'),
                SizedBox(height: 24),
                Placeholder(fallbackHeight: 120),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

For layouts that must mirror in right-to-left languages such as Arabic, use EdgeInsetsDirectional.only(start: 16) in place of left.

SizedBox for gaps #

const SizedBox(height: 16) // vertical gap in a Column
const SizedBox(width: 8)   // horizontal gap in a Row

It is the lightest way to separate two widgets.

Center and Align #

Center puts its child in the middle. Align puts it anywhere.

const Align(
  alignment: Alignment.bottomRight,
  child: Text('Bottom right'),
)

The nine named positions are topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter and bottomRight. For anything in between, use coordinates from -1 to 1: Alignment(0.5, -0.8) is right of centre, near the top.

Both Center and Align expand to fill their parent. If you want them to shrink around the child, set widthFactor and heightFactor.

SafeArea #

Phones have notches, rounded corners, status bars and gesture bars. SafeArea adds exactly enough padding to keep your content clear of them.

Scaffold(
  body: SafeArea(
    child: Column(children: const [Text('Not hidden behind the notch')]),
  ),
)

An AppBar already handles the top for you. Use SafeArea for screens without one, and for content pinned to the bottom edge.

Padding or margin? #

Padding is inside a box, margin is outside. In Flutter, “margin” is simply a Padding wrapped around the decorated widget.

Padding(
  padding: const EdgeInsets.all(16),          // acts as margin
  child: DecoratedBox(
    decoration: BoxDecoration(
      color: Colors.blue.shade50,
      borderRadius: BorderRadius.circular(12),
    ),
    child: const Padding(
      padding: EdgeInsets.all(16),            // acts as padding
      child: Text('A box with space inside and out'),
    ),
  ),
)

Container offers both as properties, which is shorter.

Use a spacing scale #

Random gaps (7, 13, 22) make a screen look untidy. Pick a small set of values, usually multiples of 4 or 8, and use only those.

abstract final class Gap {
  static const xs = 4.0;
  static const sm = 8.0;
  static const md = 16.0;
  static const lg = 24.0;
  static const xl = 32.0;
}

// Usage
const SizedBox(height: Gap.md)
const EdgeInsets.all(Gap.lg)

Other positioning helpers #

Try it yourself #

Build a login screen layout without the logic: a centred title, two placeholder boxes for fields and a button, all with 24 pixels of padding at the sides and consistent gaps from a spacing scale.