Flutter app crashing issue while rendering large number of images at a time

I was having the same issue when using the CacheNetworkImage . So I decided to dowload the images and save it in Device Storage and then shows the Image using Image.file().But i didnt wanted the images to load when i scroll down, so i used "AutomaticKeepAliveClientMixin" but it work for few images , not with long image list.The app got crashed again.
my image size were between 300 kb to 500 kb. and using CacheWidth and Cache height make the images to blur.

Solution

so I reduce the image sizes to between 50 kb and 100 kb.
And I use precacheImage(FileImage()) to render the images early
and use Listview.builder() to only render the images that are visible on the screen (To avoid using too many RAM space on Device which cause app crush)
I remove AutomaticKeeepAliceMixin to save Device memory

Getting storage Location

 Future<String> getStoragedirectory() async {
Directory tempDir = await getApplicationDocumentsDirectory();
storagelocation = "${tempDir.path}/storage";
return storagelocation;

}

downloadig images to device

  Future<void> writeLocalImage(String downloadUrl, String imageId, String? imageType) async {
File fileimage;
var response = await Dio().get(downloadUrl,
    options:
        Options(responseType: ResponseType.bytes, followRedirects: false));
String dir = await getbookimage();
String dirwithName = "$dir/$imageId${imageType ?? ".webp"}";
await Directory(dir).create(recursive: true);
fileimage = File(dirwithName);
if (fileimage.existsSync()) {
  fileimage.writeAsBytes(response.data);
} else {
  fileimage = await File(dirwithName).create(recursive: true);
  fileimage.writeAsBytes(response.data);
}

}

reading local images

 readLocalImage(String imageid) {
final dir = Directory("$imageLocation/$imageid.webp");
FileSystemEntity entities = dir;
return File(entities.path);

}

showing image in Listview.builder

i use propertyItem to decide the size of the widget of my listview.Set the firstImage of your list in propertyItem. so all the images in listview will take the size of firstimage .

 ListView.builder(
        prototypeItem: Image.file(ImageFileslist[
            0]), //mean all the images in this list will be same size as below
        itemBuilder: (context, index) {
          return ImageFileslist[index];
        });

Summary Explanation

Depends on how many images are being rendered on UI and the size of the images, the use of device memory usage is increased .
In flutter Image Widgets are called expensive widgets , I hope this is helpful.