How to make only one checkbox to be checked at time in Flutter without using package

Question

I am having 2 rounded checkboxes. How can i make only one checkbox to be check at time without using package. I will be appreciate if you could help me.

CODE :-

  Checkbox(
    value: prepaidCheckBoxValue,
    shape: const CircleBorder(),
    checkColor: Colors.white,
    onChanged: (value) {
      prepaidCheckBoxValue = !prepaidCheckBoxValue;
      //print(prepaidCheckBoxValue);
      setState(() {
        selectedPaymentType = 'Prepaid';
      });
    },
  ),
  const Text(
    'Prepaid',
    style: TextStyle(
      fontSize: 20.0,
    ),
  ),
  Checkbox(
    value: podCheckBoxValue,
    shape: const CircleBorder(),
    checkColor: Colors.white,
    onChanged: (value) {
      podCheckBoxValue = !podCheckBoxValue;
      setState(() {
        selectedPaymentType = 'Pay on delivery';
      });
      //print(value);
    },
  ),
  const Text(
    'Pay on Delivery',
    style: TextStyle(
      fontSize: 20.0,
    ),
  ),

one way what you can do is create two bool var for your checkbox with false value for your two checkbox and change the respective bool to true onSelection of any of the checkbox and return that value for the same... this might not be the perfect solution for this but it should work if you manage to tweak around this — Mithson, Oct 05 '21 at 17:15

Apb · Answer 1 · 2021-10-05T17:43:14.123

Instead of a Checkbox you can use a RadioButton which is meant to do that

Like this

class MyRadioButton extends StatefulWidget {
  @override
  State<MyRadioButton> createState() => _MyRadioButtonState();
}

class _MyRadioButtonState extends State<MyRadioButton> {

  var val;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Radio(
          value: 1,
          groupValue: val,
          onChanged: (value) {
            setState(() {
              val = value;
            });
          },
        ),
        const Text(
          'Prepaid',
          style: TextStyle(
            fontSize: 20.0,
          ),
        ),
        Radio(
          value: 2,
          groupValue: val,
          onChanged: (value) {
            setState(() {
              val = value;
            });
          },
        ),
        const Text(
          'Pay on Delivery',
          style: TextStyle(
            fontSize: 20.0,
          ),
        ),
      ],
    );
  }
}

How to make only one checkbox to be checked at time in Flutter without using package

1 Answers1