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

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