Hola, Amigos! На связи Павел Гершевич, Mobile Team Lead в Amiga. Сегодня мы поговорим про то, как лучше всего кешировать картинки и в каком качестве их выводить на экран.

Часто случается ситуация, что сервер отдает слишком большую картинку. А уж если их несколько на одном экране - могут возникнуть проблемы с производительностью, да и размер кеша может значительно вырасти.

Как и все, для кеширования и отображения картинок с интернета, мы используем хорошо знакомую всем библиотеку cached_network_image. Но не все знают, что при помощи нее можно настроить максимальный размер изображения, который будет закеширован и показан на экране. Для этого есть 4 свойства:

maxHeightDiskCache: 300,
maxWidthDiskCache: 300,
memCacheHeight: 300,
memCacheWidth: 300,

Давайте разберемся с ними:

maxHeightDiskCache и maxWidthDiskCache отвечают за кеш, который хранится в постоянной памяти. Уменьшая его размер, мы уменьшаем количество данных на устройстве пользователя.

memCacheHeight и memCacheWidth отвечают за изображение, которое хранится в ОЗУ и выводится пользователю. Делается это при помощи встроенного в Flutter виджета - ResizeImage. Похожие свойства есть и в Image.network - cacheHeight и cacheWidth. Тут мы указываем именно размер виджета, а не изображения.

Теперь давайте рассмотрим, как их использовать. Для того, чтобы правильно подобрать размер, нам нужны: ширина и высота виджета и Device Pixel Ratio - характеристика устройства, которая показывает плотность пикселей. Если размер нам неизвестен либо высчитывается автоматически, то можно прибегнуть к получению constraints через LayoutBuilder. В итоге у нас получается такой код:

LayoutBuilder((context, constraints) {
  final devicePixelRatio = MediaQuery.devicePixelRatioOf(context);
  final cacheHeight = constraints.maxHeight * devicePixelRatio;
  final cacheWidth = constraints.maxWidth * devicePixelRatio;
  return CachedNetworkImage(
    …
    maxHeightDiskCache: cacheHeight,
    maxWidthDiskCache: cacheWidth,
    memCacheHeight: constraints.maxHeight,
    memCacheWidth: constraints.maxWidth,
    …
  );
});

Делитесь в комментариях, пробовали ли вы такой способ оптимизации производительности приложения?