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

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

您可以使用主题在应用程序中全局更改复选框颜色：

MaterialApp(
  theme: ThemeData(
    checkboxTheme: CheckboxThemeData(
      checkColor: MaterialStateProperty.all(Colors.white),
      fillColor: MaterialStateProperty.all(Colors.orange),
    )
  )
);

Answer 2

如果您不想在每个复选框中设置它，请使用以下命令：

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

Answer 3

更改复选框的颜色：

无效时（边框颜色）：

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 4

如果你只想修改一个CheckBox颜色，你不会喜欢使用Theme. 所有其他解决方案不会向您展示如何修改 inactive 的颜色CheckBox。非活动复选框只是一个BorderSide，因此：

Checkbox(
  checkColor: Colors.white,
  activeColor: Colors.green,
  side:
      BorderSide(width: 2, color: Colors.green),
  value: _accepted,
  onChanged: (value) {
    setState(() {
      _accepted = value;
    });
  },
),

这将为您提供一个CheckBox带有白色复选箭头的绿色：

Answer 5

现在我正在使用-

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;
            });
          }),