How to solve: flutter uncheck a checkbox from checkboxList using ontap from a list of checked items


Asked by Techwithyo on December 27, 2021 (source).

enter image description hereI have a list of checkboxes in CheckboxListTile widget, then i map through the list and add the true value to a set named _saved, as shown bellow

        shrinkWrap: true,
        physics: ScrollPhysics(),
        children:<Widget>((entry) {
          return new CheckboxListTile(
            title: new Text(entry.key),
            value: entry.value,
            checkColor: Colors.white,
            onChanged: (bool? value) {
              setState(() {
                interestList[entry.key] = value!;
                if (value == true) {
                } else {
                      ? _saved.remove(entry.key)
                      : debugPrint("ok");

then i rendered the true items in a wrap widget by mapping through the _saved as shown bellow. so i want to add an onTap to the rendered item, so that when i tap on this item it uncheck it from the CkeckboxList

        children: _saved
              (item) => FittedBox(
                fit: BoxFit.fill,
                child: Container(
                    margin: const EdgeInsets.all(8.0),
                    padding: const EdgeInsets.all(5.0),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(6.0)),
                        border: Border.all(color: Colors.grey)),
                    child: Center(
                        child: GestureDetector(
                            onTap: () {
                              // _removeInterest(item);
                            child: Text(item + "  " + "x")))),

bellow is the interest list

Map<String, bool> interestList= {
    'Bubble Football ⚽': false,
    'Futsal 🧿': false,
    'Beach Volleyball 🏐': false,
    'Volleyball 🏐': false,
    'Dodgeball 🏀': false,
    'Rugby 🏉': false,
    'American Footbal 🏈': false,
    'Korftbal 🥎': false,
    'Netbal ⚾': false,

final Set _saved = Set();

i am try to pass the bellow function to the onTap,

_removeInterest(entry) {
    _saved.contains(entry) ? _saved.remove(entry) : debugPrint("");
    setState(() {});

Thank you all


Question answered by omar h (source).

you are removing it from _saved but the check box list iterates over the interestList, so you should modify interestList as well.

so your _removeInterest should be like this

_removeInterest(entry) {
    _saved.contains(entry) ? _saved.remove(entry) : debugPrint("");
    interestList[entry] = false;
    setState(() {});


enter image description here

Video Answers on YouTube