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

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: