Cached network image

A flutter library to show images from the internet and keep them in the cache directory.

Sponsors

Try the Flutter Chat Tutorial 💬

How to use

The CachedNetworkImage can be used directly or through the ImageProvider. Both the CachedNetworkImage as CachedNetworkImageProvider have minimal support for web. It currently doesn't include caching.

With a placeholder:

CachedNetworkImage(
        imageUrl: "http://via.placeholder.com/350x150",
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
     ),

Or with a progress indicator:

CachedNetworkImage(
       imageUrl: "http://via.placeholder.com/350x150",
       progressIndicatorBuilder: (context, url, downloadProgress) => 
               CircularProgressIndicator(value: downloadProgress.progress),
       errorWidget: (context, url, error) => Icon(Icons.error),
    ),

Image(image: CachedNetworkImageProvider(url))

When you want to have both the placeholder functionality and want to get the imageprovider to use in another widget you can provide an imageBuilder:

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),
),

How it works

The cached network images stores and retrieves files using the flutter_cache_manager.

How to test

By default CachedNetworkImage uses DefaultCacheManager, which is great to get you up and running quickly without any configuration.

However, when testing widgets that use it you might run into an error such as this:

Warning: At least one test in this suite creates an HttpClient. 
When running a test suite that uses TestWidgetsFlutterBinding, 
all HTTP requests will return status code 400, and no network request 
will actually be made. Any test expecting a real network connection 
and status code will fail. To test code that needs an HttpClient, 
provide your own HttpClient implementation to the code under test, 
so that your test can consistently provide a testable response to 
the code under test.

One way to fix this is by providing a mock. For example, using mocktail:

class _MockCacheManager extends Mock implements BaseCacheManager {}
// ...
setUp(() {
  CachedNetworkImageProvider.defaultCacheManager = _MockCacheManager();
});

Note that you will need to mock the default cache manager for any test for a widget that contains a CachedNetworkImage instance in its tree of children.

FAQ

My app crashes when the image loading failed. (I know, this is not really a question.)

Does it really crash though? The debugger might pause, as the Dart VM doesn't recognize it as a caught exception; the console might print errors; even your crash reporting tool might report it (I know, that really sucks). However, does it really crash? Probably everything is just running fine. If you really get an app crashes you are fine to report an issue, but do that with a small example so we can reproduce that crash.

See for example this or this answer on previous posted issues.