Flutter Checkbox - 如何在未选中状态下设置颜色

Question

在 Flutter 中，复选框看起来是透明的，处于其自然的未选中状态。我想知道在这种状态下如何设置方框的颜色。

这里有很多类似的问题，但他们都要求更改活动颜色，或刻度线的颜色。我已经尝试了所有可用的属性，但其中 none 似乎会影响未选中的状态（甚至不影响 fillColor）。我的目标是创建一个显示在非白色背景上的纯白色复选框（带圆角的正方形）。

child: Checkbox(
  checkColor: Colors.red,
  activeColor: Colors.white,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
  onChanged: (value) {},
),

Answer 1

已对源代码进行绘制。我们可以通过用 Container 包装 Checkbox 并提供 decoration 来欺骗 UI 我们还需要更改 Checkbox.

上的一些属性

child: Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8),
  ),
  child: Checkbox(
    value: _isChecked,
    hoverColor: Colors.transparent,
    fillColor: MaterialStateProperty.all<Color>(Colors.white),
    checkColor: Colors.red,
    activeColor: Colors.white,
    shape:
        RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
    onChanged: (value) {
      setState(() {
        _isChecked = !_isChecked;
      });
    },
  ),
),

为了改进padding-space，我们可以使用Transform.scale并从Container控制大小。但是对于太小的（~12）个案例，它可能会造成一些 UI 麻烦。

 Container(
  width: 24,
  height: 24,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8),
  ),
  child: Transform.scale(
    scale: 1.2,
    child: Checkbox(...

Flutter Checkbox - 如何在未选中状态下设置颜色

Flutter Checkbox - how to set colour in unchecked state

flutter

flutter-layout