Flutter Padding Widget - Inner Space Management

Padding is a basic widget used to create inner space (padding) around widgets. If you're familiar with the design world, you know the concept of padding.

What is Padding?

Padding creates space between a widget's content and its outer boundary. Unlike margin, padding creates space inside the widget.

Basic Usage

Padding(
  padding: EdgeInsets.all(16),
  child: Text('I have 16 pixels of space around me'),
)

EdgeInsets Types

Padding values in Flutter are determined with the EdgeInsets class.

EdgeInsets.all()

Equal space from all edges:

Padding(
  padding: EdgeInsets.all(16),
  child: Text('16 pixels from all directions'),
)

EdgeInsets.symmetric()

Symmetric space on horizontal and vertical axes:

Padding(
  padding: EdgeInsets.symmetric(
    horizontal: 16, // 16 pixels from left and right
    vertical: 8,    // 8 pixels from top and bottom
  ),
  child: Text('Symmetric space'),
)

EdgeInsets.only()

Space from specific edges:

Padding(
  padding: EdgeInsets.only(
    left: 16,
    top: 8,
    right: 16,
    bottom: 8,
  ),
  child: Text('Custom space'),
)

You can specify the edges you want:

// Only from left and top
Padding(
  padding: EdgeInsets.only(left: 16, top: 8),
  child: Text('Space from left and top'),
)

EdgeInsets.fromLTRB()

In order of left, top, right, bottom:

Padding(
  padding: EdgeInsets.fromLTRB(16, 8, 16, 12),
  // Left: 16, Top: 8, Right: 16, Bottom: 12
  child: Text('In LTRB format'),
)

Container Padding vs Padding Widget

Container's padding property and Padding widget give the same result:

With Container

Container(
  padding: EdgeInsets.all(16),
  color: Colors.blue,
  child: Text('Container padding'),
)

With Padding Widget

Container(
  color: Colors.blue,
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('Padding widget'),
  ),
)

Which one?

If you're already using Container: padding property
If you only need padding: Padding widget
No performance difference, matter of preference

Standard Padding Values

Material Design recommendations:

EdgeInsets.all(4)   // Very narrow
EdgeInsets.all(8)   // Narrow
EdgeInsets.all(12)  // Medium-narrow
EdgeInsets.all(16)  // Standard (most common)
EdgeInsets.all(24)  // Wide
EdgeInsets.all(32)  // Very wide

For horizontal and vertical:

EdgeInsets.symmetric(horizontal: 16, vertical: 8)  // List items
EdgeInsets.symmetric(horizontal: 24, vertical: 16) // Cards
EdgeInsets.symmetric(horizontal: 16, vertical: 12) // Buttons

Summary

Padding:

Creates inner space around widgets
Values are determined with EdgeInsets
Has all(), symmetric(), only(), fromLTRB() methods
Creates space inside unlike margin
Does the same job as Container's padding property
Responsive and standard values should be used

Padding is one of the most used widgets in every Flutter application and is the foundation of good design.

Flutter: Inner Space Management with Padding