How to remove an item that contains a map that I build with a ListView.builder using a button (a cart page) ? - Flutter - flutter

Question

I have a cart page in my app that contains a list of items.
I build this list with a ListView.builder. The content it returns contains a data from API.
Here's the visual of it
and here's my code
ListView.builder(
itemCount: cartController.cartList.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: Container(
width: MediaQuery
.of(context)
.size
.width,
decoration: BoxDecoration(
color: Color(0xffF1F5F9),
boxShadow: <BoxShadow>[
BoxShadow(
color: Color(0xff7D7D7D).withOpacity(0.6),
blurRadius: 4.0,
offset: Offset(2, 3))
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 6, 10, 6),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 40,
width: 40,
child: CachedNetworkImage(
useOldImageOnUrlChange: false,
imageUrl:
'${cartController.cartList.values.toList() [index]
.image}',
placeholder: (context, url) =>
Stack(
alignment: Alignment.center,
children: [
Image.asset(
Constants.loading,
height: 30,
width: 30,
),
],
),
errorWidget: (context, url, error) =>
Image.asset(
"assets/logo/carisayur_empty.png",
height: 20,
width: 20,
),
)),
Padding(
padding: const EdgeInsets.only(left: 14.0, top: 12),
child: Text(
'${cartController.cartList.values.toList() [index]
.name}',
maxLines: 2,
style: TextStyle(
fontSize: 12,
color: Color(0xff31708F),
fontWeight: FontWeight.w500),
),
),
Spacer(),
IconButton(
padding: EdgeInsets.zero,
constraints: BoxConstraints(),
onPressed: () {
cartController.cartList.remove(index);
},
icon: Icon(
Icons.close,
color: Color(0xff31708F),
size: 20,
),
),
// Image.asset("assets/icons/cancel.png"),
],
),
),
Divider(
thickness: 0.8,
color: Color(0xffE1E1E1),
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 70,
padding: const EdgeInsets.only(left: 8.0),
child: Text(
"Kemasan",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w400,
color: Color(0xff000000)),
),
),
Container(
width: MediaQuery
.of(context)
.size
.width / 2,
child: Text(
"Jumlah",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w400,
color: Color(0xff000000)),
),
),
Spacer(),
Padding(
padding: const EdgeInsets.only(right: 20),
child: Text(
"Harga",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w400,
color: Color(0xff000000)),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 70,
child: Text(
'${cartController.cartList.values.toList() [index]
.kemasan}',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w600,
color: Color(0xff7F8A8E)),
),
),
Container(
width: MediaQuery
.of(context)
.size
.width / 2,
child: Text(
"1",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w500,
color: Color(0xff7F8A8E)),
),
),
Spacer(),
Padding(
padding: const EdgeInsets.only(right: 20),
child: Text(
"${GlobalFunctions().rupiah(
cartController.cartList.values.toList() [index]
.price ?? 0)}",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w500,
color: Color(0xff000000))),
)
],
),
Divider(
thickness: 0.8,
color: Color(0xffE1E1E1),
),
Padding(
padding: const EdgeInsets.fromLTRB(10, 6, 18, 6),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(left: 10, right: 5.0),
child: Image.asset("assets/icons/edit.png"),
),
Text(
"Edit",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w400,
color: Color(0xff000000)),
),
Padding(
padding: EdgeInsets.only(left: 60, right: 5),
child:
InkWell(
onTap: () {
setState(() {
isTap = !isTap;
});
if (isTap == true) {
favAlert(
'Barang berhasil \n'
'ditambahkan \n'
'ke Favorit',
);
} else {
favAlert(
'Favorit dihapus'
);
}
},
// padding: EdgeInsets.only(right: 35, top: 3),
child: Container(
child: isTap == false
? Icon(Icons.favorite_border, size: 14,)
: Icon(
Icons.favorite, color: Colors.red, size: 14,),
),
),
),
Text(
"Favorit",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w400,
color: Color(0xff000000)),
),
Spacer(),
Text(
"Total",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w400,
color: Color(0xff000000)),
),
Padding(
padding: const EdgeInsets.only(left: 16),
child:
Text(
"${GlobalFunctions().rupiah(
cartController.cartList.values.toList() [index]
.price ?? 0)}",
style: TextStyle(
fontSize: 12,
color: Color(0xff31708F),
fontWeight: FontWeight.w500),
),
)
],
),
),
],
),
),
);
}),
if I print the cartController.cartList and cartController.cartList.length, it will print I/flutter ( 5474): {2907: Instance of 'UpdateCartProductResponse', 2916: Instance of 'UpdateCartProductResponse', 2820: Instance of 'UpdateCartProductResponse'} and 3
my problem is I can't remove one of the item with an IconButton that I made there.
How can I remove an item?