What is Padding in Flutter?

Padding is a layout widget in Flutter that insets its child by the given padding. In simple terms, it adds empty space around a widget. Padding is one of the most commonly used widgets for creating whitespace, separating elements, and making UIs look clean and organized.

Basic Usage

To add padding around any widget, wrap it with a Padding widget and provide an EdgeInsets object. The simplest way is to use EdgeInsets.all() which applies the same padding on all four sides.

DARTRead-only

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('Hello, Flutter!'),
)

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('Hello, Flutter!'),
)

This adds 16 logical pixels of space around the text on the left, top, right, and bottom.

EdgeInsets Constructors

EdgeInsets provides several constructors to define padding in different ways:

EdgeInsets.all(double value) – Same padding on all four sides.
EdgeInsets.only({left, top, right, bottom}) – Specify padding for individual sides.
EdgeInsets.symmetric({vertical, horizontal}) – Apply same padding vertically (top and bottom) and/or horizontally (left and right).
EdgeInsets.fromLTRB(double left, double top, double right, double bottom) – Define padding from left, top, right, bottom explicitly.

DARTRead-only

// Example: different padding on each side
Padding(
  padding: EdgeInsets.only(left: 8.0, top: 16.0, right: 8.0, bottom: 4.0),
  child: Text('Custom padding'),
)

// Example: symmetric padding
Padding(
  padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
  child: Text('Horizontal & vertical padding'),
)

// Example: different padding on each side
Padding(
  padding: EdgeInsets.only(left: 8.0, top: 16.0, right: 8.0, bottom: 4.0),
  child: Text('Custom padding'),
)

// Example: symmetric padding
Padding(
  padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
  child: Text('Horizontal & vertical padding'),
)

Padding vs Margin

A common point of confusion is the difference between padding and margin. In Flutter, padding is added by the Padding widget (or the padding property of Container), while margin is typically added by Container's margin property. The key distinction:

Padding is space inside a widget, between its border (if any) and its child.
Margin is space outside a widget, separating it from other widgets.

Here's an example that shows both using a Container:

DARTRead-only

Container(
  margin: EdgeInsets.all(10.0),   // space outside the container
  padding: EdgeInsets.all(15.0),   // space inside, around the child
  color: Colors.blue,
  child: Text('Inside'),
)

Container(
  margin: EdgeInsets.all(10.0),   // space outside the container
  padding: EdgeInsets.all(15.0),   // space inside, around the child
  color: Colors.blue,
  child: Text('Inside'),
)

Using Padding with Other Widgets

You can wrap almost any widget with Padding to add spacing. This is especially useful for:

Adding space between items in a Column or Row.
Creating inset text or buttons.
Giving images some breathing room from screen edges.
Building card-like designs with inner spacing.

DARTRead-only

Column(
  children: [
    Padding(
      padding: EdgeInsets.all(8.0),
      child: Text('Item 1'),
    ),
    Padding(
      padding: EdgeInsets.all(8.0),
      child: Text('Item 2'),
    ),
  ],
)

Column(
  children: [
    Padding(
      padding: EdgeInsets.all(8.0),
      child: Text('Item 1'),
    ),
    Padding(
      padding: EdgeInsets.all(8.0),
      child: Text('Item 2'),
    ),
  ],
)

Common Mistakes Beginners Make

Applying padding to the wrong widget: Sometimes developers add padding to an outer container when they meant to add margin. Think about whether the space should be inside or outside the widget's background/decoration.
Overusing Padding: Too many nested Padding widgets can clutter the widget tree. Consider using SizedBox for simple fixed gaps, or leverage the padding property of Container if you're already using a Container.
Forgetting that Padding adds to the widget's size: Padding increases the total space the widget occupies. This can cause unexpected layout constraints.
Using EdgeInsets incorrectly: Mixing up only and symmetric parameters (e.g., using vertical in only). Always check the constructor names.

Key Points to Remember

Padding adds empty space around its child, inside the widget's bounds.
Use EdgeInsets.all() for uniform padding, EdgeInsets.only() for specific sides, and EdgeInsets.symmetric() for vertical/horizontal groups.
Padding is different from margin – margin is outside the widget.
You can achieve padding without a dedicated Padding widget by using Container's padding property.
Padding respects the parent constraints; it does not create extra space outside the parent's boundaries.

