Flutter Wrap组件嵌套MaterialButton出现随机间距与对齐异常问题

问题原因 #

这不是Flutter的Bug，是MaterialButton组件的默认配置导致的预期行为，核心原因有两个：

1. MaterialButton默认开启了Material设计规范的最小点击区域适配：默认materialTapTargetSize属性值为MaterialTapTargetSize.padded，会在按钮的视觉元素外围额外添加不可见的触控边距，保证点击区域至少达到48x48dp的规范要求，这部分边距不会被你设置的padding: EdgeInsets.all(1)、minWidth: 1覆盖，就会出现按钮视觉间距不均匀、对齐异常的问题。
2. 你没有给Wrap组件显式配置子元素间距参数：spacing（同行动态间距）、runSpacing（行间距）的默认值都是0，按钮自身的隐形边距就成为了间距的唯一来源，自然无法达到均匀间距的预期。

修复方案 #

按以下步骤修改代码即可：

1. 给所有MaterialButton添加materialTapTargetSize: MaterialTapTargetSize.shrinkWrap配置，关闭额外的隐形点击区域，让按钮的实际占用大小和视觉大小一致。
2. 给Wrap组件显式设置你需要的间距值，比如spacing: 6, runSpacing: 6，统一控制所有按钮之间的间距。
3. 可选优化：Flutter 2.0之后已经不推荐使用MaterialButton，你可以换成更轻量的TextButton组件，配置逻辑相同。

修改后的示例代码如下：

@override
Widget build(BuildContext context) {
  return Wrap(
    spacing: 6, // 同行动态间距，可自行调整数值
    runSpacing: 6, // 行间距，可自行调整数值
    alignment: WrapAlignment.start,
    children: <Widget>[
      for (int i = 0; i < widget.words.length; i++)
        MaterialButton(
          color: Colors.red,
          minWidth: 1,
          padding: EdgeInsets.all(1),
          // 新增配置，关闭隐形点击区域
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          child: PlatformText(
            widget.words[i].word,
            style: widget.words[i].selected ?
                TextStyle(color: widget.selectColor)
                : TextStyle(color: Colors.red)
          ),
          onPressed: () => widget.bloc.add(CsWordSelected(i)),
        )
    ]
  );
}

为什么CupertinoButton表现正常 #

因为Cupertino设计规范的点击区域适配逻辑和Material不同，CupertinoButton默认不会添加额外的隐形边距，所以不会出现该问题。

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