在颤动中激活/选中复选框后如何保持边框答案

【问题标题】：How to keep the border after the checkbox is active/selected in flutter在颤动中激活/选中复选框后如何保持边框
【发布时间】：2021-02-25 07:13:22
【问题描述】：

所以我现在拥有的是，选中时无边框复选框

我想要实现的是，选中时有边框的复选框

这是我拥有的复选框的代码：

Checkbox(
          value: _isChecked,
          onChanged: (bool value) {
            setState(() {
              _isChecked = value;
            });
           },
          checkColor: Colors.pinkAccent,
          activeColor: Colors.transparent,
        ),
Text("Remember me")

【问题讨论】：

标签： flutter dart

【解决方案1】：

您可以将其包装在容器中并为其设置边框
How to add a border to a widget in Flutter?
然后你可以使用主题(unselectedwidgetcolor:)来改变复选框的默认边框
change checkbox border-color in flutter
然后根据这些问题，我们可以同时使用两者来实现我们想要的

bool _isChecked = false;

然后我们可以定义我们的复选框，如果 isChecked 等于 true ，颜色将是粉红色，如果不通过 ternary if 将其更改为白色

  Container(
            decoration: BoxDecoration(
              border: Border.all(
                  color: _isChecked == true ? Colors.pinkAccent: Colors.black,
                  width: 2.3),
            ),
            width: 24,
            height: 24,
            child: Theme(
              data: ThemeData(unselectedWidgetColor: Colors.white),
              child: Checkbox(
                checkColor: Colors.pinkAccent,
                activeColor: Colors.transparent,
                value: _isChecked,
                tristate: false,
                onChanged: (bool isChecked) {
                  setState(() {
                    _isChecked = isChecked;
                  });
                },
              ),
            ),
          ),

使用上面的代码你会得到类似这样的东西

您还可以将粉红色边框更改为您想要的任何内容

【讨论】：

【解决方案2】：

如果您想使用Theme 执行此操作，您可以像这样覆盖它：

runApp(MaterialApp(
  theme: ThemeData(
    checkboxTheme: CheckboxThemeData(
      checkColor: MaterialStateProperty.resolveWith((_) => Colors.black),
      fillColor: MaterialStateProperty.resolveWith((_) => Colors.transparent),
      side: AlwaysActiveBorderSide(),
    ),
  ),
));

class AlwaysActiveBorderSide extends MaterialStateBorderSide {
  @override
  BorderSide? resolve(_) => const BorderSide(color: Colors.black54);
}

【讨论】：