Showing images in the listview and click on any image and go to any screen. When came back the images start loading again.

I have a simple screen with list of images.
When user tap on image and go to any screen and when came back then images start laoding again. Why?
Its need to be persistant.
Why images are loading again when first time they are dislayed.

Here is my code
`import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

class ImageListScreen extends StatefulWidget {
const ImageListScreen({super.key});

@override
State createState() => _ImageListScreenState();
}

class _ImageListScreenState extends State {
final List imageUrls = const [
'https://storage.googleapis.com/pluto-dev-assets/post-pics/7f3351ca-d2c6-47f0-942a-e3da67142028.jpg',
'https://storage.googleapis.com/pluto-dev-assets/post-pics/bc788508-153a-482d-8396-ecc4be6c7015.jpg',
'https://storage.googleapis.com/pluto-dev-assets/post-pics/32667d33-d22d-4c2c-8099-88cecd6bc15c.jpg',
'https://storage.googleapis.com/pluto-dev-assets/post-pics/bf648483-2088-4a19-9656-cdd88b450db5.jpg',
'https://storage.googleapis.com/pluto-dev-assets/post-pics/c9ccfaf0-dc36-421c-a5dd-fe1589f9af41.jpg',
'https://storage.googleapis.com/pluto-dev-assets/post-pics/e62464d7-c196-449c-883b-2b93b59df37b.jpg',
'https://storage.googleapis.com/pluto-dev-assets/post-pics/d6b0b088-bc4e-4d33-a110-5d1ab0fe1f6e.jpg',
'https://storage.googleapis.com/pluto-dev-assets/post-pics/ed6df09c-06a2-472f-a9bc-b49df0db9aa1.jpg',
'https://storage.googleapis.com/pluto-dev-assets/post-pics/189a1ded-d6d4-4225-b0d3-4c1755ad3c27.jpg',
'https://storage.googleapis.com/pluto-dev-assets/post-pics/adf8d694-d3f1-4918-92a9-cb7a2291748a.jpg',
'https://storage.googleapis.com/pluto-dev-assets/post-pics/f45c1a47-291c-41f3-8403-86cf9edd7d5b.jpg',
];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Image Gallery')),
body: CustomScrollView(
cacheExtent: 2000, // Large cache extent to keep more items alive
slivers: [
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => ImageListItem(
key: ValueKey('image_$index'), // Unique key for each item
url: imageUrls[index],
index: index,
),
childCount: imageUrls.length,
),
),
],
),
);
}
}

class ImageListItem extends StatefulWidget {
final String url;
final int index;

const ImageListItem({
super.key,
required this.url,
required this.index,
});

@override
State createState() => _ImageListItemState();
}

class _ImageListItemState extends State with AutomaticKeepAliveClientMixin {
@override
bool get wantKeepAlive => true; // This preserves the state

@override
Widget build(BuildContext context) {
super.build(context); // Needed for AutomaticKeepAliveClientMixin

print("Rebuild -----> ${widget.index}");

return Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () {
print("url -----> ${widget.url}");
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Scaffold(
appBar: AppBar(title: const Text('Details')),
body: Center(
child: CachedNetworkImage(
imageUrl: widget.url,
cacheKey: widget.url,
)),
),
),
);
},
child: CachedNetworkImage(
imageUrl: widget.url,
cacheKey: widget.url,
// Ensures consistent caching
maxWidthDiskCache: 1000,
// Cache the full size image
maxHeightDiskCache: 1000,
width: double.infinity,
fit: BoxFit.cover,
placeholder: (context, url) => Container(
color: Colors.grey[200],
height: 200,
child: const Center(child: CircularProgressIndicator()),
),
errorWidget: (context, url, error) => Container(
color: Colors.grey[200],
height: 200,
child: const Icon(Icons.error),
),
),
),
);
}
}
`

and Here I'm using **cached_network_image: ^3.4.1**

Kindly let me know can we fix it, As many developers are facing the same issue.
looking forward your swift response.