# fast_cached_network_image 1.3.3+5 A flutter package to cache network image easily.You can add beautiful loaders, percentage indicators and error builder. ## Installing ``` export PUB_HOSTED_URL=https://pub.mirror.p-hatan.com flutter pub add 'fast_cached_network_image:1.3.3+5' ``` Published: 2025-02-16T22:06:58.182454Z Expected archive SHA-256: 38e95bef764f7a68937c2d415169ba58fbf1472bbeb093d8ba045f241553aae8 Available in cache; verification: upstream_checksum ## Direct dependencies - dio: ^5.8.0+1 - flutter: map[sdk:flutter] - hive_ce_flutter: ^2.2.0 - uuid: ^4.5.1 ## Package README (untrusted upstream documentation) # Fast Cached Network Image A flutter package to cache network image easily, with loader, error builder, and smooth fade transitions. You can also add beautiful loaders and percentage indicators with the total and download size of the image. Use fast_cached_network_image: 1.2.9 (without "^") for projects with Flutter SDK version < 3.27.1. [![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://pub.dev/packages/fast_cached_network_image) [![pub](https://img.shields.io/pub/v/fast_cached_network_image)](https://pub.dev/packages/fast_cached_network_image) [![dart](https://img.shields.io/badge/dart-pure%20dart-success)](https://pub.dev/packages/fast_cached_network_image) ## Screenshots ![App caching](https://raw.githubusercontent.com/CHRISTOPANANJICKAL/fast_cached_network_image/main/gif%20images/fast-cache.gif) ![Caching with fade in animation](https://raw.githubusercontent.com/CHRISTOPANANJICKAL/fast_cached_network_image/main/gif%20images/images-in-row.gif) ![Caching with progress indicator and image size](https://raw.githubusercontent.com/CHRISTOPANANJICKAL/fast_cached_network_image/main/gif%20images/fast%20cache%204.gif) ![The below gif displays a 30 MB image from cache](https://raw.githubusercontent.com/CHRISTOPANANJICKAL/fast_cached_network_image/main/gif%20images/image-with-shimmer.gif) Use [shimmer](https://pub.dev/packages/shimmer) package to create a beautiful loading widget. ## Usage Import it ```dart import 'package:fast_cached_network_image/fast_cached_network_image.dart'; ``` > This package uses [Hive](https://pub.dev/packages/hive_flutter) as cache container, which uses getApplicationDocumentsDirectory() to get the default path in case subDir is not specified Initialize the cache configuration in the main function. ```dart await FastCachedImageConfig.init(); ``` The init function takes 2 arguments which are subDir, and clearCacheAfter. Both are optional. To set a custom directory for your storage box, you can use [path_provider](https://pub.dev/packages/path_provider) ```dart String storageLocation = (await getApplicationDocumentsDirectory()).path; ``` and then pass the storageLocation to the subDir parameter. The clearCacheAfter property is used to set the Duration after with the cached image will be cleared. By default its set to 7 days, which means an image cached today will be deleted when you open the app after 7 days. Use it as a Widget ```dart child: FastCachedImage(url: url) ``` ## Properties ``` dart errorBuilder: (context, exception, stacktrace) { return Text(stacktrace.toString()); }, ``` errorBuilder property needs to return a widget. This widget will be displayed if there is any error while loading the provided image. ``` dart loadingBuilder: (context, progress) { return Container( color: Colors.yellow, child: Stack( alignment: Alignment.center, children: [ if (progress.isDownloading && progress.totalBytes != null) Text('${progress.downloadedBytes ~/ 1024} / ${progress.totalBytes! ~/ 1024} kb', style: const TextStyle(color: Colors.red)), SizedBox( width: 120, height: 120, child: CircularProgressIndicator(color: Colors.red, value: progress.progressPercentage.value)), ], ), ); }, ``` loadingBuilder property can be used to display a loading widget such as a shimmer. This widget will be displayed while the image is being downloaded and processed. loadingBuilder provides a progress property which can be used to display the image download progress with the size(in bytes) of the image. ```dart fadeInDuration: const Duration(seconds: 1); ``` fadeInDuration property can be use to set the fadeInDuration between the loadingBuilder and the image. Default duration is 500 milliseconds ```dart FastCachedImageConfig.isCached(imageUrl: url)); ``` You can pass in a url to this method and check whether the image in the url is already cached. ```dart FastCachedImageConfig.deleteCachedImage(imageUrl: url); ``` This method deletes the image with given url from cache. ```dart FastCachedImageConfig.clearAllCachedImages(); ``` This method removes all the cached images. This method can be used in situations such as user logout, where you need to clear all the images corresponding to the particular user. If an image had some errors while displaying, the image will be automatically re - downloaded when the image is requested again. FastCachedImage have all other default properties such as height, width etc. provided by flutter. If you want to use an image from cache as image provider, use ```dart FastCachedImageProvider(url); ``` ## Example ```dart import 'package:fast_cached_network_image/fast_cached_network_image.dart'; import 'package:flutter/material.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); await FastCachedImageConfig.init(clearCacheAfter: const Duration(days: 15)); runApp(const MyApp()); } class MyApp extends StatefulWidget { const MyApp({super.key}); @override State createState() => _MyAppState(); } class _MyAppState extends State { String url1 = 'https://www.sefram.com/images/products/photos/hi_res/7202.jpg'; bool isImageCached = false; String? log; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ SizedBox( height: 150, width: 150, child: FastCachedImage( url: url1, fit: BoxFit.cover, fadeInDuration: const Duration(seconds: 1), errorBuilder: (context, exception, stacktrace) { return Text(stacktrace.toString()); }, loadingBuilder: (context, progress) { return Container( color: Colors.yellow, child: Stack( alignment: Alignment.center, children: [ if (progress.isDownloading && progress.totalBytes != null) Text('${progress.downloadedBytes ~/ 1024} / ${progress.totalBytes! ~/ 1024} kb', style: const TextStyle(color: Colors.red)), SizedBox( width: 120, height: 120, child: CircularProgressIndicator(color: Colors.red, value: progress.progressPercentage.value)), ], ), ); }, ), ), const SizedBox(height: 12), Text('Is image cached? = $isImageCached', style: const TextStyle(color: Colors.red)), const SizedBox(height: 12), Text(log ?? ''), const SizedBox(height: 120), MaterialButton( onPressed: () async { setState(() => isImageCached = FastCachedImageConfig.isCached(imageUrl: url1)); }, child: const Text('check image is cached or not'), ), const SizedBox(height: 12), MaterialButton( onPressed: () async { await FastCachedImageConfig.deleteCachedImage(imageUrl: url1); setState(() => log = 'deleted image $url1'); await Future.delayed(const Duration(seconds: 2), () => setState(() => log = null)); }, child: const Text('delete cached image'), ), const SizedBox(height: 12), MaterialButton( onPressed: () async { await FastCachedImageConfig.clearAllCachedImages(); setState(() => log = 'All cached images deleted'); await Future.delayed(const Duration(seconds: 2), () => setState(() => log = null)); }, child: const Text('delete all cached images'), ), ], ), ))); } } ``` Feel free to contribute and support. ## Contributors 🤝 Big thanks go to these wonderful people:

