[Solved] flutter circle checkbox with text inside


Asked by Nick H on December 29, 2021 (source).

How can I create round checkboxes with text inside ? I want it like on the picture.

enter image description here


Question answered by Apb (source).

You can make a button that on pressed toggles a bool and based on if bool is true or false you can make the border be transparent or not. This may not be the best solution but it should work

class CustomCheckbox extends StatefulWidget {
  State<CustomCheckbox> createState() => _CustomCheckboxState();

class _CustomCheckboxState extends State<CustomCheckbox> {
  bool isChecked = false;

  Widget build(BuildContext context) {
    return RawMaterialButton(
      onPressed: () {
        setState(() => isChecked = !isChecked);
      splashColor: Colors.transparent,
      child: Text(
        style: TextStyle(
           color: isChecked ? Colors.white : Colors.grey,
           fontSize: 20
      padding: EdgeInsets.all(13.0),
      shape: CircleBorder(
        side: BorderSide(
           color: isChecked ? Colors.yellowAccent : Colors.transparent