How to set margin for a Button in Flutter - button

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

Answer 1

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'),
),

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

Screenshot:
Use the recommended ElevatedButton.style property to provide padding.
ElevatedButton(
onPressed: () {},
child: Text('Button'),
style: ElevatedButton.styleFrom(
padding: EdgeInsets.all(20), // Set padding
),
)

Answer 7

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(

Answer 8

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')),

Answer 9

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

Answer 10

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

Answer 11

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.