Author: Christo Pananjickal
Contributor: Wouter van Wijk
Contributor: Merdan Atamyradow
Contributor: Steve
Contributor: Suyog Patil
## Package on pub.dev [fast_cached_network_image](https://pub.dev/packages/fast_cached_network_image) ## Changelog ## 0.0.1 * Initial release. ## 0.0.2 * Added functionality to periodically clear the cached files ## 0.0.3 * MIT License updated ## 0.0.4 * Added fade in and out transitions while displaying the image * Added error logging ## 1.0.0-nullsafety.0 * Performance improvements * Added methods to clear all cache * Added method to clear a given image from cache * Added method to check whether a given image exist in cache * Updated loadingBuilder function with the download progress data ## 1.0.1 * Version 1 release ## 1.1.0 * Added web support * Added FastCachedImageProvider class for built in ImageProvider of flutter ## 1.1.1 * Added web support - Removed dart io usage ## 1.2.0 * Added cache key with UID instead of image url ## 1.2.2 * UUID and Dio updated to latest versions ## 1.2.3 * Fixed context mount issue ## 1.2.4 * Added contributors to readme ## 1.2.5 * Fix: logging even when log is disabled when image is deleted ## 1.2.6 * Changed disableErrorLog parameter to showErrorLog ## 1.2.7 * Added headers for the API ## 1.2.8 * Fixed state not available issue * ## 1.2.9 * Added tags * ## 1.3.1+3 * Removed FVM * Switch hive to hive_ce * ## 1.3.2+4 * Switched to Flutter 3.29.0 * ## 1.3.3+5 * Fixed you need to provide a path to store the box issue