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

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

Or sign up using:

Already have an account?