Flutter文本按钮去除内边距和内部间距

Question

我刚刚更新了我的Flutter代码，使用了替换了旧的FlatButton。但是我不知道如何设置按钮的宽度和高度。

我有两个问题。第一个问题是我现在有了这个图标按钮：

TextButton.icon(
    label: Container(),
    style: TextButton.styleFrom(padding: EdgeInsets.all(0),
        backgroundColor: Colors.black26),
        icon: Icon(Icons.share, color: Theme.of(context).primaryColor),
        onPressed: () {}),

看起来是这样的：

我无法弄清楚如何去掉左右的填充。虽然我已经将填充设置为零。

我的第二个问题是一个按钮，我像这样：

ButtonTheme(
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    height: 10,
    minWidth: 15,
    padding: EdgeInsets.only(top: 5, bottom: 5, right: 5, left: 5),
    child: FlatButton(
      color: Colors.white.withOpacity(0.9),
      child: <MyChild>,
      onPressed: () {},
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12.0),
          side: BorderSide(
              color: condition
                  ? Theme.of(context).primaryColor
                  : widget.color != null
                      ? widget.color
                      : Colors.black54,
              width: 0.5)),
    ));
}

它看起来像这样：

现在我更新了我的代码：

OutlinedButton(
    style: OutlinedButton.styleFrom(
      tapTargetSize: MaterialTapTargetSize.shrinkWrap,
      padding: EdgeInsets.only(top: 0, bottom: 0, right: 5, left: 5),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
      side: BorderSide(
          width: 0.5,
          color: condition
              ? Theme.of(context).primaryColor
              : widget.color != null
                  ? widget.color
                  : Colors.black54),
      primary: Colors.white.withOpacity(0.9),
    ),
    child: <MyChild>,
    onPressed: () {})

但现在看起来是这样的： 上下的内边距太多了，但我不知道如何将其最小化。

有什么建议吗？谢谢！

编辑：我尝试使用OutlinedButtonTheme，但这不能让我设置高度等。

- progNewbie

---

关于第二个按钮的问题，你尝试增加BorderRadius的值了吗？ - CodeSadhu

@CodeSadhu 是的。BorderRadius.circular(12.0) 但我已经找到了解决方案。它不是没有填充，而是设置了minWidth/minHeight。 - progNewbie

好的，很酷！很高兴你找到了解决方案。 - CodeSadhu

请查看此链接 https://dev59.com/6FQK5IYBdhLWcg3wBrQK#68517702 - Arihant Jain

Answer 1

Flutter TextButton 是新的按钮，自从 Flutter 2.0 以后 FlatButton 已经被弃用。

以下是如何使用自定义样式的示例。 这是一个带有图标的返回按钮。 它拥有较大的可按压区域，并根据设计对齐到左侧。

如果需要内部填充，请在子属性中使用 Padding 组件- 这将为任何字符串长度提供一致的样式。

TextButton(
  onPressed: () => Navigator.pop(context),
  style: TextButton.styleFrom(
      padding: EdgeInsets.zero,
      minimumSize: Size(50, 30),
      tapTargetSize: MaterialTapTargetSize.shrinkWrap,
      alignment: Alignment.centerLeft),
  child: Icon(
    CupertinoIcons.back,
    color: Colors.black,
    size: 18,
  ),
),

对于那些对tapTargetSize: MaterialTapTargetSize.shrinkWrap属性感到好奇的人-更多信息在这里 https://dev59.com/_cDqa4cB1Zd3GeqPblvJ#71841707

- awaik

---

将 maximumSize 设置为 Size.zero 对我很有帮助。 - Brendan

Answer 2

您需要设置三个属性：minimumSize、padding 和 tapTargetSize

TextButton(
  onPressed: (){},
  child: Icon(Icons.delete, color: Colors.black54),
  style: TextButton.styleFrom(
    minimumSize: Size.zero,
    padding: EdgeInsets.zero,
    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
  ),
)

编辑：

我在我的代码中添加了一些填充，现在看起来很好。

padding: EdgeInsets.fromLTRB(10.0, 3.0, 10.0, 3.0),

- mahfuz

---

谢谢。当QA团队扫描每个填充像素时，tapTargetSize非常关键 >_< - thanhbinh84

Answer 3

好的，我刚刚弄清楚了。需要设置 minimumSize 属性。

OutlinedButton.styleFrom(
  minimumSize: Size(widthValue, heightValue),
)

这就是导致我的按钮比我想要的更大的原因。

- progNewbie