Summary - Padding and margin

Combine padding and margin to make a breathable card.

Padding and margin summary

The Padding widget and Container's padding parameter put inner space between the child and the edge. Container's margin parameter puts outer space between the Container and outside widgets. EdgeInsets's all, only and symmetric constructors flexibly define the spacing amount. Using padding and margin together, you create cards that breathe inside and stay separate from their neighbors.

Container(
  margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  padding: EdgeInsets.all(12),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8),
  ),
  child: Text('Nefes alan kart'),
)

Exercise Build a breathing card and run

First print print('kart hazir'), then call runApp(MaterialApp(home: Container(...))). The Container should have margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8), padding: EdgeInsets.all(12), decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(8)), and child: Text('Nefes alan kart').

Show example solution

import 'package:flutter/material.dart';

void main() {
  print('kart hazir');
  runApp(MaterialApp(home: Container(
    margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
    padding: EdgeInsets.all(12),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(8),
    ),
    child: Text('Nefes alan kart'),
  )));
}

Test yourself

If you want a card to both breathe inside and stay separate from neighboring cards, what do you use?
- Both padding and margin
- Only color
- Only padding
- Only margin
Show answer

Both padding and margin — Using padding for inner spacing and margin for outer spacing together makes the card both breathe and stay separate.

Define the spacing object

padding: ____.all(16.0),

Show answer

padding: EdgeInsets.all(16.0),

Padding and margin combined

Nefes alan kart

With padding + margin
Dört kenar aynı boşluk

With EdgeInsets.all
Yatay ve dikey ayrı

With EdgeInsets.symmetric
Belirli kenar boşluğu

With EdgeInsets.only

Next lesson: SizedBox

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies