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

Posted 2023-02-23

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

【英文标题】：How to change checkbox border-color in flutter? By default, it is showing black but I want it in grey

【发布时间】：2020-04-26 07:32:54

【问题描述】：

。

【问题讨论】：

unselectedWidget 的默认颜色始终为灰色。不过，您可以更喜欢下面给出的解决方案来更改颜色。

【参考方案1】：

就这样：

        Checkbox(
          side: const BorderSide(
            // set border color here
            color: Colors.red,
          ),
          value: isChecked,
          onChanged: (bool? value) ,
        ),

【参考方案2】：

使用这个：

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

【参考方案3】：

您也可以简单地设置 Checkbox 的 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,
      ),
    ),

【参考方案4】：

Checkbox(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(3),
      ),
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      value: true,
      onChanged: (newValue) ,

      /// Set your color here
      fillColor: MaterialStateProperty.all(Colors.grey),
    )

【参考方案5】：

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

将以下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 的ThemeData 添加颜色，那么您可以用Theme 小部件包装您的CheckBox 小部件，以下是供您参考的代码：

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

希望对大家有帮助，如有疑问请留言。 如果这个答案对你有帮助，那么请接受并投票赞成这个答案。

【讨论】：

太棒了！我们还可以选择在选中复选框时更改复选框的边框吗？我想要这样 -> 例如：勾选颜色为绿色，复选框边框颜色为绿色，复选框背景为白色。

我们如何将复选框宽度更改为 1 像素？谢谢。

【参考方案6】：

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

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

【讨论】：

我们如何将复选框宽度更改为 1 像素？谢谢。