Flutter Checkbox边框颜色修改无效，求替代解决方法

你当前代码里shape属性中的BorderSide未生效，大概率是Checkbox的默认主题样式覆盖了该设置。以下是几种可靠的修改方式：

方法1：使用CheckboxTheme局部配置 #

通过CheckboxTheme包裹Checkbox，统一设置未选中状态的边框、选中状态的填充色等样式：

CheckboxTheme(
  data: CheckboxThemeData(
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
    side: const BorderSide(color: Colors.blue, width: 1.1), // 未选中时的边框样式
    checkColor: Colors.white, // 选中时对勾的颜色
    fillColor: MaterialStateProperty.all(Colors.green), // 选中时的填充背景色
  ),
  child: Checkbox(
    value: _isChecked,
    onChanged: (bool? value) {
      setState(() {
        _isChecked = value!;
      });
    },
  ),
)

方法2：通过Theme组件局部覆盖主题 #

利用Theme的data属性，直接修改全局主题中与Checkbox相关的颜色配置：

Theme(
  data: Theme.of(context).copyWith(
    unselectedWidgetColor: Colors.blue, // 未选中时的边框颜色
    checkboxTheme: CheckboxThemeData(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
    ),
  ),
  child: Checkbox(
    value: _isChecked,
    onChanged: (bool? value) {
      setState(() {
        _isChecked = value!;
      });
    },
  ),
)

方法3：完全自定义Checkbox样式 #

如果需要极致个性化的样式，可以通过组合基础Widget实现自定义Checkbox：

GestureDetector(
  onTap: () {
    setState(() {
      _isChecked = !_isChecked;
    });
  },
  child: Container(
    width: 20,
    height: 20,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(5),
      border: Border.all(
        color: _isChecked ? Colors.green : Colors.blue,
        width: 1.1,
      ),
      color: _isChecked ? Colors.green : Colors.transparent,
    ),
    child: _isChecked
        ? const Icon(Icons.check, size: 16, color: Colors.white)
        : null,
  ),
)

方法4：搭配CheckboxListTile使用（带文字场景） #

如果Checkbox需要和文字搭配展示，可使用CheckboxListTile并配合CheckboxTheme设置样式：

CheckboxTheme(
  data: CheckboxThemeData(
    side: const BorderSide(color: Colors.blue, width: 1.1),
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
  ),
  child: CheckboxListTile(
    title: const Text("选项内容"),
    value: _isChecked,
    onChanged: (bool? value) {
      setState(() {
        _isChecked = value!;
      });
    },
    controlAffinity: ListTileControlAffinity.leading, // 设置Checkbox在文字左侧
  ),
)

内容的提问来源于stack exchange，提问作者Muhammed Ajmal