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

Question

I want to discuss about problem I'm facing in a flutter app. The app is a social E-Commerce app with layout like Facebook or Instagram. I am using pagination of 10 posts with multiple images max 4 per post like a grid view. When i scroll upto 5-8 pages app crashes due to large number of images being render.

I have tried many solutions but didn't get ride of the problem. Following are list of some solutions that i have tried till now.

1. Tried cached_network_image plugin. app crashes on upto 50-60 posts or estimatedly upto 200 images scrolling.

2. Tried optimized_cached_image. Crash rate is minimized little bit and i was able to scroll upto 250-300 images and then app again crashed.

3. Tried FadeInImage.network and FadeInImage.memoery widgets but app also crashes when scrolled upto even 100 images.

4. Download images to local directory and then tried to display images using Image.memory and Image.file widgets. But this solution also didn't work.

Can you suggest me any solution to sort out this issue

Answer 1

If the response contains the large scale of images then use background fetching before you list is being ended .

so before your screen renders you'll already have a data.

Answer 2

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.

Answer 3

You need to set cacheWidth prop

  @override
  Widget build(BuildContext context) {
    final url =
        "https://images.unsplash.com/photo-1550613097-fe6c2c321cd3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMDk0fQ&auto=format&fit=crop&w=1351&q=80";
    
    final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
          child: Column(
        children: <Widget>[
          Image.network(
            url,
            width: 300,
            fit: BoxFit.cover,
          ),
          Image.network(
            url,
            width: 300,
            fit: BoxFit.cover,
            cacheWidth: (300 * devicePixelRatio).round(),
          )
        ],
      )),
    );
  }

This solution also works for Image.file

 Image.file(localImageFile,
            fit: BoxFit.cover,
            cacheWidth: (350 * devicePixelRatio).round()                      
),

For more information: Specifying cacheWidth / cacheHeight can degrade the image quality

Answer 4

Image widget in flutter is an expensive widget. It's a problem of your images which are of very high quality. Whenever you use list of such high quality images, ram consumption increases which leads your phone to lag, not your app.

SOLUTION:

Use cacheHeight & cacheWidth property inside Image.asset widget or Image.network() widget. Set it to around 200 to keep a balance between quality and performance.

Image.asset( "your_image", cacheHeight: 200, cacheWidth: 200, ),

I hope this helps.