How to set the width and height of a button in Flutter?
As said in documentation here
Raised buttons have a minimum size of 88.0 by 36.0 which can be overidden with ButtonTheme.
You can do it like that
ButtonTheme(
minWidth: 200.0,
height: 100.0,
child: RaisedButton(
onPressed: () {},
child: Text("test"),
),
);
match_parent
(Full width):
SizedBox(
width: double.infinity, // <-- match_parent
height: double.infinity, // <-- match-parent
child: ElevatedButton(...)
)
or
SizedBox.expand(
child: ElevatedButton(...)
)
Specific width:
SizedBox(
width: 100, // <-- Your width
height: 50, // <-- Your height
child: ElevatedButton(...)
)
That's because flutter is not about size. It's about constraints.
Usually we have 2 use cases :
- The child of a widget defines a constraint. The parent size itself is based on that information. ex:
Padding
, which takes the child constraint and increases it. - The parent enforce a constraint to its child. ex:
SizedBox
, but alsoColumn
in strech mode, ...
RaisedButton
is the first case. Which means it's the button which defines its own height/width. And, according to material rules, the raised button size is fixed.
You don't want that behavior, therefore you can use a widget of the second type to override the button constraints.
Anyway, if you need this a lot, consider either creating a new widget which does the job for you. Or use MaterialButton
, which possesses a height property.
I would recommend using a MaterialButton
, than you can do it like this:
MaterialButton(
height: 40.0,
minWidth: 70.0,
color: Theme.of(context).primaryColor,
textColor: Colors.white,
child: new Text("push"),
onPressed: () => {},
splashColor: Colors.redAccent,
)