flutter uncheck a checkbox from checkboxList using ontap from a list of checked items

Question

I 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

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

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

Wrap(
        children: _saved
            .map<Widget>(
              (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")))),
              ),
            )
            .toList());
  }

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

Answer 1

You need to use key of interestList to get and set the value of Checkbox and another list to add or delete above selected option's row. Try code below :

Column(
      children: [
        SizedBox(
            height: 40,
            width: MediaQuery.of(context).size.width,
            child: ListView.builder(
              shrinkWrap: true,
              scrollDirection: Axis.horizontal,
              itemCount: _list.length,
              itemBuilder: (context, index) => Row(
                children: [
                  Text("${_list[index]}"),
                  IconButton(
                    icon: Icon(Icons.clear_rounded),
                    onPressed: () {
                     setState(() {
                       interestList[_list[index]] = false;
                       print("$index");
                       _list.removeAt(index);
                     });
                    },
                  )
                ],
              ),
            )),
        ListView(
          shrinkWrap: true,
          children: interestList
              .map((key, value) {
                // isInterest[key] = true;
                return MapEntry(
                    key,
                    ListTile(
                      title: Text(key),
                      trailing: Checkbox(
                        value: interestList[key],
                        onChanged: (val) {
                          setState(() {
                            interestList[key] = !interestList[key]!;
                            interestList[key]! ? _list.add(key) : _list.remove(key);
                          });
                        },
                      ),
                    ));
              })
              .values
              .toList(),
        ),
      ],
    )

Answer 2

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(() {});
}

EDIT