如何在颤动/飞镖中更改复选框的边框颜色答案

【问题标题】：How to change border color of checkbox in flutter / dart如何在颤动/飞镖中更改复选框的边框颜色
【发布时间】：2020-04-10 17:12:56
【问题描述】：

我在 Flutter 应用程序的 UI 中添加了一个复选框，我可以看到复选框颜色或活动颜色属性，但找不到任何更改复选框边框颜色的选项，通常为黑色。

更改边框颜色的规定或调整是什么？

【问题讨论】：

AFAIK,Container 有边框属性。
试过了，但我需要根据复选框的大小调整容器，我觉得它不优雅

标签： flutter dart

【解决方案1】：

这里是你可以改变文本框轮廓颜色的方法

Checkbox(value: isChecked, onChanged: (val){
                      if(val != null) {
                        isChecked = val;
                        setState(() {
                        });
                      }
                    },checkColor: theme.primaryColor,
                    activeColor: theme.whiteColor,
                    hoverColor: theme.whiteColor,
                    side: BorderSide(
                      color: whiteColor, //your desire colour here
                      width: 1.5,
                    ),
                  ),

【讨论】：

【解决方案2】：

 Transform.scale( //For Increasing or decreasing Sizes 
                  scale: 1.3,
                  child: Theme( // For Color Change, 
                    data: ThemeData(unselectedWidgetColor: AppColors.checkBoxBorderColor),
                    child: Checkbox(
                      value: true,
                      shape: RoundedRectangleBorder( // Making around shape
                          borderRadius: BorderRadius.circular(2)),
                      onChanged: (isCheck) {},
                      activeColor: AppColors.checkBoxActiveColor,
                    ),
                  ),
                ),

【讨论】：

【解决方案3】：

使用side 很简单。

前 - side: BorderSide(color: Colors.red),

【讨论】：

【解决方案4】：

您可以使用 Side 属性...

边：BorderSide（颜色：颜色（0xff585858）），

【讨论】：

最简单的答案，谢谢！ side 属性优先于 ThemeData 和 CheckboxThemeData。

【解决方案5】：

如果您想为您的复选框定义应用范围的主题，您可以这样做：

MaterialApp(
   ...
  theme:ThemeData(
    checkboxTheme: CheckboxThemeData(
      fillColor: MaterialStateColor.resolveWith(
        (states) {
          if (states.contains(MaterialState.selected)) {
           return Colors.purple // the color when checkbox is selected;
            }
         return Colors.white //the color when checkbox is unselected;
         },
    ),
   ),
  ),
 )

为您的应用定义应用范围的主题是一种很好的做法，以避免代码重复并确保一致性，它还可以提供更好的维护。享受编码:)

【讨论】：

【解决方案6】：

Checkbox(value: false, tristate: false, onChanged: () {});
　　↓
Theme(
data: ThemeData(unselectedWidgetColor: Colors.red),
child: Checkbox(value: false, tristate: false, onChanged: (bool value) {}));

No onChanged, then the border will be grey(disabled).

【讨论】：

很高兴，我能帮上忙！
需要说明的是，Checkbox需要onChanged参数，否则使用非活动颜色，ThemeData不会带来任何变化

【解决方案7】：

你可以这样做：

        Container(
            decoration: const BoxDecoration(
              border: Border(
                top: BorderSide(width: 3.0, color: Colors.red),
                left: BorderSide(width: 3.0, color: Colors.red),
                right: BorderSide(width: 3.0, color: Colors.red),
                bottom: BorderSide(width: 3.0, color: Colors.red),
              ),
            ),
            child: Checkbox(value: false, onChanged: null),
            width: 20,
            height: 20),

BoxDecoration 类包含 border 属性，可让您自定义边框边，然后您可以添加 Checkbox 并将容器的宽度和高度与复选框匹配

【讨论】：

ThemeData 是一种更有效的边框设置方式。