Container margin

Learn to add outer spacing with Container margin.

Container margin

Container's margin parameter puts space between the Container and the widgets outside it. margin is defined with EdgeInsets and uses the same constructors as Padding (all, only, symmetric). While margin leaves space around the Container's outer edge, padding puts space between the inner edge and the child.

Container(
  margin: EdgeInsets.all(16.0),
  padding: EdgeInsets.all(8.0),
  child: Text('Çift boşluklu'),
)

margin and padding together

A Container can take both padding and margin. padding sets the space between the Container edge and the child; margin sets the space between the Container and the widgets around it. Using both together, you create a card that breathes inside and keeps its distance outside.

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

Exercise Print margin info

In main, print two lines with print: margin dis bosluk and container dis kenar.

Show example solution

void main() {
  print('margin dis bosluk');
  print('container dis kenar');
}

Test yourself

What does Container's margin parameter do?
- Gives color inside the Container
- Sizes the Container
- Hides the Container
- Puts space between the Container and outside widgets
Show answer

Puts space between the Container and outside widgets — The margin parameter puts space between the Container and the widgets outside it.

Give outer spacing

Container(
  ____: EdgeInsets.all(16.0),
  child: Text('Dış boşluklu'),
)

Show answer

Container(
  margin: EdgeInsets.all(16.0),
  child: Text('Dış boşluklu'),
)

Container margin concepts

Container margin

Space to outer widgets
margin + padding

Inner and outer spacing together
dış kenar

Where margin is applied
EdgeInsets

Defines the margin value

Next lesson: Spacing strategy

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies