如何在颤动中更改复选框边框颜色？默认情况下，它显示为黑色，但我希望它显示为灰色

Question

如何在颤动中更改复选框边框颜色？默认情况下，它显示为黑色，但我希望它显示为灰色。

Answer 1

用这个：

Checkbox(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(2.0),
  ),
  side: MaterialStateBorderSide.resolveWith(
      (states) => BorderSide(width: 1.0, color: Colors.red),
  ),
),

Answer 2

CheckBox 的边框颜色来自unselectedWidgetColor您的ThemeData.

将以下内容添加ThemeData到您的MaterialApp

MaterialApp(
  title: 'Flutter Demo',
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    primarySwatch: Colors.blue,
    unselectedWidgetColor: Colors.red, // <-- your color
  ),
  home: MyHomePage(title: 'Flutter Demo Home Page'),
);

如果您不想为MaterialApp's添加颜色，ThemeData则可以CheckBox使用Theme小部件包装小部件，以下是供您参考的代码：

Theme(
    child: Checkbox(
      value: false,
      onChanged: (_) {},
    ),
    data: ThemeData(
      primarySwatch: Colors.blue,
      unselectedWidgetColor: Colors.red, // Your color
    ),
  ),

我希望这会有所帮助，如有任何疑问，请发表评论。如果这个答案对你有帮助，那么请接受并投票这个答案。

Answer 3

您还可以简单地设置side复选框的属性：

Checkbox(
      value: true,
      onChanged: (_) {},
      // Background color of your checkbox if selected
      activeColor: Colors.deepOrange,
      // Color of your check mark
      checkColor: Colors.black,
      shape: hasCircleShape
      // diplay checkbox with circle shape
          ? CircleBorder()
      // or make the border slightly rounded
          : RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(5),
            ),
      side: BorderSide(
        // ======> CHANGE THE BORDER COLOR HERE <====== 
        color: Colors.grey,
        // Give your checkbox border a custom width
        width: 1.5,
      ),
    ),

Answer 4

在 BorderSide \xe2\xac\x87\xef\xb8\x8f 中设置颜色

\n

Checkbox(\n    value: _value,\n    onChanged: (_){},\n    // YOUR COLOR HERE\n    side: BorderSide(color: Colors.green)),\n

\n

Answer 5

您可以使用Theme更改未选择的小部件颜色，如下所示

Theme(
  data: ThemeData(unselectedWidgetColor: Colors.blue),
  child: Checkbox(
   ... 
   )
 )

Answer 6

此代码将有助于 onChanged 函数中的边框颜色更改。

Checkbox(
                    fillColor: MaterialStateProperty.all(Colors.transparent),
                    side: MaterialStateBorderSide.resolveWith((states) {
                      if(states.contains(MaterialState.pressed)){
                        return BorderSide(color: loginfontcolor);
                      }
                      else{
                        return BorderSide(color: loginfontcolor);
                      }
                    }),
                    checkColor: loginfontcolor,
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
                    value: snapshot.tapval, onChanged: (val){
                      snapshot.changval= val!;
                    },
                    
                    )