Flutter中如何将TextButton尺寸缩小至其子组件大小

要让TextButton贴合内部Container的大小，核心是去掉TextButton默认的内边距和最小尺寸限制，直接修改它的style属性即可，以下是修改后的完整代码：

TextButton(
  onPressed: () => Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => const LoginModal(),
    ),
  ),
  // 关键配置：清除按钮默认的尺寸限制
  style: TextButton.styleFrom(
    padding: EdgeInsets.zero, // 移除按钮自带的左右内边距
    minimumSize: Size.zero, // 取消按钮的最小宽高限制
    tapTargetSize: MaterialTapTargetSize.shrinkWrap, // 点击区域收缩到组件实际大小
  ),
  child: Container(
    padding: const EdgeInsets.only(bottom: 0.5),
    decoration: const BoxDecoration(
      border: Border(
        bottom: BorderSide(
          color: cprimary,
          width: 1,
        ),
      ),
    ),
    child: const Text(
      'قوانین و مقررات',
      style: TextStyle(
          color: cprimary,
          fontSize: 12,
          fontWeight: FontWeight.w500),
    ),
  ),
),

关键属性说明 #

• padding: EdgeInsets.zero：TextButton默认自带左右内边距，设置为零可直接消除多余空白
• minimumSize: Size.zero：默认按钮有固定的最小宽高限制，取消后按钮会完全跟随子组件的尺寸变化
• tapTargetSize: MaterialTapTargetSize.shrinkWrap：Material设计规范默认会给按钮扩大点击区域，若不需要额外点击范围，用这个属性让点击区域贴合组件实际大小

之前尝试的Expanded会让按钮强制拉伸，SizedBox若未配合style里的最小尺寸限制，会被按钮的默认规则覆盖，所以直接修改上述style属性是最直接的解决方式。

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