Flutter: ImageCache from Network make application crash - Warning database has been locked for 0:00:10.000000. Make sure you always use

Question

I have a listview with Cards containing images I load from a CDN. I get 20 new products when the scroll is at 50% of the page (paging). However, after some time it always crash.

Could it be due to to big images? Some images isn't uploaded yet and return 404. The pictures sometimes also blinks and is reloaded.

Using following package, recommended by flutter:https://github.com/renefloor/flutter_cached_network_image

Code:

Container(
    padding: EdgeInsets.only(
    top: MediaQuery.of(context).size.height * 0.02),
    width: MediaQuery.of(context).size.width * 0.3,
    child: CachedNetworkImage(
    placeholder: (context, url) => Container(
    padding: EdgeInsets.only(
        top: MediaQuery.of(context).size.height *
            0.05),
    child: placeholder,
    ),
    imageUrl: widget.product.pictureUrl,
)

Stacktrace:

MultiFrameImageStreamCompleter._decodeNextFrameAndSchedule (image_stream.dart:680)
MultiFrameImageStreamCompleter._handleCodecReady (image_stream.dart:644)
FileImage._loadAsync (image_provider.dart)
FileImage.load (image_provider.dart:638)
ImageProvider.resolve.<fn>.<fn>.<fn> (image_provider.dart:327)
ImageCache.putIfAbsent (image_cache.dart:160)
ImageProvider.resolve.<fn>.<fn> (image_provider.dart:325)
SynchronousFuture.then (synchronous_future.dart:38)
ImageProvider.resolve.<fn> (image_provider.dart:323)
ImageProvider.resolve (image_provider.dart:315)
_ImageState._resolveImage (image.dart:1010)
_ImageState.didChangeDependencies (image.dart:967)
StatefulElement._firstBuild (framework.dart:4376)
ComponentElement.mount (framework.dart:4201)
Element.inflateWidget (framework.dart:3194)
Element.updateChild (framework.dart:2988)
SingleChildRenderObjectElement.mount (framework.dart:5445)
Element.inflateWidget (framework.dart:3194)
MultiChildRenderObjectElement.mount (framework.dart:5551)
Element.inflateWidget (framework.dart:3194)

Edit1:

After some investigation have I found that if I use same picture everywhere (can be high res) it works fine. So either is it some pictures that could be corrupt or it has a hard time with many different pictures?

Edit2: One of the ouputs which happen at the crash is following:

I/flutter ( 5858): Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction

Also feels more and more related to the 404 images. Is the cache locked?

Solution

I changed code to following:

FadeInImage(
  placeholder: MemoryImage(kTransparentImage),
  image: new CachedNetworkImageProvider(
      widget.product.pictureUrl),
))

I also changed the list where all pictures is shown:

SliverGridDelegateWithFixedCrossAxisCount(
    childAspectRatio: _aspectRatio, crossAxisCount: 2),
    itemCount: widget.products.length,
    addAutomaticKeepAlives: false,
    itemBuilder: (context, index) {
      return ProductCard(
          showProductFunction: showProductFunction,
          product: widget.products[index]);
    },

Property that may had some impact:

addAutomaticKeepAlives: false

But the major thing was to go through all images:

• All images exist (no 404)
• All images is max 500x500 (before some where 4000x4000)
• All images is now compressed

Comments

[Navin Kumar]

use errorWidget: (context, url, error) => Icon(Icons.error), on url fails this icon will be shown

[Viktor Morin]

@NavinKumar I had that code before but not difference. I removed it since I used the same icon for error as placeholder so was just one extra redraw which I don't need.