Learn

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

The size of the `margin` can be changed on line 6, and the size of the `padding` can be adjusted on line 7.

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!

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?