Summary - Padding and margin
- Flutter course
- Beginner
- Lesson 40/99
- 4 min
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'),
)Practice 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').
Starter code
import 'package:flutter/material.dart';
void main() {
// 'kart hazir' mesajını print ile yazdır
// runApp ile MaterialApp çağır; home bir Container olsun
}
// Container: dış ve iç boşluk, süsleme içersin
// child: Text olsunSample 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'),
)));
}Expected output
kart hazir
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 If you want a card to both breathe inside and stay separate from neighboring cards, what do you use?
- Both padding and margin Correct answer
- Only color
- Only padding
- Only margin
Explanation: Using padding for inner spacing and margin for outer spacing together makes the card both breathe and stay separate.
2 Define the spacing object
padding: ____.all(16.0),padding: EdgeInsets.all(16.0),Explanation: EdgeInsets is the object that defines padding and margin values.
3 Padding and margin combined
| Term | Meaning |
|---|---|
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 |