Padding in Flutter

Precisely control the internal spacing of your widgets

Download Complete Examples

What is Padding?

The Padding is a fundamental widget in Flutter that adds space around its child widget. Unlike SizedBox, which controls size, Padding focuses on internal margins.

Without Padding
With Padding

Basic Syntax

Basic Constructor of Padding

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('Mi Widget con espacio'),
)

Main Features:

  • Internal spacing widget: Adds margins around the child
  • Multiple constructors: all, symmetric, only, fromLTRB
  • Essential for design: Improves readability and aesthetics
  • Responsive: Adapts to different screen sizes

Constructors of EdgeInsets

EdgeInsets.all()

Same padding on all sides

Content
EdgeInsets.all(20)

EdgeInsets.symmetric()

Vertical and horizontal padding

Content
EdgeInsets.symmetric(
vertical: 10,
horizontal: 20
)

EdgeInsets.only()

Padding on specific sides

Content
EdgeInsets.only(
left: 15,
top: 10
)

EdgeInsets.fromLTRB()

Specific padding for each side

Content
EdgeInsets.fromLTRB(
10, 20, 30, 40
)

When to use Padding?

Readable Text

Improve readability by adding space around text

Padding( padding: EdgeInsets.all(16), child: Text('Texto importante'), )

Tap Targets

Increase the tap area of buttons for better UX

Padding( padding: EdgeInsets.all(12), child: ElevatedButton(...), )

Separation of Elements

Create space between widgets in containers

Container( child: Padding( padding: EdgeInsets.all(8), child: Row(...), ), )

Visual Examples

1. Padding Basic in Container

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

2. Padding on Button

Padding(
  padding: EdgeInsets.symmetric(
    horizontal: 32,
    vertical: 16,
  ),
  child: ElevatedButton(...),
)

3. Padding Asymmetric

Más espacio arriba
Padding(
  padding: EdgeInsets.only(
    top: 40,
    left: 20,
    right: 20,
    bottom: 10,
  ),
  child: Text('Text'),
)

Properties of the Padding

Property Type Description
padding EdgeInsets Defines the space around the child widget
child Widget Child widget the padding is applied to

EdgeInsets Constructors:

  • EdgeInsets.all(double): Same value on all sides
  • EdgeInsets.symmetric(): Vertical and horizontal values
  • EdgeInsets.only(): Specific values per side
  • EdgeInsets.fromLTRB(): Left, Top, Right, Bottom

Interactive Padding Tester

20 px
Widget with Padding
Padding( padding: EdgeInsets.all(20), child: Container(...), )

Padding vs Margin

Content
Margin (external space)
Padding (internal space)
Content (content)

Padding

  • Space internal of the widget
  • Affects the widget's total size
  • Used with the Padding widget
  • Example: space inside a button

Margin

  • Space external of the widget
  • Doesn't affect the widget's size
  • Used in Container (margin property)
  • Example: space between buttons

Practical Exercises

Exercise 1: Card with Padding

Create a Card with 16px padding on all sides.

Solution:
Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('Contenido de la card'),
  ),
)

Exercise 2: Button with Symmetric Padding

Create a button with 12px vertical and 24px horizontal padding.

Solution:
Padding(
  padding: EdgeInsets.symmetric(
    vertical: 12,
    horizontal: 24,
  ),
  child: ElevatedButton(...),
)

Exercise 3: Text with Asymmetric Padding

Add padding only to the left and top of a text.

Solution:
Padding(
  padding: EdgeInsets.only(
    left: 20,
    top: 10,
  ),
  child: Text('Texto indentado'),
)

Tips and Best Practices

✅ What you SHOULD do

  • Use padding to improve text readability
  • Apply padding to buttons for better touch UX
  • Use consistent values throughout the app
  • Consider using Theme for consistent padding

❌ What you should NOT do

  • Don't use excessive padding that breaks the design
  • Don't confuse padding with margin
  • Avoid very small padding values in buttons
  • Don't forget padding on mobile devices

Pro Tip

Use EdgeInsets.symmetric() when you need the same padding on opposite sides. It's more readable than using EdgeInsets.only() with the same values for left/right or top/bottom.