How do I add margins to my widget ? Understanding the effect of EdgeInsets

How to add margin to a widget

In Flutter we generally talk about adding Padding around a widget rather than margin. The Container widget does have a margin parameter, but even this just wraps it child (and any decoration that the child has) with a Padding widget internally.

So if you have something like this

and you want to add some space around the widget like this

then you just wrap the widget with Padding. This is easy to do if you put your cursor on the widget name and press Alt+Enter (or Option+Return on a Mac) in Android Studio. Then choose Add padding from the menu.

which gives you something like this

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Text(
      "text",
      style: TextStyle(fontSize: 20.0),
    ),
);

Meaning of EdgeInsets

When you are setting padding you can’t directly use an integer or double. You have to specify the space (number of logical pixels) using the EdgeInsets. You can set all of the sides at once (as we saw in the example above), or you can set them individually like this:

Widget myWidget() {
  return  Padding(
    padding: const EdgeInsets.only(
      left: 40,
      top: 20,
      right: 40,
      bottom: 20,
    ),
    child: Text("text"),
  );
}

Since in this example left and right are the same and top and bottom are the same, we can simplify EdgeInsets to

padding: const EdgeInsets.symmetric(
  horizontal: 40,
  vertical: 20,
),

Using a Container to set padding and margin

An alternate method is to wrap your widget in a Container. The Container widget has both a padding and a margin property. (This would only be necessary, though, if you were also adding a decoration like background color or a border.)

Widget myWidget() {
  return Container(
    margin: EdgeInsets.all(30),
    padding: EdgeInsets.all(20),
    decoration: BoxDecoration(
        color: Colors.yellow,
        border: Border.all(color: Colors.black),
    ),
    child: Text(
      "Flutter",
      style: TextStyle(
          fontSize: 50.0
      ),
    ),
  );
}