How to set margin for a Button in Flutter

Question

I am just creating a form in Flutter. I am not able to set the top margin for the button.

class _MyHomePageState extends State<MyHomePage> {

String firstname; 
String lastname;
final scaffoldKey = new GlobalKey<ScaffoldState>();
final formKey = new GlobalKey<FormState>();


    @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: scaffoldKey,
      appBar: new AppBar(
        title: new Text('Validating forms'),
      ),
      body: new Padding(
        padding: const EdgeInsets.all(16.0),
        child: new Form(
          key: formKey,
          child: new Column(
            children: [
              new TextFormField(
                decoration: new InputDecoration(labelText: 'First Name'),
                validator: (val) =>
                    val.length == 0 ?"Enter FirstName" : null,
                onSaved: (val) => firstname = val,
              ),
              new TextFormField(
                decoration: new InputDecoration(labelText: 'Password'),
                validator: (val) =>
                    val.length ==0 ? 'Enter LastName' : null,
                onSaved: (val) => lastname = val,
                obscureText: true,
              ),
              new RaisedButton(
                onPressed: _submit,
                child: new Text('Login'),
              ),
            ],
          ),
        ),
      ),
    );
  }

score 133 · Accepted Answer · edited Jul 05 '22 at 08:41

133

Put your button inside a Container and then set the margin

Container(
    margin: const EdgeInsets.only(top: 10.0),
    child : RaisedButton(
                onPressed: _submit,
                child: Text('Login'),
              ),

edited Jul 05 '22 at 08:41

Oded Ben Dov

9,936
6
38
53

answered May 05 '18 at 11:22

Raouf Rahiche

28,948
10
85
77

Suragch · Answer 2 · 2021-04-22T03:40:31.363

47

Alternatively you can wrap your button with Padding. (That is what Container does internally.)

Padding(
  padding: const EdgeInsets.all(20),
  child: ElevatedButton(
    onPressed: _submit,
    child: Text('Login'),
  ),
);

See this answer more more on adding margin to a widget.

Note: RaisedButton is deprecated as of Flutter 2.0. ElevatedButton is the replacement.

edited Apr 22 '21 at 03:40

answered Dec 08 '18 at 03:15

Suragch

484,302
314
1,365
1,393

2

This should be accepted answer, because Padding can be marked as const, whereas Container cannot. – Adam Smaka Mar 01 '21 at 09:17
@AdamSmaka Out of curiosity - what is the advantage of sth being marked as const? – Diana Feb 15 '22 at 08:45
3

@Diana the value is build only once so the performance of an app is better – Adam Smaka Feb 15 '22 at 10:15

score 7 · Answer 3 · answered Apr 10 '21 at 05:03

In Flutter 2.0, RaisedButton was deprecated, The ElevatedButton is replacement.
So you can use ElevatedButton and set style as bellow to remove margin:

      ElevatedButton.icon(
        onPressed: () {},
        icon: Icon(Icons.add),
        label: Text(
          'Add Place',
        ),
        style: ButtonStyle(tapTargetSize: MaterialTapTargetSize.shrinkWrap),
      ),

score 2 · Answer 4 · answered Oct 06 '21 at 11:17

image marging top:

        Scaffold(
      backgroundColor: Color.fromARGB(255, 238, 237, 237),
      body: Center(
        child: Container(
          margin: const EdgeInsets.only(top: 25),
          child: Column(
            children: <Widget>[
              Column(children: <Widget>[
                Image.asset(
                  'images/logo.png',
                  fit: BoxFit.contain,
                  width: 130,
                )
              ]),
              
            ],
          ),
        ),
      ),
    )

score 1 · Answer 5 · answered Sep 10 '20 at 02:59

1

I found the EdgeInsets.symmetric:

child : new RaisedButton(
   onPressed: _submit,
   child: new Text('Login'),
   padding: EdgeInsets.symmetric(horizontal: 50, vertical: 10),
),

answered Sep 10 '20 at 02:59

Wendel

2,809
29
28

CopsOnRoad · Answer 6 · 2021-05-17T08:42:30.943

1

Screenshot:

Use the recommended ElevatedButton.style property to provide padding.

ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
    padding: EdgeInsets.all(20), // Set padding
  ),
)

