How to create a round CheckBox in Flutter ? Or change the CheckBox's style , such as selected image in Flutter?

Question

I want to create a round CheckBox like this

I've tried multiple variations of this, but none of them seem to work. Including I tried to use ClipRRect .

Because there are more code, I only select part of it to show here.

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)               ),             )         ),        ],     ), 

I am new to Flutter.Thanks in advance.

Answer 1

The Material Design checkbox has a shape property and you can set CircleBorder() to it and it will be round.

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

Answer 2

You can try & play with this Code: 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,                   ),           ),         ),       )),     );   }