optimized_cached_image 0.1.14

  • Readme
  • Changelog
  • Example
  • Installing
  • 93

Optimized Cached Image #

pub package

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
  • Cleanup code.

0.1.14 #

  • Fix open socket issue in compression library and allow debug mode.

0.1.13 #

  • Fixed an issue around compression error handling

0.1.12 #

  • Fix issue with stream closure, causing some stream to remain open.

0.1.11 #

  • Revert to original file when compression fails.

0.1.10 #

  • Migrate to latest apis in cache manager dependency. Now the stream fetching is done by default instead of via flag.

0.1.9 #

  • Fix transparency/image format issues.

0.1.8 #

  • Fix dependency version breaking change in flutter cache library.

0.1.7 #

  • Add style fixes

0.1.6 #

  • Add experimental support for streamed downloading via useHttpStream flag which further reduces the memory footprint.

0.1.5 #

  • Minor lint issues and formatting patched.

0.1.4 #

  • Fixed issue faced while specifying custom width and height.

0.1.3 #

  • Readme updated.

0.1.2 #

  • Minor lint issues and formatting patched.

0.1.1 #

  • Updated examples.

0.1.0 #

  • Minimalist/Core functionality of the library and health fixes.

0.0.1 #

  • Minimalist/Core functionality of the library.

example/lib/main.dart

import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:optimized_cached_image/image_cache_manager.dart';
import 'package:optimized_cached_image/widgets.dart';
import 'package:path_provider/path_provider.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final urlPrefix = "https://i.picsum.photos/id/";
  final urlSuffix = "/1000/1000.jpg";

  @override
  void initState() {
    super.initState();

    /// Just a demo of the param(s) in ImageCacheManager,
    /// you don't need to do this unless you wish to customize stuff
    ImageCacheManager.init(ImageCacheConfig(storagePath: path(), enableLog: !kReleaseMode));
  }

  Future<Directory> path() async => (await getExternalCacheDirectories())[0];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Optimized Cached Image Example'),
        ),
        body: Container(
          child: GridView.builder(
            padding: const EdgeInsets.all(20),
            itemCount: 160,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
            itemBuilder: (BuildContext context, int index) {
              return OptimizedCacheImage(
                imageUrl: "https://picsum.photos/id/${(index + 100)}/600/600",
              );
            },
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  optimized_cached_image: ^0.1.14

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:optimized_cached_image/debug_tools.dart';
import 'package:optimized_cached_image/image_cache_manager.dart';
import 'package:optimized_cached_image/image_provider/_image_provider_io.dart';
import 'package:optimized_cached_image/image_provider/_image_provider_web.dart';
import 'package:optimized_cached_image/image_transformer.dart';
import 'package:optimized_cached_image/widgets.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
86
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
93
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package does not support Flutter platform android

Because:

  • package:optimized_cached_image/image_cache_manager.dart that imports:
  • package:optimized_cached_image/image_transformer.dart that imports:
  • package:flutter_cache_manager/flutter_cache_manager.dart that imports:
  • package:flutter_cache_manager/src/cache_manager.dart that imports:
  • package:path_provider/path_provider.dart that imports:
  • package:path_provider_linux/path_provider_linux.dart that declares support for platforms: linux

Package does not support Flutter platform ios

Because:

  • package:optimized_cached_image/image_cache_manager.dart that imports:
  • package:optimized_cached_image/image_transformer.dart that imports:
  • package:flutter_cache_manager/flutter_cache_manager.dart that imports:
  • package:flutter_cache_manager/src/cache_manager.dart that imports:
  • package:path_provider/path_provider.dart that imports:
  • package:path_provider_linux/path_provider_linux.dart that declares support for platforms: linux

Package does not support Flutter platform linux

Because:

  • package:optimized_cached_image/image_cache_manager.dart that imports:
  • package:optimized_cached_image/image_transformer.dart that imports:
  • package:flutter_image_compress/flutter_image_compress.dart that declares support for platforms: android, ios

Package does not support Flutter platform macos

Because:

  • package:optimized_cached_image/image_cache_manager.dart that imports:
  • package:optimized_cached_image/image_transformer.dart that imports:
  • package:flutter_image_compress/flutter_image_compress.dart that declares support for platforms: android, ios

Package does not support Flutter platform web

Because:

  • package:optimized_cached_image/image_cache_manager.dart that imports:
  • package:optimized_cached_image/image_transformer.dart that imports:
  • package:flutter_image_compress/flutter_image_compress.dart that declares support for platforms: android, ios

Package does not support Flutter platform windows

Because:

  • package:optimized_cached_image/image_cache_manager.dart that imports:
  • package:optimized_cached_image/image_transformer.dart that imports:
  • package:flutter_image_compress/flutter_image_compress.dart that declares support for platforms: android, ios

Package not compatible with SDK dart

Because:

  • optimized_cached_image that is a package requiring null.

Health suggestions

Format lib/image_cache_manager.dart.

Run flutter format to format lib/image_cache_manager.dart.

Format lib/image_transformer.dart.

Run flutter format to format lib/image_transformer.dart.

Format lib/widgets.dart.

Run flutter format to format lib/widgets.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.6.2 <3.0.0
flutter 0.0.0
flutter_cache_manager ^1.2.0 1.4.1
flutter_image_compress ^0.7.0 0.7.0
http ^0.12.0+4 0.12.1
path ^1.6.4 1.7.0
path_provider ^1.6.5 1.6.11
pedantic ^1.5.0 1.9.0 1.9.2
uuid ^2.0.4 2.2.0
Transitive dependencies
charcode 1.1.3
clock 1.0.1
collection 1.14.12 1.14.13
convert 2.1.1
crypto 2.1.5
file 5.2.1
http_parser 3.1.4
intl 0.16.1
meta 1.1.8 1.2.2
path_provider_linux 0.0.1+2
path_provider_macos 0.0.4+3
path_provider_platform_interface 1.0.2
platform 2.2.1
plugin_platform_interface 1.0.2
process 3.0.13
rxdart 0.24.1
sky_engine 0.0.99
source_span 1.7.0
sqflite 1.3.1
sqflite_common 1.0.2+1
string_scanner 1.0.5
synchronized 2.2.0+1
term_glyph 1.1.0
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
xdg_directories 0.1.0
Dev dependencies
test 1.9.4