Flutter material button with unwanted padding/additional width

Question

I can't figure out what's giving this button extra width/padding. The image used is cropped so has no spacing to the left or right and you can see in the attached screenshot from the dev tools that it doesn't occupy the width. Somehow the button has extra width but I don't know where it's coming from.

I have another identical button next to it and with the added space it's causing overflow.

Changing the image size with the width parameter doesn't affect the amount of space the material button takes up either. It seems to be a fixed size.

This is the whole code:

Scaffold(
      body: Row(
        children: <Widget>[
          MaterialButton(
            child: Image.asset("images/male.png", width: 33)
          )
        ],
      ),
    );

I also tried other buttons like FlatButton and RaisedButton but they are the same with this additional width/padding. I also tried setting padding with on the button to EdgeInsets.all(0) but that doesn't change anything either.

Answer 1

The extra space is from the minWidth default value which is taken from the current ButtonTheme (you can see that from the MaterialButton source code). You can remove the extra space by adding minWidth to 0 and padding to 0 to your MaterialButton widget. Something like this:

Scaffold(
  body: Row(
    children: <Widget>[
      MaterialButton(
        padding: EdgeInsets.all(0),
        minWidth: 0,
        child: Image.asset("images/male.png", width: 33),
      )
    ],
  ),
);