Flutter TextButton 移除填充和內部填充

Question

我剛剛更新了 Flutter 中的代碼以使用 TextButton 而不是舊的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 但這不允許我設置高度等。

Answer 1

Flutter TextButton是新按鈕。 由於 Flutter 2.0 FlatButton 已棄用。

如何將此按鈕與自定義 styles 一起使用的示例。 這是一個帶有圖標的后退按鈕。 根據設計，它具有寬的可按壓區域和左側的 alignment。

對於內部填充，只需在子屬性中使用Padding小部件 - 它為您提供任何字符串長度的一致樣式。

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

Answer 2

好吧，我剛剛想通了。 需要設置minimumSize屬性。

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

這就是讓我的按鈕比我想要的更大的原因。