How to only highlight one wrap when it's selected?

Question

I have been wanting to implement a wrap widget when an user select one of the wrap, it would be highlighted in orange. However, even after I thought I implemented successfully, when I select only one of them, everything is highlighted. Can anyone see what mistake am I making?

Thank you.

Here is my code:

    return Scaffold(
      body: Column(
        children: [
          Text(
            "For your group recommendation, select your interest",
            style: TextStyle(fontSize: 15),
          ),
          SizedBox(
            height: 30,
          ),
          Wrap(
            children: [
              "Computer Science",
              "Engineering",
              "Kinesiology",
              "English Literature",
              "Finance",
              "Economics",
              "Physics",
              "Pre-med",
              "Biochemistry",
              "Football Game",
              "Fraternity"
            ]
                .map((f) => GestureDetector(
                      child: Container(
                        padding: EdgeInsets.symmetric(
                            horizontal: 20.0, vertical: 10.0),
                        margin: EdgeInsets.only(
                            left: 5.0, right: 5.0, top: 10.0, bottom: 10.0),
                        decoration: BoxDecoration(
                          color: isClicked ? Colors.orange : Colors.transparent,
                          border:
                              Border.all(color: isClicked ? Colors.orange: Color(0xFF282f61), 
                              width: 2.0),
                          borderRadius: BorderRadius.all(
                              Radius.circular(10.0) //<--- border radius here
                              ),
                        ),
                        child: Text(
                          f,
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 16.0,
                          ),
                        ),
                      ),
                      onTap: () {
                        setState(() {
                          if (isClicked == true) {
                            isClicked = false;
                          } else if (isClicked == false) {
                            isClicked = true;
                          }
                        });
                      },
                    ))
                .toList(),
          ),
        SizedBox(
          height: 20,
        ),
        Text(
          "Choose at lease one category",
          style: TextStyle(fontSize: 10),
        ),
        SizedBox(
          height: 20,
        ),
        ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/welcome_screen');
          },
          child: Text("Next"),
        )
        ],
      ),
    );
  }
}

Answer 1

use this

import 'package:flutter/material.dart';


class MultiSelectChip extends StatefulWidget {
  final List<String> reportList;
  final Function(List<String>)? onSelectionChanged;
  final canSelect;

  MultiSelectChip(this.reportList, {this.onSelectionChanged,this.canSelect = true});

  @override
  _MultiSelectChipState createState() => _MultiSelectChipState();
}

class _MultiSelectChipState extends State<MultiSelectChip> {
  List<String> selectedChoices = [];

  _buildChoiceList() {
    List<Widget> choices = [];
    widget.reportList.forEach((item) {
      choices.add(Container(
        padding: const EdgeInsets.all(3.0),
        child: ChoiceChip(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8))),
          label: Container(
              width: MediaQuery.of(context).size.width / 4.2,
              child: Text(
                item,
                textAlign: TextAlign.center,
                style: TextStyle(
                    color: selectedChoices.contains(item)
                        ? Colors.white
                        : Colors.black,
                    fontSize: 9),
              )),
          selected: selectedChoices.contains(item),
          selectedColor: Colors.green[500],
          onSelected: (selected) {
            setState(() {
              if(widget.canSelect) {
                selectedChoices.contains(item)
                    ? selectedChoices.remove(item)
                    : selectedChoices.add(item);

                widget.onSelectionChanged!(selectedChoices);
              }
            });
          },
        ),
      ));
    });
    return choices;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      shrinkWrap: true,
      children: [
        Wrap(
          children: _buildChoiceList(),
        )
      ],
    );
  }
}

just put your string list

canSelect => user can deselect

onSelectionChanged => with this, you can have a callback

var myList = [
              "Computer Science",
              "Engineering",
              "Kinesiology",
              "English Literature",
              "Finance",
              "Economics",
              "Physics",
              "Pre-med",
              "Biochemistry",
              "Football Game",
              "Fraternity"
            ];
MultiSelectChip(myList),