How to print deselected (unselected) chips like the selected chips in flutter?

Question

I built multi select chips using Map function. And when selected a chip then color change to yellow. When selected chips then print selected chips. Like that I want to select chips and display the unselected chips out of them. Can do that ? If can how to implement that?

my code..

 List<String> hobbyList = [
    'Shopping',
    'Brunch',
    'Music',
    'Road Trips',
    'Tea',
    'Trivia',
    'Comedy',
    'Clubbing',
    'Drinking',
    'Wine',
  ];

  List<String>? selectedHobby = [];

Column(
                        children: <Widget>[
                          const SizedBox(height: 16),
                          Wrap(
                            children: hobbyList.map(
                              (hobby) {
                                bool isSelected = false;
                                if (selectedHobby!.contains(hobby)) {
                                  isSelected = true;
                                }
                                return GestureDetector(
                                  onTap: () {
                                    if (!selectedHobby!.contains(hobby)) {
                                      if (selectedHobby!.length < 50) {
                                        selectedHobby!.add(hobby);
                                        setState(() {});
                                        print(selectedHobby);
                                      }
                                    } else {
                                      selectedHobby!.removeWhere(
                                          (element) => element == hobby);
                                      setState(() {});
                                      print(selectedHobby);
                                    }
                                  },
                                  child: Container(
                                    margin: const EdgeInsets.symmetric(
                                        horizontal: 5, vertical: 4),
                                    child: Container(
                                      padding: const EdgeInsets.symmetric(
                                          vertical: 5, horizontal: 12),
                                      decoration: BoxDecoration(
                                          color: isSelected
                                              ? HexColor('#F5F185')
                                              : HexColor('#D9D9D9'),
                                          borderRadius:
                                              BorderRadius.circular(18),
                                          border: Border.all(
                                              color: isSelected
                                                  ? HexColor('#F5F185')
                                                  : HexColor('#D9D9D9'),
                                              width: 2)),
                                      child: Text(
                                        hobby,
                                        style: TextStyle(
                                            color: isSelected
                                                ? Colors.black
                                                : Colors.black,
                                            fontSize: 14,
                                            fontWeight: FontWeight.w600),
                                      ),
                                    ),
                                  ),
                                );
                              },
                            ).toList(),
                          ),
                        ],
                      ),

My out put for now

Answer 1

try this , it will only shows the unselected hobbies and will move the selected to another section , I created a demo for that , just replace your build method with the next build method :

    @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: const Text("Demo"),
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            const SizedBox(height: 25),
            Container(alignment: Alignment.center,child: const Text("Hobbies", style:  TextStyle(fontSize: 20),),),
            const SizedBox(height: 35),
            Wrap(
              children: hobbyList.map(
                    (hobby) {
                  bool isSelected = false;
                  if (selectedHobby.contains(hobby)) {
                    isSelected = true;
                  }
                  return GestureDetector(
                    onTap: () {
                      if (!selectedHobby.contains(hobby)) {
                        if (selectedHobby.length < 50) {
                          selectedHobby.add(hobby);
                          // when you select the item remove it from the hobby list and add it to the selected
                          hobbyList.remove(hobby);
                          setState(() {});
                          debugPrint(selectedHobby.toString());
                        }
                      } else {
                        selectedHobby.removeWhere(
                                (element) => element == hobby);
                        setState(() {});
                        debugPrint(selectedHobby.toString());
                      }
                    },
                    child: Container(
                      margin: const EdgeInsets.symmetric(
                          horizontal: 5, vertical: 4),
                      child: Container(
                        padding: const EdgeInsets.symmetric(
                            vertical: 5, horizontal: 12),
                        decoration: BoxDecoration(
                            color: isSelected
                                ? const Color(0x0ff5f185)
                                : const Color(0x00d9d9d9),
                            borderRadius:
                            BorderRadius.circular(18),
                            border: Border.all(
                                color: isSelected
                                    ? const Color(0xfff5f185)
                                    : const Color(0xffd9d9d9),
                                width: 2)),
                        child: Text(
                          hobby,
                          style: TextStyle(
                              color: isSelected
                                  ? Colors.black
                                  : Colors.black,
                              fontSize: 14,
                              fontWeight: FontWeight.w600),
                        ),
                      ),
                    ),
                  );
                },
              ).toList(),
            ),
            const SizedBox(height: 50),
            Container(alignment: Alignment.center,child: const Text("Selected Hobbies", style:  TextStyle(fontSize: 20),),),
            const SizedBox(height: 35),
            Wrap(
              children: selectedHobby.map(
                    (hobby) {
                  return GestureDetector(
                    onTap: () {
                      // add the hobby to the hobbies list and remove it from the selected hobbies list.
                      hobbyList.add(hobby);
                      selectedHobby.remove(hobby);
                      setState(() {});
                    },
                    child: Container(
                      margin: const EdgeInsets.symmetric(
                          horizontal: 5, vertical: 4),
                      child: Container(
                        padding: const EdgeInsets.symmetric(
                            vertical: 5, horizontal: 12),
                        decoration: BoxDecoration(
                            color: const Color(0xfff5f185),
                            borderRadius: BorderRadius.circular(18),
                            border: Border.all(
                                color: const Color(0xfff5f185),
                                width: 2)),
                        child: Text(
                          hobby,
                          style: const TextStyle(
                              color: Colors.black,
                              fontSize: 14,
                              fontWeight: FontWeight.w600),
                        ),
                      ),
                    ),
                  );
                },
              ).toList(),
            ),
          ],
        ),
      ),
    );
  }

