You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter 2 如何去除ElevatedButton/TextButton的额外外边距

要去除Flutter 2中ElevatedButton、TextButton这类Material风格按钮自带的默认外部留白,只需要给按钮配置style参数,调整3个核心属性即可:

  • 将padding设置为你需要的内边距,无内边距需求可直接设为EdgeInsets.zero
  • 将materialTapTargetSize设置为MaterialTapTargetSize.shrinkWrap,去除按钮默认为扩大点击区域新增的外部留白
  • 可选配置:如果需要按钮完全贴合内容大小,可将minimumSize设为Size.zero,取消按钮默认的最小宽高限制

修改后的示例代码如下:

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    ElevatedButton(
        onPressed: () {},
        style: ButtonStyle(
          padding: MaterialStateProperty.all(EdgeInsets.zero),
          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
          minimumSize: MaterialStateProperty.all(Size.zero),
        ),
        child: Text('Login')
    ),
    TextButton(
        onPressed: () {},
        style: ButtonStyle(
          padding: MaterialStateProperty.all(EdgeInsets.zero),
          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
          minimumSize: MaterialStateProperty.all(Size.zero),
        ),
        child: Text('Login')
    ),
  ],
)

如果需要全局生效无需逐个按钮配置,可以在项目根MaterialApp的theme属性中,统一配置elevatedButtonTheme和textButtonTheme的默认样式即可。

内容的提问来源于stack exchange,提问作者Da2ny

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.06 08:06:02