为何OutlinedButton设置的Padding垂直方向未按预期生效？

你遇到的问题是因为使用TextButton.styleFrom配置OutlinedButton样式时，部分布局属性不兼容，导致垂直方向的padding未正确作用。此外，OutlinedButton的默认布局约束可能会限制垂直尺寸的计算。

解决方案 #

有两种可行的修复方式：

方式一：使用OutlinedButton.styleFrom替代TextButton.styleFrom

确保样式配置与组件类型匹配，让padding属性能正确应用到垂直方向：

OutlinedButton(
  style: OutlinedButton.styleFrom(
    minimumSize: Size.zero,
    padding: const EdgeInsets.all(10),
    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
    side: const BorderSide(color: Colors.blue),
  ),
  onPressed: () {
    debugPrint('Received click');
  },
  child: const SizedBox(height: 20, width: 20),
)

方式二：给子组件嵌套Padding

放弃依赖按钮自身的padding属性，直接在子组件外层添加Padding，确保内边距完全生效：

OutlinedButton(
  style: OutlinedButton.styleFrom(
    minimumSize: Size.zero,
    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
    side: const BorderSide(color: Colors.blue),
  ),
  onPressed: () {
    debugPrint('Received click');
  },
  child: const Padding(
    padding: EdgeInsets.all(10),
    child: SizedBox(height: 20, width: 20),
  ),
)

验证结果 #

修改后，按钮的宽高都会变为20 + 10*2 = 40，与预期一致。

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