and replace your lists with these lists

    List<String> hobbyList = [
    'Shopping',
    'Brunch',
    'Music',
    'Road Trips',
    'Tea',
    'Trivia',
    'Comedy',
    'Clubbing',
    'Drinking',
    'Wine',
  ];

  List<String> selectedHobby = [];

Answer 2

class Example extends State<ExState> {

  List<String> hobbyList = [
    'Shopping',
    'Brunch',
    'Music',
    'Road Trips',
    'Tea',
    'Trivia',
    'Comedy',
    'Clubbing',
    'Drinking',
    'Wine',
  ];

  List<String>? selectedHobby = [];

  void printNotIncluded(List<String> completeList, List<String> selectedItems) {
    List<String> notIncludedItems = [];
    for (String item in completeList) {
      if (!selectedItems.contains(item)) {
        notIncludedItems.add(item);
      }
    }
    print('Items not selected:');
    print(notIncludedItems);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        const SizedBox(height: 16),
        Wrap(
          children: hobbyList.map(
            (hobby) {
              bool isSelected = false;
              if (selectedHobby!.contains(hobby)) {
                isSelected = true;
              }
              return GestureDetector(
                onTap: () {
                  if (!selectedHobby!.contains(hobby)) {
                    if (selectedHobby!.length < 50) {
                      selectedHobby!.add(hobby);
                      setState(() {});
                      print(selectedHobby);
                    }
                  } else {
                    selectedHobby!.removeWhere((element) => element == hobby);
                    setState(() {});
                    print(selectedHobby);
                  }
                  printNotIncluded(hobbyList, selectedHobby!);
                },
                child: Container(
                  margin:
                      const EdgeInsets.symmetric(horizontal: 5, vertical: 4),
                  child: Container(
                    padding:
                        const EdgeInsets.symmetric(vertical: 5, horizontal: 12),
                    decoration: BoxDecoration(
                        color: isSelected ? Colors.red : Colors.yellow,
                        borderRadius: BorderRadius.circular(18),
                        border: Border.all(
                            color: isSelected ? Colors.red : Colors.yellow,
                            width: 2)),
                    child: Text(
                      hobby,
                      style: TextStyle(
                          color: isSelected ? Colors.black : Colors.black,
                          fontSize: 14,
                          fontWeight: FontWeight.w600),
                    ),
                  ),
                ),
              );
            },
          ).toList(),
        ),
      ],
    );
  }
}

Answer 3

you can do that by subtract the hoppy list and the selected list , this will give you the unselected list and you can do logic with that .

this function will generate a list by subtract two lists :

List<String> subtract({required List<String> listOne ,required List<String> listTwo}){
  List<String> list = [];
  for(String e in listOne){
    if(!listTwo.contains(e)){
      list.add(e);
    }
  }
  return list;
}