Common Interview Questions

What is the difference between Padding and Container's padding property?
How would you add 10 pixels of space only on the left and right of a widget?
Explain the difference between padding and margin in Flutter.
Can you use EdgeInsets.symmetric to set different top and bottom values? Why or why not?
What happens if you apply padding to a widget that already has its own padding (e.g., a TextButton)? How are they combined?

Try it yourself

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Padding Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                color: Colors.yellow,
                child: Padding(
                  padding: EdgeInsets.all(20.0),
                  child: Text('All padding 20', style: TextStyle(fontSize: 20)),
                ),
              ),
              SizedBox(height: 20),
              Container(
                color: Colors.lightBlue,
                child: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 40.0, vertical: 10.0),
                  child: Text('Horizontal 40, vertical 10', style: TextStyle(fontSize: 20)),
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

Test Your Knowledge

of 3

How do you add 8 pixels of padding to all sides of a widget?

Padding(padding: EdgeInsets.only(8))

Padding(padding: EdgeInsets.all(8))

Padding(padding: EdgeInsets.symmetric(8))

Padding(padding: EdgeInsets.fromLTRB(8,8,8,8))

of 3

What is the main difference between padding and margin?

Padding is inside the widget, margin is outside

Padding is outside the widget, margin is inside

Padding only works with text, margin works with any widget

There is no difference

of 3

Which EdgeInsets constructor would you use to add 10 pixels of padding only to the top and bottom?

EdgeInsets.only(top: 10, bottom: 10)

EdgeInsets.symmetric(vertical: 10)

Both A and B are valid

EdgeInsets.fromLTRB(0,10,0,10)

// Example: different padding on each side Padding( padding: EdgeInsets.only(left: 8.0, top: 16.0, right: 8.0, bottom: 4.0), child: Text('Custom padding'), ) // Example: symmetric padding Padding( padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0), child: Text('Horizontal & vertical padding'), )

Try it yourself

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Padding Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                color: Colors.yellow,
                child: Padding(
                  padding: EdgeInsets.all(20.0),
                  child: Text('All padding 20', style: TextStyle(fontSize: 20)),
                ),
              ),
              SizedBox(height: 20),
              Container(
                color: Colors.lightBlue,
                child: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 40.0, vertical: 10.0),
                  child: Text('Horizontal 40, vertical 10', style: TextStyle(fontSize: 20)),
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

Test Your Knowledge

of 3

How do you add 8 pixels of padding to all sides of a widget?

Padding(padding: EdgeInsets.only(8))

Padding(padding: EdgeInsets.all(8))

Padding(padding: EdgeInsets.symmetric(8))

Padding(padding: EdgeInsets.fromLTRB(8,8,8,8))

of 3

What is the main difference between padding and margin?

Padding is inside the widget, margin is outside

Padding is outside the widget, margin is inside

Padding only works with text, margin works with any widget

There is no difference

of 3

Which EdgeInsets constructor would you use to add 10 pixels of padding only to the top and bottom?

EdgeInsets.only(top: 10, bottom: 10)

EdgeInsets.symmetric(vertical: 10)

Both A and B are valid

EdgeInsets.fromLTRB(0,10,0,10)

Flutter Padding Widget Tutorial for Beginners

Flutter Padding Widget Tutorial for Beginners

What is Padding in Flutter?

Basic Usage

EdgeInsets Constructors

Padding vs Margin

Using Padding with Other Widgets

Common Mistakes Beginners Make

Key Points to Remember

Common Interview Questions

Try it yourself

Test Your Knowledge

Need help?

Flutter Padding Widget Tutorial for Beginners

Flutter Padding Widget Tutorial for Beginners

What is Padding in Flutter?

Basic Usage

EdgeInsets Constructors

Padding vs Margin

Using Padding with Other Widgets

Common Mistakes Beginners Make

Key Points to Remember

Common Interview Questions

Try it yourself

Test Your Knowledge

Need help?