package crashes my app when more than 10 cached images widgets are used

[nicolasvahidzein]

🐛 Bug Report

when i use more than 10 cached network images my app crashes this is my code:

                                                                   CachedNetworkImage(
                                    imageUrl: product == null ? productDetails!.imagesUrls[0] : product!.imageUrl,
                                    imageBuilder: (context, imageProvider) {

                                        return Container(
                                            height: 200,
                                            decoration: BoxDecoration(
                                                image: DecorationImage(
                                                    image: imageProvider,
                                                    fit: BoxFit.cover,
                                                ),
                                            ),
                                        );

                                    },
                                    progressIndicatorBuilder: (context, url, downloadProgress) {
                                        return Container(
                                            height: 200,
                                            color: Colors.white,
                                            child: Center(
                                                child:CircularProgressIndicator(
                                                    value: downloadProgress.progress,
                                                ),
                                            ),
                                        );
                                    },
                                    errorWidget: (context, url, error) => Icon(Icons.error),
                                ),

Expected behavior

it should not crash :)

Reproduction steps

Configuration

Version: flutter 2.2.1

Platform:

• [ ] :iphone: iOS
• [x] :robot: Android

[renefloor]

You don't share the image urls, but can it be that the images themselves are really large? They are by default loaded completely, so it might be better to load them in a smaller size, you can do that this way:

      CachedNetworkImage(
        memCacheHeight: 200,
        imageUrl: url,
        ...
      ),

[nicolasvahidzein]

you want to see the actual urls of the images i am loading?

memCacheHeight does nothing to prevent the crash btw. This is quite a problem.

[renefloor]

But could you at least share your crash log? With no other information than this I cannot really help you. For example the example app in the package runs perfectly fine with many images, so just the general statement "package crashes my app when more than 10 cached images widgets are used". It would be nice if you can create a small example that I can just run and see the crash.

[nicolasvahidzein]

Sure thing, how do i send you that. I am using vscode, i am not too familiar with android studio. Well it's hard to isolate just that in my huge project but i will see what i can do.

[nicolasvahidzein]

Hello @renefloor i think i might have been using quite large images. Could that be the source of the error? I'm not an expert at crash logs and profiling (btw if you could recommend a good article on this i would be grateful) but i was using relatively large images on load 500 to 1200 kb and i switched to using max 60 kb images and things seem to be smoother and no more crash.

[renefloor]

Yes that could be it, showing a lot of very large images can lead to memory issues. If you have control over the backend serving smaller images from there is the best approach.

[shubrakash]

Hello @renefloor I've been facing this app crash and exit issue, where I've a gridview of 100+ cards with CacheNetworkImage usage. Primary observation seems like issue is related to flooded concurrent data lookup/retrieval from the cache manager. Average size per image in my case is 160-200 KB.

Please suggest an optimal way to avoid such scenario.

Following is the error log before app crashes and exits:

I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 1 line 5 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction W/BpBinder(13517): Slow Binder: BpBinder transact took 230ms, interface=android.gui.IGraphicBufferProducer, code=6 oneway=false 6 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 2 lines 11 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 1 line 2 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 3 lines I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction W/BpBinder(13517): Slow Binder: BpBinder transact took 1142ms, interface=android.gui.IGraphicBufferProducer, code=2 oneway=false 11 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 1 line 2 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction W/BpBinder(13517): Slow Binder: BpBinder transact took 589ms, interface=android.gui.IGraphicBufferProducer, code=2 oneway=false 7 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 14 lines 5 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction W/BpBinder(13517): Slow Binder: BpBinder transact took 637ms, interface=com.android.internal.view.IInputMethodManager, code=8 oneway=false 5 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 1 line 5 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 3 lines 2 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 3 lines 6 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 2 lines 2 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 2 lines 2 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 3 lines 3 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 1 line 5 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 3 lines 3 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 1 line 9 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction W/BpBinder(13517): Slow Binder: BpBinder transact took 1846ms, interface=android.gui.IGraphicBufferProducer, code=6 oneway=false I/Choreographer(13517): Skipped 62 frames! The application may be doing too much work on its main thread. W/Looper (13517): PerfMonitor doFrame : time=130ms vsyncFrame=0 latency=1037ms procState=2 Lost connection to device. Exited (sigterm)

[kalyujniy]

Hello @renefloor I've been facing this app crash and exit issue, where I've a gridview of 100+ cards with CacheNetworkImage usage. Primary observation seems like issue is related to flooded concurrent data lookup/retrieval from the cache manager. Average size per image in my case is 160-200 KB.

Please suggest an optimal way to avoid such scenario.

Following is the error log before app crashes and exits:

