Container
- Flutter course
- Beginner
- Lesson 28/99
- 4 min
Learn to create a boxed area with Container.
Container
Container is a box-shaped widget that can hold other widgets inside. You add inner spacing with padding, outer spacing with margin, and visual decoration with decoration. Container takes a single child.
Container(
padding: EdgeInsets.all(8.0),
margin: EdgeInsets.all(16.0),
child: Text('Kutu içinde'),
)padding vs margin
padding is the space between the Container's edge and its child; margin is the space between the Container and other widgets outside it. EdgeInsets.all gives the same value to all four sides, EdgeInsets.symmetric different values for horizontal and vertical, and EdgeInsets.only values for specific sides.
Container(
padding: EdgeInsets.symmetric(
horizontal: 12,
vertical: 8,
),
margin: EdgeInsets.only(left: 20),
child: Text('Boşluklu'),
)Practice Print Container info
In main, print two lines with print: container kutu and padding ic.
Starter code
void main() {
// iki satır yazdır:
// container kutu
// padding ic
}Sample solution
void main() {
print('container kutu');
print('padding ic');
}Expected output
container kutu padding ic
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the Container widget used for?
- To show a list
- To record sound
- A box that holds widgets inside Correct answer
- To navigate pages
Explanation: Container is a box that takes a child widget and is formatted with padding/margin/decoration.
2 Inner spacing
Container(
____: EdgeInsets.all(8.0),
child: Text('Dolu'),
)Container(
padding: EdgeInsets.all(8.0),
child: Text('Dolu'),
)Explanation: The padding parameter sets the space between the Container edge and its child.
3 Container concepts
| Term | Meaning |
|---|---|
Container |
Box-shaped area |
padding |
Inner spacing |
margin |
Outer spacing |
decoration |
Visual decoration |