Question

我需要在Flutter中更改复选框的选中标记颜色，并且没有给出用于更改Checkbox颜色的参数。

Checkbox(
   value: isCheck,
   activeColor: Colors.grey,
   onChanged: (bool value) {
   setState(() { isCheck = value;});
       })

飞镖类代码

  const Checkbox({
    Key key,
    @required this.value,
    this.tristate = false,
    @required this.onChanged,
    this.activeColor,
    this.materialTapTargetSize,
  }) : assert(tristate != null),
       assert(tristate || value != null),
       super(key: key);

Answer 1

现在我正在使用-

Flutter（Channel dev，v1.2.2，）

稳定频道上没有用于更改选中标记颜色的选项。

Checkbox(
          value: isCheck,
          checkColor: Colors.yellowAccent,  // color of tick Mark
          activeColor: Colors.grey,
          onChanged: (bool value) {
            setState(() {
              isCheck = value;
            });
          }),

Answer 2

要更改复选框的颜色，请执行以下操作：

无效（边框颜色）时：

Theme(
      data: Theme.of(context).copyWith(
        unselectedWidgetColor: Colors.white,
      ),
      child: Checkbox(...),
    )

选中（图标颜色）：

Checkbox(
        checkColor: Colors.red,
        ...
      )

激活（选中）时：

Checkbox(
        activeColor: Colors.amberAccent,
        ...
      )

完整代码示例：

Theme(
      data: Theme.of(context).copyWith(
        unselectedWidgetColor: Colors.white,
      ),
      child: Checkbox(
        checkColor: Colors.red,
        activeColor: Colors.amberAccent,
        value: _terms,
        onChanged: (bool value) {
          setState(() {
            _terms = value;
          });
        },
      ),
    )

Answer 3

您可以使用func pinDropped() { DispatchQueue.main.async { let pin = CustomPin(self.lastOrigin, "pin") self.mapView.addAnnotation(pin) } self.saveButton.alpha = 1 pinImage.alpha = 0 }的bool变量来更改它，例如：

isCheck

Answer 4

如果不想在每个复选框中都设置它，请使用此功能：


new ThemeData.dark().copyWith(
  unselectedWidgetColor: Colors.orange.shade800,
  toggleableActiveColor: Colors.orange.shade800,

Answer 5

我的自定义复选框解决方案

自定义：

大小
边界半径
背景
无国界

class AppCheckbox extends StatelessWidget {
  final bool value;
  final bool disabled;
  final double size;
  final ValueChanged<bool> onChanged;

  const AppCheckbox({
    Key key,
    this.size = 24,
    this.value = false,
    this.disabled = false,
    this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final backColor = disabled ? AppColors.white8 : AppColors.white24;
    final checkColor = disabled ? AppColors.white56 : Colors.white;

    return Theme(
      data: Theme.of(context).copyWith(
        disabledColor: Colors.transparent,
        unselectedWidgetColor: Colors.transparent,
      ),
      child: SizedBox(
        width: size,
        height: size,
        child: Container(
          decoration: BoxDecoration(
            color: backColor,
            borderRadius: BorderRadius.circular(4),
          ),
          clipBehavior: Clip.hardEdge,
          child: Transform.scale(
            scale: size / Checkbox.width,
            child: Checkbox(
              hoverColor: Colors.transparent,
              focusColor: Colors.transparent,
              activeColor: Colors.transparent,
              checkColor: checkColor,
              value: value,
              onChanged: disabled
                  ? null
                  : (value) {
                      onChanged(value);
                    },
            ),
          ),
        ),
      ),
    );
  }
}

在Flutter中更改复选框的选中标记颜色

5 个答案: