如何在Flutter中创建圆形CheckBox？还是更改CheckBox的样式，例如Flutter中的选定图像？

小编典典

如何在Flutter中创建圆形CheckBox？还是更改CheckBox的样式，例如Flutter中的选定图像？

flutter

我想像这样创建一个圆形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的新手，谢谢。

阅读 1667

2020-08-13

共1个答案

小编典典

您可以尝试使用以下代码： Round CheckBox

 bool _value = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Circle CheckBox"),
      ),
      body: Center(
          child: InkWell(
        onTap: () {
          setState(() {
            _value = !_value;
          });
        },
        child: Container(
          decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: _value
                ? Icon(
                    Icons.check,
                    size: 30.0,
                    color: Colors.white,
                  )
                : Icon(
                    Icons.check_box_outline_blank,
                    size: 30.0,
                    color: Colors.blue,
                  ),
          ),
        ),
      )),
    );
  }

2020-08-13