How to set margin for a Button in Flutter
107,040
Solution 1
Put your button inside a Container and then set the margin
new Container(
margin: const EdgeInsets.only(top: 10.0),
child : new RaisedButton(
onPressed: _submit,
child: new Text('Login'),
),
Solution 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.
Solution 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),
),
Solution 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,
)
]),
],
),
),
),
)
Solution 5
I found the EdgeInsets.symmetric:
child : new RaisedButton(
onPressed: _submit,
child: new Text('Login'),
padding: EdgeInsets.symmetric(horizontal: 50, vertical: 10),
),
Related videos on Youtube
Author by
Raja Jawahar
An avid programmer who is fond of developing mobile apps. Started with Android and now bagging knowledge on iOS, Flutter.
Updated on October 07, 2021Comments
-
Raja Jawahar over 2 years
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'), ), ], ), ), ), ); }
-
Adam Smaka about 3 yearsThis should be accepted answer, because Padding can be marked as const, whereas Container cannot.
-
Diana about 2 years@AdamSmaka Out of curiosity - what is the advantage of sth being marked as const?
-
Adam Smaka about 2 years@Diana the value is build only once so the performance of an app is better