checkbox - 如何在 Flutter 中创建一个圆形的 CheckBox？或者改变CheckBox的样式，比如在Flutter中选中图片？

Question

我想创建一个像这样的圆形 CheckBox

我已经尝试了多种变体，但似乎都不起作用。包括我尝试使用 ClipRRect 。

由于代码比较多，这里只选取一部分展示

new Row(
      children: <Widget>[
        //new ClipRRect(
        // borderRadius: BorderRadius.all(Radius.circular(90.0)),
        //  child:
          new Checkbox(
              tristate: true,
              value: true,
              onChanged: (bool newValue){
                setState(() {

                });
              },
            activeColor: Color(0xff06bbfb),
          ),
       // ),

        new Expanded(
            child: new Text('将此手机号码和QQ号绑定，提高账号安全性。',
              style: new TextStyle(
                  color: Color(0xff797979)
              ),
            )
        ),

      ],
    ),

我是 Flutter 的新手。在此先致谢。

Answer 1

Material Design 复选框有一个 shape 属性，您可以为它设置 CircleBorder() 并且它会是圆的。

Checkbox(
      checkColor: Colors.white,
      fillColor: MaterialStateProperty.resolveWith(getColor),
      value: isChecked,
      shape: CircleBorder(),
      onChanged: (bool? value) {
        setState(() {
          isChecked = value!;
        });
      },
    );