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

Question

I am trying to wrap my head around ui placement in Flutter. So I currently have something that looks like this

I would like to add a little space b/w search Textfield and the button. This is what the controlling part of my code looks like. I am trying to style my textFieldSearchBox so it has a little margin on the right, I tried trying to increase the Edge insets but it seems to increase the size of the TextField I don't know why? I know I could adding a padding element after TextField but I wanted to know what my other options are.Why does increasing the EdgeInsets in the decoration of textFieldSearchBox increase the size of the textbox? My ideal situation would be to add margin around all the borders of this textbox (LTRB). Any suggestions?

TextField textFieldSearchBox = new TextField(
            keyboardType: TextInputType.text,
            controller: filterController,
            autofocus: false,
            decoration: new InputDecoration(
                contentPadding: new EdgeInsets.fromLTRB(20.0, 10.0, 100.0, 10.0),
                border:
                new OutlineInputBorder(borderRadius: BorderRadius.only()),
            ),
        );

    var optionRow = new Row(
            children: <Widget>[
                new Expanded(child:textFieldSearchBox),
                searchButton,
                new IconButton(
                    icon: new Icon(Icons.filter),
                    onPressed: (){print("Called....");},
                ),
            ],
        );

    return new Scaffold(
                appBar: new AppBar(
                    title: new Text("Title goes here.."),
                    backgroundColor: Colors.lightBlueAccent,
                ),
                body: new Container(
                    child:new Column(
                        children: <Widget>[
                            optionRow,

                        ],
                    ),
                ),
        );

Solution 1

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
      ),
    ),
  );
}

Solution 2

Why does increasing the EdgeInsets in the decoration of textFieldSearchBox increase the size of the textbox ?

Because that padding is used for the internal padding. The one you see between the borders and the actual text.

My ideal situation would be to add margin around all the borders of this textbox (LTRB). Any suggestions ?

Wrap your TextField into a Padding. That is the ideal way to achieve the desired layout in flutter.

final textFieldSearchBox = new Padding(
  padding: const EdgeInsets.only(right: 8.0),
  child: new TextField(
    keyboardType: TextInputType.text,
    controller: filterController,
    autofocus: false,
    decoration: new InputDecoration(
      contentPadding: new EdgeInsets.fromLTRB(20.0, 10.0, 100.0, 10.0),
      border: new OutlineInputBorder(borderRadius: BorderRadius.only()),
    ),
  ),
);

Solution 3

You can put the component inside a padding, like this

var optionRow = new Row(
            children: <Widget>[
                new Expanded(child:textFieldSearchBox),
                new Padding(padding: new EdgeInsets.all(20.0),child:button,),
                new IconButton(
                    icon: new Icon(Icons.filter),
                    onPressed: (){print("Called....");},
                ),
            ],
        );

Solution 4

Since the layout of your widgets is Row, why do not you add the mainAxisAlignment property to it like this:

mainAxisAlignment : MainAxisAlignment.spaceAround

Or

mainAxisAlignment : MainAxisAlignment.spaceBetween

View more solutions

Comments

[MistyD]

will this be the padding between the child and the actual container ? does edgeinset mean padding bw the child and the parent ?

[Rémi Rousselet]

EdgeInset means nothing actually. It's just a class to hold a value. What's interesting is the Padding widget. Which adds space between the parent and it's child

[MistyD]

thanks for the tip that makes sense i am just curious that in my example the edge inset was used for spacing between the border and the text ? I wonder how that wpuld apply to other widgets if i didnt use padding widget. I am still a little unclear of what edge inset means and what padding it controls

[Rap]

Because there is no more space leftover in the row to distribute. mainAxisAlignment only redistributes the remaining space if it is not all used up.

[Isac Moura]

Try to explain what you are doing to OP and others understand better