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 deselected chips out of them. Can do that ? If can how to implement that?
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(),
),
],
),
Selected items display like this. enter image description here
like that how to display deselected items?
CodePudding user response：
The better way to achieve this is to create a custom class
class chipsSelected{
String? title;
bool isSelected;
chipsSelected({this.title,this.isSelected=false});
}
=> Add data in List
List<chipsSelected> hobbyList = [
chipsSelected(title: 'Shopping',isSelected: false),
chipsSelected(title: 'Brunch',isSelected: false),
chipsSelected(title: 'Music',isSelected: false),
chipsSelected(title: 'Road Trips',isSelected: false),
chipsSelected(title: 'Tea',isSelected: false),
chipsSelected(title: 'Trivia',isSelected: false),
chipsSelected(title: 'Comedy',isSelected: false),
chipsSelected(title: 'Clubbing',isSelected: false),
chipsSelected(title: 'Drinking',isSelected: false),
chipsSelected(title: 'Wine',isSelected: false),
];
List<chipsSelected> selectedHobby = [];
=> Display
Column(
children: <Widget>[
const SizedBox(height: 16),
Wrap(
children: hobbyList.map(
(hobby) {
var s=hobbyList.where((element) => element.title==hobby.title).first;
return GestureDetector(
onTap: () {
setState(() {
var clickedHobbyList=hobbyList.where((element) => element.title==hobby.title).first;
clickedHobbyList.isSelected=!hobby.isSelected;
});
print("Selected");
print(hobbyList.where((w) => w.isSelected == true).map((w) => w.title.toString()).toList());
print("UnSelected");
print(hobbyList.where((w) => w.isSelected == false).map((w) => w.title.toString()).toList());
},
child: Container(
margin: const EdgeInsets.symmetric(
horizontal: 5, vertical: 4),
child: Container(
padding: const EdgeInsets.symmetric(
vertical: 5, horizontal: 12),
decoration: BoxDecoration(
color: s.isSelected
? Color(0xFFF5F185)
: Color(0xFFD9D9D9),
borderRadius:
BorderRadius.circular(18),
border: Border.all(
color: s.isSelected
? Color(0xFFF5F185)
: Color(0xFFD9D9D9),
width: 2)),
child: Text(
hobby.title!,
style: TextStyle(
color: s.isSelected
? Colors.black
: Colors.black,
fontSize: 14,
fontWeight: FontWeight.w600),
),
),
),
);
},
).toList(),
),
TextButton(onPressed: (){
print(hobbyList.where((element) => false));
}, child: Text("hhhhh"))
],
),
CodePudding user response：
This will print deselected items:
print(hobbyList.toSet().difference((selectedHobby ?? []).toSet()));