Flutter Padding & Margin

Creating space inside and around widgets

📏 What are Padding & Margin?

Padding adds space inside a widget between its border and content, while margin adds space outside a widget. Both are essential for creating clean, well-spaced layouts that look professional and are easy to read. 


// Padding example
Padding(
  padding: EdgeInsets.all(16),
  child: Text('Padded text'),
)

Output:

Padded text

Key Spacing Concepts

📦

Padding Widget

Adds space inside 

Padding(
  padding: EdgeInsets.all(20),
  child: Text('Hello'),
)
🔲

Container Margin

Adds space outside 

Container(
  margin: EdgeInsets.all(20),
  child: Text('Hello'),
)
↔️

Symmetric Spacing

Equal horizontal/vertical space 

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

Custom Spacing

Different space on each side 

EdgeInsets.only(
  left: 10,
  right: 20,
  top: 5,
  bottom: 15,
)

🔹 Understanding Padding

Padding creates space inside a widget: 

Container(
  color: Colors.blue,
  child: Padding(
    padding: EdgeInsets.all(30),
    child: Text(
      'Padded Text',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

Output:

Padded Text

🔹 Understanding Margin

Margin creates space outside a widget: 

Container(
  margin: EdgeInsets.all(30),
  padding: EdgeInsets.all(20),
  color: Colors.green,
  child: Text(
    'Margin & Padding',
    style: TextStyle(color: Colors.white),
  ),
)

Output:

Margin & Padding

🔹 EdgeInsets.all()

Apply equal spacing on all sides: 

// Same padding on all sides
Padding(
  padding: EdgeInsets.all(20),
  child: Container(
    color: Colors.orange,
    child: Text('Equal spacing'),
  ),
)

Output:

Equal spacing

🔹 EdgeInsets.symmetric()

Apply different horizontal and vertical spacing: 

Padding(
  padding: EdgeInsets.symmetric(
    horizontal: 40,  // Left and right
    vertical: 10,    // Top and bottom
  ),
  child: Container(
    color: Colors.purple,
    child: Text(
      'Symmetric',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

Output:

Symmetric

🔹 EdgeInsets.only()

Apply custom spacing on specific sides: 

Padding(
  padding: EdgeInsets.only(
    left: 50,
    top: 20,
    right: 10,
    bottom: 30,
  ),
  child: Container(
    color: Colors.teal,
    child: Text(
      'Custom spacing',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

Output:

Custom spacing

🔹 Combining Padding and Margin

Use both for complete spacing control: 

Container(
  margin: EdgeInsets.all(20),
  padding: EdgeInsets.all(15),
  decoration: BoxDecoration(
    color: Colors.blue[100],
    border: Border.all(color: Colors.blue, width: 2),
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text(
    'Margin creates space outside (20px)\nPadding creates space inside (15px)',
    textAlign: TextAlign.center,
  ),
)

Output:

Margin creates space outside (20px)
Padding creates space inside (15px)

🔹 Practical Example

Create a well-spaced button card: 

Container(
  margin: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(15),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.3),
        blurRadius: 10,
        offset: Offset(0, 5),
      ),
    ],
  ),
  child: Column(
    children: [
      Icon(Icons.notifications, size: 50, color: Colors.blue),
      SizedBox(height: 15),
      Text(
        'Enable Notifications',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
      ),
      SizedBox(height: 10),
      Text(
        'Stay updated with the latest news',
        textAlign: TextAlign.center,
        style: TextStyle(color: Colors.grey),
      ),
      SizedBox(height: 20),
      ElevatedButton(
        onPressed: () {},
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 30, vertical: 12),
          child: Text('Enable'),
        ),
      ),
    ],
  ),
)

Output:

🔔
Enable Notifications
Stay updated with the latest news

🧠 Test Your Knowledge

What's the difference between padding and margin?