Skip to content

ben-milanko/flutter_cached_network_image

 
 

Repository files navigation

Cached network image

Widget now uses builders for the placeholder and error widget and uses sqflite for cache management. See the docs for more information.

pub package

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

How to use

The CachedNetworkImage can be used directly or through the ImageProvider. The ImageProvider has very 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),
),

Fetching images from Firebase Storage is supported by passing FirebaseCacheManager to the cacheManager argument. The image URL is replaced with a Firebase Storage path.

CachedNetworkImage(
        cacheManager: FirebaseCacheManager(),
        imageUrl: firebaseReference,
        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.

About

Download, cache and show images in a flutter app

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Dart 88.7%
  • Ruby 9.0%
  • HTML 2.3%