CachedNetworkImage

  • Yes, the cached_network_image package supports optimizing image sizes, but it uses different property names than Flutter’s standard Image widget.
  • Instead of typing cacheWidth and cacheHeight, you must use the properties outlined below to control your memory and storage allocations.

📑 1. To Optimize RAM (The cacheWidth equivalent)

  • To stop high-resolution network images from causing Out-Of-Memory (OOM) app crashes when rendering inside scrolling lists, use memCacheWidth and memCacheHeight.
  • These properties tell Flutter’s engine to download the full file but only decode and hold a small, downsampled thumbnail version of the image in your active runtime device memory.
CachedNetworkImage(
  imageUrl: 'https://example.com',
  fit: BoxFit.cover,
  
  // 🌟 RAM OPTIMIZATION: Decodes the image at 150px wide in RAM.
  // This is the direct equivalent of cacheWidth.
  memCacheWidth: 150, 
  
  placeholder: (context, url) => const CircularProgressIndicator(),
  errorWidget: (context, url, error) => const Icon(Icons.error),
)

📑 2. To Optimize Disk Storage Space

  • If you want to save your user’s physical phone storage space, CachedNetworkImage features another set of parameters called maxWidthDiskCache and maxHeightDiskCache.
  • When these parameters are set, the package scales the image file down before writing it to the local system cache directory.
  • If a user downloads a 5MB profile banner image from your server, setting this property forces the package to resize and save it as a tiny 40KB file instead.
CachedNetworkImage(
  imageUrl: 'https://example.com',
  
  // 🌟 DISK OPTIMIZATION: Resizes the file on the physical device 
  // storage disk down to a maximum bounding footprint box.
  maxWidthDiskCache: 480,
  maxHeightDiskCache: 854,
  
  fit: BoxFit.cover,
)