Flutter 07

Container
In body widget, we can also declare a container widget.

body: Container(    color: Colors.grey,  ),

When we don’t put any object inside the container, the grey color, which represent the container area, will cover the whole body widget, as follow :

But when we insert something in the container, the grey are will only cover the object declared, let us put a text inside the container.

body: Container(    child: Text('Hello Friends'),    color: Colors.grey,  ),

The good thing about container is we can add padding and margin to our child.

      body: Container(    padding: EdgeInsets.all(20.0),    child: Text('Hello Friends'),    color: Colors.grey,  ),

In padding, EdgeInsets.all() is used to apply the same padding to edges of all side (left, right, up, down), which is 20 pixels in this instance.

We use EdgeInsets.symmetric() to apply padding in horizantal and vertical direction.

      body: Container(    padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),    child: Text('Hello Friends'),    color: Colors.grey,  ),

Just like padding, we can use margin in the same manner.

   body: Container(    padding: EdgeInsets.fromLTRB(10.0, 20.0, 30.0, 40.0),    margin: EdgeInsets.all(30.0),    child: Text('Hello Friends'),    color: Colors.grey,  ),

Using EdgeInsets as well, we can set the margin as below.

Margin:How much distance the element wants to keep with other elements around it. Padding:How much distance an element wants to keep with the elements inside it

Flutter Tutorial for Beginners #10 - Containers & Padding