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

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,
                  ),
          ),
        ),
      )),
    );
  }

Copy the code of the Material Checkbox and create your new Checkbox widget.

In this widget change the variable const Radius _kEdgeRadius = Radius.circular(1.0) to Radius.circular(100).

enter image description here


There is a simple package you can add that keeps the functionality and animation of the checkbox: https://pub.dev/packages/circular_check_box

Implementation after installing and importing package:

CircularCheckBox(
          value: someBooleanValue,
          materialTapTargetSize: MaterialTapTargetSize.padded,
          onChanged: (bool x) {
          someBooleanValue = !someBooleanValue;
          }
        ),