While a margin
adds empty space outside a widget, what do we use when we want our widget to have more space inside of it?
This is the role of padding. Padding adds space within a container. The syntax for padding
is very similar to adding margin
to a container. Again we declare an EdgeInset object and apply it to our container.
Container( child: Text('Hello There') padding: const EdgeInsets.all(50) )
This will expand the space within our container without moving the container away from other widgets. The space between the inner content of the container and the containers outside edge will grow. Let’s see this in an application:
Instructions
Let’s compare the effect of a margin
versus that of padding
. In this example, we’ve provided an app with both. The amount of red, the space inside the Container, is controlled by the amount of padding
. The yellow, the space between the container and the outside of the application is controlled by the amount of margin
.
Try modifying the size of the margin
and that of the padding
.
Hint
Solution
Lines 6 and 7 can be changed to something like:
const myMargin = EdgeInsets.all(10); const myPadding = EdgeInsets.all(75);
But continue changing values to see their effect!