Flutter：OutlinedButton最小宽度无法修改至小于48px的问题

问题背景 #

要实现无间隙的横向标签列表，尝试调整OutlinedButton的最小宽度，但始终被默认的48px最小宽度限制，达不到预期效果。

尝试过的无效方案 #

• 设置OutlinedButton的minimumSize参数为MaterialStatePropertyAll(Size(0, 0))
• 使用IntrinsicWidth包裹OutlinedButton组件

最终可行方案：自定义按钮组件 #

通过结合GestureDetector和DecoratedBox实现完全自定义的按钮，彻底摆脱系统默认的最小宽度限制，按钮宽度完全由内容和自定义内边距决定。

示例代码：

class CustomTagButton extends StatelessWidget {
  final String label;
  final VoidCallback onTap;
  final Color borderColor;
  final Color textColor;

  const CustomTagButton({
    super.key,
    required this.label,
    required this.onTap,
    this.borderColor = Colors.grey,
    this.textColor = Colors.black,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: DecoratedBox(
        decoration: BoxDecoration(
          border: Border.all(color: borderColor),
          borderRadius: BorderRadius.circular(4),
        ),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
          child: Text(
            label,
            style: TextStyle(color: textColor),
          ),
        ),
      ),
    );
  }
}

使用时直接将该组件放入Row或Wrap中，即可实现无间隙的横向标签列表，完全贴合内容宽度。

内容的提问来源于stack exchange，提问作者Perfectionist