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) ]))));