В Flutter эффективная загрузка и отображение изображений имеет решающее значение для создания плавных и отзывчивых пользовательских интерфейсов. Одним из популярных пакетов, упрощающих эту задачу, является CachedNetworkImage. В этом сообщении блога мы рассмотрим 10 различных методов эффективного использования CachedNetworkImage, попутно предоставляя вам практические примеры кода. Итак, приступим!

Метод 1: базовое использование
Самый простой способ использовать CachedNetworkImage — указать URL-адрес изображения. Пакет автоматически извлекает и кэширует изображение. Вот пример:

CachedNetworkImage(imageUrl: 'https://example.com/image.jpg')

Метод 2: заполнители и виджеты ошибок
Вы можете указать собственные виджеты, которые будут отображаться во время загрузки изображения или в случае возникновения ошибки. Это полезно для обеспечения лучшего пользовательского опыта. Посмотрите этот фрагмент кода:

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

Метод 3: стратегии кэширования
CachedNetworkImage позволяет вам контролировать способ кэширования изображений. Вы можете выбирать различные стратегии кэширования, например кэширование изображений только в памяти или на диске. Вот пример:

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  cacheManager: CacheManager(
    Config(
      storageBucketName: 'my_bucket',
      maxAgeCacheObject: Duration(days: 7),
    ),
  ),
)

Метод 4: собственный ключ кэша
Вы можете предоставить CachedNetworkImage собственный ключ кэша, чтобы иметь больший контроль над процессом кэширования. Это полезно, когда один и тот же URL-адрес изображения может привести к разному содержимому изображения. Вот как это работает:

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  cacheManager: CacheManager(
    Config(
      keyBuilder: (url) => url.toString() + 'custom_key',
    ),
  ),
)

Метод 5: заголовки изображений
Если URL-адреса изображений требуют определенных заголовков для аутентификации или других целей, CachedNetworkImage позволяет передавать пользовательские заголовки. Вот пример:

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  httpHeaders: {'Authorization': 'Bearer my_token'},
)

Метод 6: анимация кроссфейда
Вы можете добавить плавную анимацию кроссфейда при загрузке или изменении изображения. Это может улучшить визуальный опыт. Посмотрите этот фрагмент кода:

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  fadeInDuration: Duration(milliseconds: 500),
  fadeOutDuration: Duration(milliseconds: 500),
)

Метод 7: манипулирование изображениями
CachedNetworkImage поддерживает различные параметры манипулирования изображениями, такие как изменение размера, обрезка и применение фильтров. Он использует мощную библиотеку манипуляций с изображениями под названием flutter_advanced_networkimage. Вот пример:

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  imageBuilder: (context, imageProvider) => Image(
    image: imageProvider,
    fit: BoxFit.cover,
    alignment: Alignment.topCenter,
    filterQuality: FilterQuality.high,
  ),
)

Метод 8. Предварительная загрузка изображений
Чтобы повысить производительность, вы можете предварительно загрузить изображения, чтобы они были готовы к отображению при необходимости. Для этой цели CachedNetworkImage предоставляет метод предварительного кэширования. Вот как вы можете его использовать:

CachedNetworkImageProvider('https://example.com/image.jpg').resolve(
  CachedNetworkImageConfiguration(preload: true),
);

Метод 9: собственный менеджер кэша
Вы можете создать собственный менеджер кэша, расширив класс BaseCacheManager. Это позволяет вам реализовать собственную логику кэширования, например, использовать другой сервер хранения. Вот пример:

class MyCacheManager extends BaseCacheManager {
  MyCacheManager() : super('my_cache_key');
  @override
  Future<String> getFilePath() async {
    // Implement your logic to get the file path
  }
}
CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  cacheManager: MyCacheManager(),
)

Метод 10: обработка ошибок и повторная попытка
CachedNetworkImage предоставляет обратные вызовы для обработки ошибок и повторной попытки загрузки изображений. Это полезно в сценариях, где вы хотите отобразить пользовательское сообщение об ошибке или повторить загрузку после определенной задержки. Посмотрите этот пример: