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

Question

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

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

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

你的尺寸，关于图标和文字，是块还是可以修改？

Answer 2

我认为实现这种情况的最佳方法是用 RichText 按钮替换图标按钮作为 child:

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 3

  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 4

您正在使用 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 作为其 child 传递，无论你想要什么差距：

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

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

Reducing the space between icon and text - Flutter OutlinedButton

flutter

flutter-layout