Update an item on a list in my flutter app without having same item with updated value - flutter

Question

When I run the code, the list adds another item instead of updating the old item (still displaying the old item) which the index was found. I have also tried as using keys on my listView.builder() listView.custom(), and on the Custom Widget I created which renders on the listView.builder() all give same result. Is there something I'm not doing right?
using the indexWhere() this way,
void updateProduct(String id, ProductSaver productSaver) {
final prodIndex = _productList.indexWhere((element) => element.id == id);
final newProduct = ProductSaver(
title: productSaver.title,
description: productSaver.description,
imageUrl: productSaver.imageUrl,
price: productSaver.price);
_productList[prodIndex] = newProduct as Product;
notifyListeners();
}
and this way:
void updateProduct(String id, Product newItem){
final pIndex = _productList.indexWhere((element)=>element.id == id);
if(pIndex >= 0){
_productList[pIndex] = newItem;}
notifyListeners();}
I also used the list.contain()
void updateProduct({String? id, required Product newItem}) {
final itemIndex = _productList.indexWhere((prod) => prod.id! == id);
if (_productList.contains(_productList[itemIndex])) {
_productList[itemIndex] = newItem;
}
notifyListeners();
}
Here is the build() of the code:
#override
Widget build(BuildContext context) {
final providerData = Provider.of<Products>(context);
return Scaffold(
appBar: AppBar(
title: const Text('Products'),
actions: [
IconButton(
onPressed: () {
Navigator.of(context).pushNamed(EditProductScreen.routeName);
},
icon: const Icon(
Icons.add,
size: 30,
),
)
],
backgroundColor: MyColor.primaryColor,
),
body: ListView.builder(
padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 10),
itemCount: providerData.item.length,
itemBuilder: (context, index) {
return Column(
children: [
UserProductItem(
id: providerData.item[index].id!,
imageUrl: providerData.item[index].imageUrl,
title: providerData.item[index].title),
)
],
);
}),
);
}
}
the above UserProductItem() Widget.
class UserProductItem extends StatelessWidget {
const UserProductItem({
Key? key,
required this.imageUrl,
required this.title,
required this.id,
}) : super(key: key);
final String imageUrl;
final String title;
final String? id;
#override
Widget build(BuildContext context) {
final productData = Provider.of<Products>(context);
return ListTile(
key: UniqueKey(),
leading: Image.network(
imageUrl,
),
title: Text(
title,
style: const TextStyle(
color: MyColor.primaryColor,
fontSize: 17,
),
),
trailing: FittedBox(
child: Row(
children: [
IconButton(
icon: const Icon(
Icons.edit,
color: Colors.green,
),
onPressed: () {
Navigator.of(context)
.pushNamed(EditProductScreen.routeName, arguments: id!);
},
),
IconButton(
icon: const Icon(
Icons.delete_outline_outlined,
color: Colors.red,
),
onPressed: () {
productData.removeItem(id!);
},
),
],
),
),
);
}
}

Answer 1

You changed the value at a specific index. Instead you can try adding an item to the list
if (_productList.contains(_productList[itemIndex])) {
_productList.add(newItem);//<--here
}