Container

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'),
)

Exercise Print Container info

In main, print two lines with print: container kutu and padding ic.

Show example solution

void main() {
  print('container kutu');
  print('padding ic');
}

Test yourself

What is the Container widget used for?
- To show a list
- To record sound
- A box that holds widgets inside
- To navigate pages
Show answer

A box that holds widgets inside — Container is a box that takes a child widget and is formatted with padding/margin/decoration.

Inner spacing

Container(
  ____: EdgeInsets.all(8.0),
  child: Text('Dolu'),
)

Show answer

Container(
  padding: EdgeInsets.all(8.0),
  child: Text('Dolu'),
)

Container concepts

Container

Box-shaped area
padding

Inner spacing
margin

Outer spacing
decoration

Visual decoration

Next lesson: BoxDecoration

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies