First index doesnt show highlighted colour - flutter

Question

The bounty expires in 6 days. Answers to this question are eligible for a +50 reputation bounty.
wuuyungwuu is looking for an answer from a reputable source.
I am trying to select multiple components in this Wrap.toList() but every first index I select doesn't change its colour indicating that it is selected. It is selected in the list but it doesn't show.
See the 4 components I have selected.
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
shrinkWrap: true,
children: cC.allCommodityList.map((order) {
return InkWell(
onTap: () {
setState(() {
selectedItems.contains(order)
? selectedItems.remove(order)
: selectedItems.add(order);
commodityName = order.commodityName;
commodityid = order.commodityID;
// }
});
},
child: Card(
child: Column(
children: [
Expanded(
child: selectedItems.contains(order)
? SvgPicture.asset(
'assets/toiletpaper.svg',
color: Color.fromRGBO(0, 76, 32, 1),
)
: SvgPicture.asset(
'assets/toiletpaper.svg',
)),
selectedItems.contains(order)
? TopBorderNoTap(
listColor: [
Color.fromRGBO(229, 229, 229, 1),
Color.fromRGBO(0, 76, 32, 1),
],
text: order.commodityName.toString(),
color: Colors.white,
textColor: Colors.white)
: TopBorderNoTap(
listColor: [
Color.fromRGBO(229, 229, 229, 1),
Colors.white
],
text: order.commodityName.toString(),
textColor: Colors.black,
)
],
)),
);
}).toList(),
))),
This is my model class, not the full code but it just returns from json and to json
CommodityModel({
this.commodityID,
this.commodityName,
this.commodityImage,
});
CommodityModel.fromJson(Map<String, dynamic> json) {
commodityID = json['commodityID'];
commodityName = json['commodityName'];
commodityImage = json['commodityImage'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = <String, dynamic>{};
data['commodityID'] = commodityID;
data['commodityName'] = commodityName;
data['commodityImage'] = commodityImage;

Answer 1

You can try this approach to select & d-select model list item.
class MyNewWidget extends StatefulWidget {
const MyNewWidget({super.key});
#override
State<MyNewWidget> createState() => _MyNewWidgetState();
}
class _MyNewWidgetState extends State<MyNewWidget> {
final List<CommodityModel> allCommodityList = [
CommodityModel(
commodityID: 1,
commodityName: "Toilet Paper",
commodityImage: "commodityImage"),
CommodityModel(
commodityID: 2,
commodityName: "Paper Towels",
commodityImage: "commodityImage"),
CommodityModel(
commodityID: 3,
commodityName: "Hand shop",
commodityImage: "commodityImage"),
CommodityModel(
commodityID: 4,
commodityName: "Air freshner",
commodityImage: "commodityImage")
];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: GridView.builder(
shrinkWrap: true,
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
childAspectRatio: 3 / 2,
crossAxisSpacing: 20,
mainAxisSpacing: 20,
),
itemCount: allCommodityList.length,
itemBuilder: (BuildContext ctx, index) {
final order = allCommodityList[index];
return Container(
alignment: Alignment.center,
child: InkWell(
onTap: () {
setState(() {
order.isSelected = !order.isSelected;
});
},
child: Card(
child: Column(
children: [
Expanded(
child: SvgPicture.asset(
'assets/toiletpaper.svg',
color: order.isSelected
? const Color.fromRGBO(0, 76, 32, 1)
: null,
)),
Row(
children: [
Expanded(
child: Container(
color: order.isSelected
? const Color.fromRGBO(0, 76, 32, 1)
: null,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Text(
order.commodityName ?? "",
style: TextStyle(
color: order.isSelected
? Colors.white
: Colors.black),
)),
),
),
),
],
)
],
)),
),
);
}),
),
);
}
}
class CommodityModel {
int? commodityID;
String? commodityName;
String? commodityImage;
bool isSelected =
false; // Add key for selection handle. You can also handle with single orderID Array
CommodityModel({this.commodityID, this.commodityName, this.commodityImage});
CommodityModel.fromJson(Map<String, dynamic> json) {
commodityID = json['commodityID'];
commodityName = json['commodityName'];
commodityImage = json['commodityImage'];
isSelected = json['isSelected'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = <String, dynamic>{};
data['commodityID'] = commodityID;
data['commodityName'] = commodityName;
data['commodityImage'] = commodityImage;
data['isSelected'] = isSelected;
return data;
}
}