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.
