The Padding widget
- Flutter course
- Beginner
- Lesson 36/99
- 4 min
Learn to add inner spacing with the Padding widget.
The Padding widget
Padding is a widget that adds inner spacing around its child. The Padding widget takes a single child and uses EdgeInsets to define the spacing amount. As an alternative to Container's padding parameter, the Padding widget can also be used; it improves readability especially when the child is a single widget.
Padding(
padding: EdgeInsets.all(16.0),
child: Text('Boşluk içinde'),
)Padding vs Container padding
The Padding widget and Container's padding parameter have the same effect; both put space between the child and the edge. The Padding widget is used only for spacing, while Container can also add decoration, margin and color. When only spacing is needed, the Padding widget is lighter.
// With Padding widget
Padding(
padding: EdgeInsets.all(8.0),
child: Text('A'),
)
// With Container padding
Container(
padding: EdgeInsets.all(8.0),
child: Text('A'),
)Practice Print Padding info
In main, print two lines with print: padding ic bosluk and edges dort kenar.
Starter code
void main() {
// iki satır yazdır:
// padding ic bosluk
// edges dort kenar
}Sample solution
void main() {
print('padding ic bosluk');
print('edges dort kenar');
}Expected output
padding ic bosluk edges dort kenar
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does the Padding widget do?
- Adds inner spacing around the child widget Correct answer
- Rotates the child widget
- Hides the child widget
- Sizes the child widget
Explanation: The Padding widget adds inner spacing around the child widget; the amount is set with EdgeInsets.
2 Use the Padding widget
Widget build(BuildContext context) {
return ____(
padding: EdgeInsets.all(16.0),
child: Text('Boşluklu'),
);
}Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(16.0),
child: Text('Boşluklu'),
);
}Explanation: The Padding widget adds inner spacing around the child.
3 Padding concepts
| Term | Meaning |
|---|---|
Padding |
Widget that adds inner spacing |
EdgeInsets |
Object defining spacing amount |
all |
Same spacing on all four sides |
tek child |
The single child Padding accepts |