edited May 17 '21 at 08:42

answered Oct 05 '20 at 11:23

CopsOnRoad

237,138
77
654
440

score 1 · Answer 7 · answered Jul 16 '21 at 07:43

This is how I set the size, padding, and margin of widgets in general. here is an example for Button:

   Container(
          margin: EdgeInsets.only(top: 10), // Top Margin
          child:
            ElevatedButton(
              style: TextButton.styleFrom(

                // Inside Padding 
                padding: EdgeInsets.symmetric(horizontal: 0, vertical: 20), 

                // Width,Height
                minimumSize: Size(300, 30), 
              ),
              child: Text('Upload Data'),
              onPressed: () {submitForm();},
            ),
        ),

Other Options are

Container(
          margin: EdgeInsets.only(top:20),
          child:
            ElevatedButton(

set horizontal & vertical margins

Container(
margin: EdgeInsets.symmetric(horizontal: 0, vertical: 20),
child:

Container(
          margin: EdgeInsets.all(20),
          child:
            ElevatedButton(

Container(
          margin: EdgeInsets.fromLTRB(5,10,5,10),
          child:
            ElevatedButton(

score 1 · Answer 8 · edited May 22 '22 at 06:07

1

This is worked for me!

ElevatedButton(
   style: ElevatedButton.styleFrom(
     primary: Global.deepOrange,
     padding: const EdgeInsets.all(20), // at this line you can add margin.
              ),
  onPressed: () {},
    child: const Text('Add New Poll Item')),

edited May 22 '22 at 06:07

Nimantha

6,405
6
28
69

answered May 21 '22 at 09:16

Adeel Nazim

640
6
17

score 0 · Answer 9 · answered Sep 14 '20 at 12:19

child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(data.dataList[index].codeName, style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: UtilColors.darkGrey)),
              Row(
                //TODO to edit employee details
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Expanded(child: Text(BasicAction.formatDate(data.dataList[index].payDate), style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500, color: UtilColors.darkGrey))),
                  Padding(
                    padding: EdgeInsets.all(4),
                    child: Text('Edit', style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: UtilColors.blueColor)),
                  ),
                ],
              ),
            ],
          ),

in this on edit text how to set clicklistenr

score 0 · Answer 10 · answered Jan 06 '21 at 06:23

You can use margin and padding on Card like this:-

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView.builder(
          itemCount: _newsArticles.length,
          padding:  EdgeInsets.symmetric(horizontal: 2,vertical: 2),
          itemBuilder: (context, index) {
            return Card( // <-- Card widget
              shadowColor: Colors.grey,
              elevation: 3,
              margin: EdgeInsets.all(5.0),
              child: ListTile(
                title: _newsArticles[index].urlToImage == null ?
                Image.asset(Constants.NEWS_PLACEHOLDER_IMAGE_ASSET_URL) :
                Image.network(_newsArticles[index].urlToImage),
                subtitle: Text(_newsArticles[index].title, style: TextStyle(fontSize: 14)),
              ),
            );
          },
        )
    );
  }

score 0 · Answer 11 · answered Dec 22 '22 at 19:23

0

Margin and Padding are not the same thing and I feel like they are being used interchangeably in some of the comments.

Margin controls the spacing from outside of the widget border to its edge. Padding controls the spacing from its edge, to its child.

For the ElevatedButton widget, trung's answer is correct, change the tapTargetSize in the button style.

answered Dec 22 '22 at 19:23

Nathan Agersea

496
3
17

This was meant to be a comment, not another answer, apologies. – Nathan Agersea Dec 22 '22 at 19:24

How to set margin for a Button in Flutter

11 Answers11