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