Hasen
Hasen

Reputation: 12304

Flutter material button with unwanted padding/additional width

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.

enter image description here

enter image description here

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.

Upvotes: 12

Views: 12807

Answers (3)

Usman ali
Usman ali

Reputation: 21

MaterialButton(
            minWidth: 0,
            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap)

Upvotes: 0

ישו אוהב אותך
ישו אוהב אותך

Reputation: 29783

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

Upvotes: 21

Ganesh Bhat
Ganesh Bhat

Reputation: 256

Use a container, where you can specify the width

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

Upvotes: -2

Related Questions