🗣️Привет! С вами Анна, Flutter Team Lead Friflex.

Поговорим об одном из самых распространенных плагинов для Flutter-приложений — cached_network_image. Думаю, уже многие с ним знакомы, но сегодня разберем как эффективно использовать его функционал.

cached_network_image — это плагин, который позволяет не только загружать и отображать изображения из сети, но кэшировать их на устройстве. Эта функция является его главным преимуществом перед стандартным Image.network.

Для его использования достаточно добавить в верстку виджет CachedNetworkImage и передать ему ссылку на изображение в поле imageUrl.

CachedNetworkImage(
  imageUrl: url,
),

Как мы все знаем, загрузка изображений из сети может занимать некоторое время, поэтому рекомендую добавлять индикатор загрузки. Самый простой вариант — использовать placeholder. Сюда вы можете добавить любой виджет для отображения загрузки, например, кастомный скелетон.

CachedNetworkImage(
  imageUrl: url,
  placeholder: (context, url) => const AppSkeleton(),
),

Если вам необходимо отображать прогресс загрузки, идеальным решением вместо placeholder станет progressIndicatorBuilder. Он с помощью данных класса DownloadProgress даст вам полный доступ к информации о размере изображения и текущему загруженному объему

CachedNetworkImage(
  imageUrl: url,
  progressIndicatorBuilder: (context, url, progress) {
    return AppProgressIndicator(progressValue: progress.progress);
  },
),

Также важно не забывать, что загрузка может прерваться из-за ошибки. На такой случай рекомендую использовать errorWidget, который позволит отобразить заглушку. А для отслеживания самой ошибки будет полезен колбэк errorListener. Он оповестит вас о том, какая возникла ошибка и в какой момент.

CachedNetworkImage(
  imageUrl: url,
  errorWidget: (context, url, error) => AppErrorView(),
  errorListener: (error) => print(error),
),

CachedNetworkImage также имеет очень много дополнительных параметров для оформления изображения, которые могут потребоваться вам для кастомизации. Но еще одна немаловажная функция — это управление кэшем с помощью cacheManager.

Для этого вам потребуется дополнительно подключить в проект flutter_cache_manager. Библиотека дает доступ к объекту DefaultCacheManager, который в свою очередь необходимо передать в CachedNetworkImage.

final cacheManager = DefaultCacheManager();
...
CachedNetworkImage(
  imageUrl: url,
  cacheManager: cacheManager,
),

Теперь через cacheManager можно выполнять всевозможные манипуляции с кэшированными изображениями: извлекать или удалять по ключу, очищать кэш полностью.

await cacheManager.emptyCache(); // полная очистка кэша
await cacheManager.removeFile(key); // удаление конкретного файла из кэша
await cacheManager.getFileFromCache(key); // извлечение конкретного файла из кэша

А если функционала дефолтного менеджера вам недостаточно, можно создать свой кастомный. Он позволит настроить дополнительные параметры по кэшированию, например, срок жизни кэша или максимальное количество объектов в нем.

final customCacheManager = CacheManager(
  Config(
    'customCacheKey',
    stalePeriod: const Duration(days: 7), // срок жизни кэша
    maxNrOfCacheObjects: 100, // максимальное количество объектов в кэше
  )
 );
...
CachedNetworkImage(
  imageUrl: url,
  cacheManager: customCacheManager,
),

❤️ — если было полезно