How to make checkbox ListTile with rounded box using Getx in Flutter

Question

I am relatively new to Flutter development and I want to implement checkbox as shown in the screenshot attached using GetX flutter. Also I want the borders of my check-boxes to be round.

screenshot

Answer 1

You can make a CheckBox round by using the shape field and the CircleBorder class or RoundedRectangleBorder (if you want them to have rounded corners):

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

Result:

Or:

Checkbox(
      checkColor: Colors.white,
      value: isChecked,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(5.0))),
      onChanged: (bool? value) {
        setState(() {
          isChecked = value!;
        });
      },
    );

Result:

To use GetX I think you should provide some code or example to explain what do you mean and what you want to exactly achieve, otherwise the best advice is probably to read the documentation and check some example .

Answer 2

As you've mentioned in the screenshot. You can achieve it with GetX as following:

Create a variable for keep tracking the checked value

final Rxn<int> selected = Rxn<int>();

Now you have to implement the UI with Obx widget to listen for the changes of observing variable ' selected '

 Obx( () => Column( children: [ CheckboxListTile( title: const Text('This is the title 1'), subtitle: const Text('This is the subtitle with ID 1'), checkColor: Colors.white, activeColor: Colors.blueGrey, controlAffinity: ListTileControlAffinity.leading, checkboxShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)), value: selected.value == 1, onChanged: (val) { val?? true? selected.value = 1: selected.value = null; }, ), CheckboxListTile( title: const Text('This is the title 2'), subtitle: const Text('This is the subtitle with ID 2'), checkColor: Colors.white, activeColor: Colors.blueGrey, controlAffinity: ListTileControlAffinity.leading, checkboxShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)), value: selected.value == 2, onChanged: (val) { val?? true? selected.value = 2: selected.value = null; }, ), ], ), ))

The following will be the output: