optimized_cached_image 2.0.0

A library for loading images from network, resizing as per container size and caching while being memory sensitive.

Optimized Cached Image

A flutter library for loading images from network, resizing and caching them for memory sensitivity. This resizes and stores the images in cache based on parent container constraints and hence loads images of lower size into memory. This is heavily inspired by cached_network_image library.

This library exposes two classes for loading images

• OptimizedCacheImage which is a 1:1 mapping of CachedNetworkImage.
• OptimizedCacheImageProvider which is a mapping of CachedNetworkImageProvider.

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.

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

and that's it, you don't need to specify any explicit sizes images will be loaded based on available space in the container. However In case you feel auto size doesn't work for you feel free to specify width and height params.

If you're using the provider you'd have to specify cacheWidth or cacheHeight in order for resize to work. You can wrap it inside LayoutBuilder or specify an explicity size

LayoutBuilder(builder: (_, constraints) {
  Image(image: OptimizedCacheImageProvider(url, cacheWidth:constraints.maxWidth))
})

or

Image(image: OptimizedCacheImageProvider(url, cacheWidth:100))

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:

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

Advanced Usage

This library modifies/appends url query params to demarcate different sizes. In case your image urls have a preexisting query parameters that clash with the ones this library internally uses to identify image sizes namely oci_width and oci_height, all you need to do is instantiate the ImageCacheManager with a ImageCacheConfig which accepts custom query keys which the library can use along with a few other params.

Note: Ensure ImageCacheManager is instantiated with this config before any load happens.

To instantiate:

ImageCacheManager.init(ImageCacheConfig(widthKey:"custom-width", heightKey:"custom-height", storagePath: directoryFuture()))

In order to disable using cache resizing just toggle the flag useScaleCacheManager in (OptimizedCacheImage/ OptimizedCacheImageProvider) and it will pick your custom manager or the default one in the system rather using ImageCacheManager.

How it works

This library appends query params to the url keys for which are in ImageCacheConfig and interprets them while resizing. The optimized cached image stores and retrieves files using the flutter_cache_manager. The optimized cached image resizes files using the flutter_image_compress.

For detailed usage about all the params check out the parent project from which this was ported.

TODO

This library is a WIP. A few things that are going to be worked on are.

• Prevent same url from being downloaded multiple times for different image sizes. Done
• Cleanup code.
• Introduce a better memory caching scheme.