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,

                        ],
                    ),
                ),
        );

Suragch · Accepted Answer · 2021-01-18T10:14:01.910

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

is there a way to use padding on an expanded widget? ie a textfield that is expanded but also has padding. or would a container be your best bet there? — Joe Pleavin, Jul 09 '23 at 22:25
Can you just do `Expanded(child: Padding(child: TextField()))`? — Suragch, Jul 11 '23 at 00:58
yeah its that simple, I'm coming from kotlin to flutter and missed a couple of things. — Joe Pleavin, Jul 11 '23 at 15:31

score 8 · Answer 2 · answered May 03 '18 at 19:18

8

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

answered May 03 '18 at 19:18

Rémi Rousselet

256,336
79
519
432

will this be the padding between the child and the actual container ? does edgeinset mean padding bw the child and the parent ? – MistyD May 03 '18 at 20:47
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 – Rémi Rousselet May 03 '18 at 20:48
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 – MistyD May 03 '18 at 20:52

score 6 · Answer 3 · answered May 04 '18 at 14:06

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

score 5 · Answer 4 · answered May 04 '18 at 16:42

5

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

answered May 04 '18 at 16:42

Shady Aziza

50,824
20
115
113

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. – Rap May 23 '19 at 19:02

score 0 · Answer 5 · answered Oct 03 '19 at 08:31

0

Simply use

EdgeInsets.fromLTRB

For example:

padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),

answered Oct 03 '19 at 08:31

MrDEV

3,490
1
19
20

Try to explain what you are doing to OP and others understand better – Isac Moura Jan 23 '20 at 16:58

score 0 · Answer 6 · answered May 23 '20 at 11:29

0

You can also use SizedBox if you want to avoid using Container

answered May 23 '20 at 11:29

abhishekm473

99
1
2
10

score 0 · Answer 7 · answered Aug 19 '21 at 18:02

There are some widgets which allow that using a parameter, but in most cases You can wrap the Widget in a Padding widget like so.

From this

YourWidget(
    ....
)

To This

Padding(
    padding: EdgeInsets.all(value),
    YourWidget(
        ....
    )
)

Where "all" can be replaced with the variant of your choice

score 0 · Answer 8 · answered Aug 27 '22 at 07:38

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.strong text

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

8 Answers8

How to add margin to a widget

Meaning of EdgeInsets

Using a Container to set padding and margin

Linked