Cached Image

A widget that displays an image loaded from a URL with caching support. The C2CCachedImage widget is used to display an image loaded from a URL.

It supports caching of the image using the flutter_cache_manager package. The image is fetched from the URL and stored in the cache for future use.

The C2CCachedImage widget provides various options for customizing the image display, such as size, fit, alignment, placeholder image, error image, and fade animation.

Installation

cpub add c2c_cached_image

or

flutter pub add c2c_cached_image --hosted-url=https://pub.csp.scrum-dev.com

Example usage:

// Normal image
const C2CCachedImage(
  size: Size(double.infinity, 250),
  imageUrl: 'https://example.com/your_image.jpg',
  errorImage: AssetImage('assets/images/noAvatar.png'),
  placeholderImage: AssetImage('assets/images/loading.png'),
)

// Circle image
const C2CCachedImage(
  size: Size.square(200),
  imageUrl: 'https://example.com/your_image.jpg',
  errorImage: AssetImage('assets/images/noAvatar.png'),
  placeholderImage: AssetImage('assets/images/loading.png'),
  shape: BoxShape.circle,
)

// Show image with min/max size
const C2CCachedImage(
  constraints: BoxConstraints(
    minWidth: 150,
    maxWidth: 250,
    minHeight: 150,
    maxHeight: 250,
  ),
  imageUrl: 'https://example.com/your_image.jpg',
  placeholderImage: AssetImage('assets/images/noAvatar.png'),
  isShowPlaceholderWhenError: true,
)

Properties

Property	Description	Type
imageUrl	The URL of the target image.	String
scale	The scale of the image.	double
headers	HTTP headers for the image request.	Map<String, String>
cacheManager	Custom cache manager for handling image caching.	BaseCacheManager
cacheKey	The cache key for the image.	String?
size	The size of the image. Size(width, height). Default is: Size(40,40)	Size?
constraints	Minimum and maximum size constraints for the image.	BoxConstraints?
shape	The shape of the image container. (rectangle or circle). Default: BoxShape.rectangle	BoxShape
fit	How to inscribe the image into the allocated space. Default: BoxFit.cover	BoxFit
filterQuality	The rendering quality of the image.	FilterQuality
alignment	How to align the image within its bounds.	AlignmentGeometry
repeat	How to repeat the image if it doesn't cover the entire space.	ImageRepeat
backgroundColor	The background color of the image container.	Color?
placeholderImage	Image to display while the target image is loading.	ImageProvider?
placeholderImageFit	How to fit the placeholder image.	BoxFit?
placeholderImageFilterQuality	Rendering quality of the placeholder image.	FilterQuality?
placeholderImageBuilder	Builder function for the placeholder.	Widget Function(BuildContext)?
isShowPlaceholderWhenError	Whether to show the placeholder when an error occurs.	bool?
errorImage	Image to display if an error occurs during loading.	ImageProvider?
errorImageFit	How to fit the error image.	BoxFit?
errorImageFilterQuality	Rendering quality of the error image.	FilterQuality?
errorImageBuilder	Builder function for the error image.	Widget Function(BuildContext)?
isFadeEnabled	Enable or disable fade-in/out animations.	bool?
fadeOutDuration	Duration of the fade-out animation for the placeholder image.	Duration
fadeOutCurve	Curve of the fade-out animation for the placeholder image.	Curve
fadeInDuration	Duration of the fade-in animation for the target image.	Duration
fadeInCurve	Curve of the fade-in animation for the target image.	Curve
matchTextDirection	Whether to paint the image based on text direction.	bool
excludeFromSemantics	Whether to exclude the image from semantics.	bool
imageSemanticLabel	A semantic description of the image.	String?

Preloading Images

You can use the preload method to preload a list of images before they are displayed in your Flutter app. This can help improve the user experience by loading images in the background. Here's an example of how to use the preload method:

List<SourceItem> sources = [
  SourceItem(url: 'https://example.com/image1.jpg'),
  SourceItem(url: 'https://example.com/image2.jpg'),
  SourceItem(url: 'https://example.com/image3.jpg'),
];

Future<void> preloadImages() async {
  List<File> images = await C2CCachedImage.preload(sources);
  // You can now use the preloaded images as needed
  // For example, you can display them using the Image widget.
  // images[0] corresponds to the preloaded image for source 1, and so on.
}

Removing Cached Images

You can use the removeItem method to remove a cached image by its cache key. This can be useful if you want to clear specific images from the cache. Here's an example of how to use the removeItem method:

String cacheKeyToRemove = 'custom_cache_key';

void removeCachedImage() {
  C2CCachedImage.removeItem(cacheKeyToRemove);
}