如何设置Flutter Checkbox背景色并去除默认内边距？

Checkbox组件自带默认的点击目标区域内边距，直接用ColoredBox包裹会出现多余空白，以下是几种可行的解决方法：

方法1：通过Theme自定义Checkbox参数 #

利用Theme组件覆盖Checkbox的默认布局参数，最大限度压缩内边距，再配合ColoredBox设置背景：

Theme(
  data: ThemeData(
    checkboxTheme: CheckboxThemeData(
      // 极端压缩水平/垂直方向的间距
      visualDensity: const VisualDensity(horizontal: -4, vertical: -4),
      // 缩小点击目标到组件本身尺寸
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    ),
  ),
  child: ColoredBox(
    color: Colors.grey[200]!,
    child: const Checkbox(
      value: true,
      onChanged: null,
      fillColor: MaterialStatePropertyAll(Colors.blue),
    ),
  ),
)

方法2：Transform缩放+Container控制尺寸 #

通过Transform.scale缩小Checkbox本身，再用Container固定尺寸并设置背景，完全规避默认内边距：

Container(
  width: 24,
  height: 24,
  color: Colors.grey[200],
  child: Transform.scale(
    scale: 0.8, // 根据需求调整缩放比例
    child: const Checkbox(
      value: true,
      onChanged: null,
      fillColor: MaterialStatePropertyAll(Colors.blue),
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    ),
  ),
)

方法3：负Padding抵消默认内边距 #

直接给Checkbox添加负Padding，强制消除自带的内边距，适合快速解决场景：

ColoredBox(
  color: Colors.grey[200]!,
  child: const Padding(
    padding: EdgeInsets.all(-4), // 负值抵消默认内边距
    child: Checkbox(
      value: true,
      onChanged: null,
      fillColor: MaterialStatePropertyAll(Colors.blue),
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    ),
  ),
)

注意事项 #

• visualDensity的取值范围为-4到4，数值越小，组件占用的额外空间越少
• MaterialTapTargetSize.shrinkWrap会移除默认的扩展点击区域，若需要保留较大点击范围，可在外层嵌套InkWell
• 自定义缩放时，需确保Checkbox的点击区域符合交互需求

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