Updating single item in GridView.Builder() without rebuilding whole tree - flutter

Question

I am trying to update a single image in my gridview of images when a user taps on the image but whenever I update a single element of array, it updates the entire gridview. This itself is not bad but since user will be selecting multiple images, it does not look ideal or good. I would appreciate it if someone can guide me to update single element of gridview without updating the entire widget
I am using provider for my state management but I have also tried it with setState. I have include all the code of the gridview file but let me know if you need for info.
Thanks
return Consumer<RemoverList>(
builder: (context, data, child) {
return WillPopScope(
onWillPop: () async {
data.remover.clear();
data.removerBool.clear();
// Provider.of<RemoverList>(context).remover.clear();
return true;
},
child: Scaffold(
body: Container(
height: height,
width: width,
color: Theme.of(context).backgroundColor,
child: SafeArea(
child: Column(
children: [
GestureDetector(
onTap: () {
Navigator.pushNamed(context, 'options');
},
child: Container(
height: height * 0.05,
width: width * 0.95,
margin: const EdgeInsets.symmetric(vertical: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2),
border: Border.all(color: Colors.white)),
child: Center(
child: Text(
widget.album.name,
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25),
),
),
),
),
Expanded(
child: Container(
padding: const EdgeInsets.fromLTRB(0, 5, 0, 5),
// color: Colors.green,
width: width * 0.95,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(5)),
child: GridView.builder(
itemCount: widget.album.images.length,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
mainAxisSpacing: 5,
crossAxisSpacing: 5,
crossAxisCount: 3),
itemBuilder: (context, i) {
data.generateRemoverList(widget.album.images);
var image = Uint8List.fromList(widget
.album.images[i].image['data']
.cast<int>());
return GestureDetector(
onLongPress: () {
// data.tapped(i);
if (data.removerBool.isNotEmpty) {
if (data.removerBool[i] == true) {
setState(() {
data.removerBool[i] = false;
});
} else {
setState(() {
data.removerBool[i] = true;
});
}
}
print(data.removerBool[i]);
print(data.remover);
setState(() {
active = true;
});
data.addToList(
widget.album.images[i].originalName);
},
onTap: () {
if (active == false) {
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return OpenImage(unit: image);
}));
} else if (active == true) {
data.addToList(
widget.album.images[i].originalName);
print(data.remover);
data.removerBool[i] = !data.removerBool[i];
// data.tapped(i);
}
// data.tapped(i);
// print(data.removerBool[i]);
},
child: Container(
decoration: BoxDecoration(
color: Colors.black,
image: DecorationImage(
image: MemoryImage(image),
fit: BoxFit.cover)),
child: Center(
child: data.remover.contains(
widget.album.images[i].originalName)
? const Icon(
Icons.check_box_rounded,
color: Colors.black,
)
: Container(),
),
));
}),
)),
Container(
width: width * 0.95,
margin: const EdgeInsets.symmetric(vertical: 10),
alignment: Alignment.bottomCenter,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: width * 0.45,
child: ElevatedButton(
onPressed: () {},
child: const Text('Add Photos')),
),
Container(
width: width * 0.45,
child: ElevatedButton(
onPressed: () {},
child: const Text('Remove Seleted')),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: width * 0.45,
child: ElevatedButton(
onPressed: () {},
child: const Text('Save')),
),
Container(
width: width * 0.45,
child: ElevatedButton(
onPressed: () {},
child: const Text('Delete Album')),
)
],
)
],
),
)
],
),
),
),
),
);
},
);
}
}