如何更改flutter / dart中复选框的边框颜色

Question

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

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

Answer 1

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).

Answer 2

您可以使用

side

属性来做到这一点...

side: BorderSide(color: Color(0xff585858)),

Answer 3

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

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

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

Answer 4

你可以这样做：

        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

并将容器的宽度和高度与复选框相匹配

Answer 5

以下是更改文本框轮廓颜色的方法

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

Answer 6

使用

side

很简单。

前 -

side: BorderSide(color: Colors.red),

Answer 7

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

Answer 8

主题（ 数据：主题数据（ checkboxTheme:const CheckboxThemeData(side: BorderSide(color: Colors.red)), ), 子项：复选框（ activeColor：常量颜色（0xFF0D4A64），

                    value:checkBox , onChanged: (newValue) {
                    setState(() {
                    checkBox = newValue!;
                    });
                  },),
                ),