Container margin
- Flutter course
- Beginner
- Lesson 38/99
- 4 min
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'),
)Practice Print margin info
In main, print two lines with print: margin dis bosluk and container dis kenar.
Starter code
void main() {
// iki satır yazdır:
// margin dis bosluk
// container dis kenar
}Sample solution
void main() {
print('margin dis bosluk');
print('container dis kenar');
}Expected output
margin dis bosluk container dis kenar
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 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 Correct answer
Explanation: The margin parameter puts space between the Container and the widgets outside it.
2 Give outer spacing
Container(
____: EdgeInsets.all(16.0),
child: Text('Dış boşluklu'),
)Container(
margin: EdgeInsets.all(16.0),
child: Text('Dış boşluklu'),
)Explanation: The margin parameter gives Container outer spacing.
3 Container margin concepts
| Term | Meaning |
|---|---|
Container margin |
Space to outer widgets |
margin + padding |
Inner and outer spacing together |
dış kenar |
Where margin is applied |
EdgeInsets |
Defines the margin value |