Flutter开发：如何移除TextButton组件的内边距？

要彻底移除TextButton的内部间距，你可以通过配置ButtonStyle的两个核心属性来实现，以下是完整的实现代码：

TextButton(
  style: ButtonStyle(
    // 清除按钮默认内边距
    padding: MaterialStateProperty.all<EdgeInsetsGeometry>(EdgeInsets.zero),
    // 让点击区域收缩到按钮实际尺寸，移除额外点击范围
    tapTargetSize: MaterialTapTargetSize.shrinkWrap
  ),
  onPressed: () {},
  child: Container(
    width: 50,
    height: 50,
    decoration: BoxDecoration(
      color: const Color(0xffF6F6F7),
      borderRadius: BorderRadius.circular(50)
    ),
    child: const Padding(
      padding: EdgeInsets.all(12.0),
      child: Icon(CupertinoIcons.search),
    )
  ),
)

关键说明 #

• padding: EdgeInsets.zero：直接覆盖TextButton默认的内边距配置，清除内部留白
• tapTargetSize: MaterialTapTargetSize.shrinkWrap：默认情况下Flutter会为按钮提供最小48x48的点击区域，这个属性会让点击区域贴合按钮实际大小，避免额外的间距影响布局

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