Learn

We often will want space separating our element from others. We are able to do this using a Container.

The margin is the empty space around the outside of a widget. An EdgeInset object is used to specify the amount of space.

We can create our EdgeInset using its all constructor. This all is used to create a dimension where the left, right, top and bottom are the same. There are other options such as .symmetric(vertical: 10) for top and bottom symmetrical margins or .only(left: 40) for just a left margin.

Once we have created our EdgeInset, we pass it to the margin parameter of the Container object. Here we will create a margin on every side of 50 pixels. Add this beneath the existing ‘decoration’ parameter:

Container(
  margin: const EdgeInsets.all(50)
)

Keep in mind we can combine the margin with what we’ve already learned.

Let’s try adding margins.

Instructions

Try adding a margin or different margins to the Containers in the example.

Hint

The syntax for a margin looks like:

Container(
  margin: const EdgeInsets.all(50)
)

Solution

The bottom of main might look like:

 var myMargin = const EdgeInsets.all(10);
  runApp(MaterialApp(
      home: Scaffold(
          body: Column(children: [
    Container(margin: myMargin, child: icon1),
    Container(margin: myMargin, child: icon2),
    Container(margin: myMargin, child: icon3)
  ]))));

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?