'Multiple select options in flutter

I want to create a choice chip list of options and select multiple choices in that. I also want to change the colour when the options are selected. the options are dynamic. I tried using the below function but the onselectionchanged displays null error and the color doesn't change when tapped. Any suggestions please??

_buildChoiceList() {
    List<Widget> choices = [];
    options.forEach((item) {
      choices.add(Container(
        padding: const EdgeInsets.all(2.0),
        child: ChoiceChip(
          label: Text(item),
          selected: selectedOptions.contains(item),
          backgroundColor: Color(0xffff08222),
          onSelected: (selected) {
            setState(() {
              selectedOptions.contains(item)
                  ? selectedOptions.remove(item)
                  : selectedOptions.add(item);
              widget.onSelectionChanged(selectedOptions);
            });
          },
        ),
      ));
    });
    return choices;
  }

Solution 1:^[1]

use this plugin here this is the sample code from a project

 Expanded(
    child: MultiSelectDialogField(
    initialValue:
    profileImage['height'] ?? [],
    searchable: true,
    listType: MultiSelectListType.CHIP,
    buttonText: heightList.isEmpty
    ? Text(
    "No Hieght",
    style: TextStyle(
    color: Colors.white,
    fontSize: 20,
     ),
    )
    : Text(
    "Height",
    style: TextStyle(
    color: Colors.white,
   fontSize: 20,
   ),
   ),
  title: Text('Height'),
  items: HeightList().height.map((e) => MultiSelectItem(e, e))
  .toList(),
   decoration: BoxDecoration(color:Colors.white.withOpacity(0.2),
    borderRadius:BorderRadius.circular(10),),
    buttonIcon: Icon(Icons.arrow_drop_down_outlined,
    color:Colors.white.withOpacity(0.7),),
    onConfirm: (values) {
    heightList = values;
    setState(() {
   heightLenght = heightList.length;
   });
   },
    chipDisplay: MultiSelectChipDisplay( onTap: (value) {
    setState(() {
                                                    heightList.remove(value);
    });
    },
    ),
    )),

Solution 2:^[2]

      List<String> hobbyList = [
        'Shopping',
        'Comedy',
        'Brunch',
        'Music',
        'Road Trips',
        'Tea',
        'Trivia',
        'Comedy',
        'Clubbing',
        'Drinking',
        'Wine',
        'Hiking',
        'Yoga',
        'Volleyball',
        'Craft Beer',
        'Dogs',
        'Cats',
        'Activism',
        'Vlogging',
        'Museum',
        'Dancing',
        'Running',
        'Singing',
        'Make-Up',
        'Concert',
        'Cafe',
        'Theater',
        'Baking',
        'Gardening',
        'Cooking',
        'Video Games',
        'Camping'
      ];
    
   
      List<String>? selectedHobby = [];


  Wrap(children: hobbyList.map(
                    (hobby) {
                      bool isSelected = false;
                      if (selectedHobby!.contains(hobby)) {
                        isSelected = true;
                      }
                      return GestureDetector(
                        onTap: () {
                          if (!selectedHobby!.contains(hobby)) {
                            if (selectedHobby!.length < 5) {
                              selectedHobby!.add(hobby);
                              setState(() {});
                              print(selectedHobby);
                            }
                          } else {
                            selectedHobby!
                                .removeWhere((element) => element == hobby);
                            setState(() {});
                            print(selectedHobby);
                          }
                        },
                        child: Container(
                            margin: EdgeInsets.symmetric(
                                horizontal: 5, vertical: 4),
                            child: Container(
                              padding: EdgeInsets.symmetric(
                                  vertical: 5, horizontal: 12),
                              decoration: BoxDecoration(
                                  color: Colors.white,
                                  borderRadius: BorderRadius.circular(18),
                                  border: Border.all(
                                      color: isSelected
                                          ? kActiveColor
                                          : Colors.grey,
                                      width: 2)),
                              child: Text(
                                hobby,
                                style: TextStyle(
                                    color:
                                        isSelected ? kActiveColor : Colors.grey,
                                    fontSize: 14),
                              ),
                            )),
                      );
                    },
                  ).toList(),
                ),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Gbenga B Ayannuga
Solution 2	Deepak Yadav

'Multiple select options in flutter

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]