I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 1 line 5 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction W/BpBinder(13517): Slow Binder: BpBinder transact took 230ms, interface=android.gui.IGraphicBufferProducer, code=6 oneway=false 6 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 2 lines 11 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 1 line 2 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 3 lines I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction W/BpBinder(13517): Slow Binder: BpBinder transact took 1142ms, interface=android.gui.IGraphicBufferProducer, code=2 oneway=false 11 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 1 line 2 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction W/BpBinder(13517): Slow Binder: BpBinder transact took 589ms, interface=android.gui.IGraphicBufferProducer, code=2 oneway=false 7 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 14 lines 5 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction W/BpBinder(13517): Slow Binder: BpBinder transact took 637ms, interface=com.android.internal.view.IInputMethodManager, code=8 oneway=false 5 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 1 line 5 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 3 lines 2 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 3 lines 6 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 2 lines 2 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 2 lines 2 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 3 lines 3 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 1 line 5 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 3 lines 3 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 1 line 9 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction W/BpBinder(13517): Slow Binder: BpBinder transact took 1846ms, interface=android.gui.IGraphicBufferProducer, code=6 oneway=false I/Choreographer(13517): Skipped 62 frames! The application may be doing too much work on its main thread. W/Looper (13517): PerfMonitor doFrame : time=130ms vsyncFrame=0 latency=1037ms procState=2 Lost connection to device. Exited (sigterm)

Have the same issue

[wanghuasheng]

the same as you ,100 pictures are easier

[magnocasmor]

Hello @renefloor I've been facing this app crash and exit issue, where I've a gridview of 100+ cards with CacheNetworkImage usage. Primary observation seems like issue is related to flooded concurrent data lookup/retrieval from the cache manager. Average size per image in my case is 160-200 KB.

Please suggest an optimal way to avoid such scenario.

Following is the error log before app crashes and exits:

I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 1 line 5 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction W/BpBinder(13517): Slow Binder: BpBinder transact took 230ms, interface=android.gui.IGraphicBufferProducer, code=6 oneway=false 6 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 2 lines 11 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 1 line 2 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 3 lines I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction W/BpBinder(13517): Slow Binder: BpBinder transact took 1142ms, interface=android.gui.IGraphicBufferProducer, code=2 oneway=false 11 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 1 line 2 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction W/BpBinder(13517): Slow Binder: BpBinder transact took 589ms, interface=android.gui.IGraphicBufferProducer, code=2 oneway=false 7 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 14 lines 5 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction W/BpBinder(13517): Slow Binder: BpBinder transact took 637ms, interface=com.android.internal.view.IInputMethodManager, code=8 oneway=false 5 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 1 line 5 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 3 lines 2 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 3 lines 6 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 2 lines 2 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 2 lines 2 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 3 lines 3 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 1 line 5 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 3 lines 3 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction I/chatty (13517): uid=10522(com.example.slv2) 1.ui identical 1 line 9 I/flutter (13517): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction W/BpBinder(13517): Slow Binder: BpBinder transact took 1846ms, interface=android.gui.IGraphicBufferProducer, code=6 oneway=false I/Choreographer(13517): Skipped 62 frames! The application may be doing too much work on its main thread. W/Looper (13517): PerfMonitor doFrame : time=130ms vsyncFrame=0 latency=1037ms procState=2 Lost connection to device. Exited (sigterm)

Same here with a ListView.builder

[almogtovim]

same issue with Flutter 3.3.10

[ligan21]

same issue，when I load many and big image， app sigterm

[devsideal]

@renefloor Using memCacheHeight seems to fix the memory issue but fit: BoxFit.cover property not working with it, How to achieve this?

[nicolasvahidzein]

Can you provide a code sample of your use of memCacheHeight please?

[devsideal]

@nicolasvahidzein please have a look:

Container(
      height: 182,
      width: 137,
      decoration: const BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(5))),
      child: CachedNetworkImage(
      fit: BoxFit.cover,
      imageUrl: "$image",
      memCacheHeight: 182,
      memCacheWidth: 137) 
);

[TheCarpetMerchant]

Is any investigation going to be made into this issue ? We have dozens of users reporting the same error : the database of the caching backend crashes when you load too many big images. Please either put a warning on the package specifying its limited usage, or solve the issue.

[nicolasvahidzein]

How big are the images you are loading? Ping me on skype i can help. Otherwise use thumbnail version of the images. I can load hundreds ok.

[aldrinzigmundv]

I wanted to provide some additional context on this issue. I was encountering the same error while using ListView.builder to load many images from RSS feeds. My ListView should only display a couple of images at a time, so I suspect the problem might be related to the imageBuilder loading images that don’t need to be displayed yet in a ListView.

Initially, I tried using the sample code from the README file: CachedNetworkImage( imageUrl: "http://via.placeholder.com/200x150", imageBuilder: (context, imageProvider) => Container( decoration: BoxDecoration( image: DecorationImage( image: imageProvider, fit: BoxFit.cover, colorFilter: ColorFilter.mode(Colors.red, BlendMode.colorBurn), ), ), ), placeholder: (context, url) => CircularProgressIndicator(), errorWidget: (context, url, error) => Icon(Icons.error), ),

I encountered the same error with this code.

However, the issue was resolved when I switched to the following simplified code: CachedNetworkImage( imageUrl: "http://via.placeholder.com/350x150", placeholder: (context, url) => CircularProgressIndicator(), errorWidget: (context, url, error) => Icon(Icons.error), ),

It seems the issue might be related to the imageBuilder. It could be causing images to load sooner than necessary.