带有不需要的填充/额外宽度的 Flutter Material 按钮

Question

我不知道是什么给了这个按钮额外的宽度/填充。使用的图像被裁剪，因此在左侧或右侧没有间距，您可以在开发工具的附加屏幕截图中看到它不占用宽度。不知何故按钮有额外的宽度，但我不知道它来自哪里。

我旁边有另一个相同的按钮，增加的空间导致溢出。

使用宽度参数更改图像大小也不会影响 Material 按钮占用的空间量。它似乎是一个固定大小。

这是完整的代码:

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

我还尝试了其他按钮，如 FlatButton 和 RaisedButton 但它们与此额外的宽度/填充相同。我还尝试将按钮上的 padding 设置为 EdgeInsets.all(0) 但这也没有改变任何东西。

Answer 1

额外的空间来自 minWidth 默认值，该默认值取自当前 ButtonTheme(您可以从 MaterialButton 源代码中看到)。您可以通过将 minWidth 添加到 0 并将 padding 添加到 MaterialButton 小部件来删除额外的空间。像这样:

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