减少图标和文本之间的间距 - Flutter OutlinedButton

Question

有没有一种简单的方法可以减少 OutlinedButton 上图标和文本之间的间距？

下面是我的代码。做了一些不同的尝试，但没有成功。

OutlinedButton.icon(
  onPressed: () {},
  icon: Icon(Icons.flash_on_outlined, size: 20.0),
  label: Text(
    'Surge',
    style: TextStyle(
      fontSize: 15.0,
      fontWeight: FontWeight.bold,
      color: Colors.blue,
    ),
  ),
  style: OutlinedButton.styleFrom(
    padding: EdgeInsets.zero,
    //fixedSize: Size(40, 25),
    backgroundColor: Colors.blue[100],
    side: BorderSide(
      color: Colors.blue,
      width: 1,
    ),
  ),
),

Answer 1

您正在使用OutlinedButton.icon。如果您查看其源代码，您会发现它根本没有什么神奇之处：它只是将图标和文本放在 Row 中，并在中间放置一个 SizedBox作为间隙，其源代码如下：

// Flutter source code: `outlined_button.dart`, line 378.
final double gap = scale <= 1 ? 8 : lerpDouble(8, 4, math.min(scale - 1, 1))!;
return Row(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[icon, SizedBox(width: gap), Flexible(child: label)],
);

因此，如果您不喜欢这个默认的 8 单位间隙，则只需不要使用 .icon 构造函数即可。只需使用普通的构造函数并传入一个 Row 作为它的子元素，可以有任何你想要的间隙：

OutlinedButton(
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: const [
      Icon(Icons.star),
      SizedBox(width: 8),
      Text('Add to bookmark'),
    ],
  ),
  onPressed: () {},
)

Answer 2

  OutlinedButton.icon(
    onPressed: () {},
    icon: Wrap(
      // mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Icon(Icons.flash_on_outlined, size: 20.0),
        Text(
          'Surge',
          style: TextStyle(
            fontSize: 15.0,
            fontWeight: FontWeight.bold,
            color: Colors.blue,
          ),
        )
      ],
    ),
    label: Text(""),
    style: OutlinedButton.styleFrom(
      padding: EdgeInsets.zero,
      //fixedSize: Size(40, 25),
      backgroundColor: Colors.blue[100],
      side: BorderSide(
        color: Colors.blue,
        width: 1,
      ),
    ),
  )

Answer 3

我认为实现这种情况的最佳方法是将图标按钮替换为带有 RichText 作为子项的按钮：

OutlinedButton(
          onPressed: () {},
          child: RichText(
            text: TextSpan(children: [
              // Icon as a font character
              TextSpan(
                text: String.fromCharCode(Icons.flash_on_outlined.codePoint),
                style: TextStyle(
                  color: Colors.amber,
                  fontFamily: Icons.flash_on_outlined.fontFamily,
                  package: Icons.flash_on_outlined.fontPackage,
                ),
              ),
              // Button text
              TextSpan(
                text: 'Surge',
                style: TextStyle(
                  fontSize: 15.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.blue,
                ),
              ),
            ]),
          ),
          style: OutlinedButton.styleFrom(
            backgroundColor: Colors.blue[100],
            side: BorderSide(
              color: Colors.blue,
              width: 1,
            ),
          ),
        )

此解决方案删除了​​图标的任何边距。

Answer 4

您的尺寸，关于图标和文本，是块还是可以修改它？