Flutter中TextButton存在白色内边距如何去除？

你看到的绿色容器周围的白色区域，本质是TextButton自带的默认内边距加上主题里给TextButton设置的白色背景色共同导致的——你的绿色Container是按钮的子组件，按钮自身的白色背景和padding就露在了容器外面。

下面给你几种快速解决的方法：

方法一：单独修改当前TextButton的样式 #

直接在TextButton里覆盖默认的padding和背景色，让按钮本身透明且无内边距：

TextButton(
  onPressed: () {},
  style: ButtonStyle(
    // 去掉按钮默认的内边距
    padding: const MaterialStatePropertyAll(EdgeInsets.zero),
    // 将按钮背景设为透明，避免白色透出
    backgroundColor: const MaterialStatePropertyAll(Colors.transparent),
  ),
  child: Container(
    color: Colors.green,
    height: 51,
    width: 113,
    child: const Center(
      child: Text('Sign Up!'),
    ),
  ),
)

方法二：全局修改主题中的TextButton配置 #

如果不想每个TextButton都单独设置，可以直接修改主题里的TextButtonThemeData，一次性解决所有TextButton的类似问题：

static var darkModeAppTheme = ThemeData.dark().copyWith(
  scaffoldBackgroundColor: backgroundColor,
  cardColor: greyColor,
  textButtonTheme: const TextButtonThemeData(
    style: ButtonStyle(
      // 全局去掉TextButton的默认内边距
      padding: MaterialStatePropertyAll(EdgeInsets.zero),
      // 全局将TextButton背景设为透明
      backgroundColor: MaterialStatePropertyAll(Colors.transparent),
      foregroundColor: MaterialStatePropertyAll(blackColor),
    ),
  ),
  inputDecorationTheme: const InputDecorationTheme(
    fillColor: Colors.green,
    filled: true,
  ),
);

方法三：用styleFrom简化写法 #

Flutter提供了TextButton.styleFrom这个便捷方法，能更简洁地设置样式：

TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
    padding: EdgeInsets.zero,
    backgroundColor: Colors.transparent,
  ),
  child: Container(
    color: Colors.green,
    height: 51,
    width: 113,
    child: const Center(
      child: Text('Sign Up!'),
    ),
  ),
)

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