Multiple select options in flutter - flutter

Question

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;
}

Answer 1

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(),
),

Answer 2

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);
});
},
),
)),