[{"data":1,"prerenderedAt":22},["ShallowReactive",2],{"articolo-caching-delle-immagini-in-flutter-con-cached-network-image":3,"comments-article-caching-delle-immagini-in-flutter-con-cached-network-image":21},{"id":4,"title":5,"slug":6,"excerpt":7,"body":8,"cover_image":9,"video_url":10,"status":11,"published_at":12,"meta_title":13,"meta_description":14,"category":15,"author":19},20,"Caching delle immagini in Flutter con cached_network_image","caching-delle-immagini-in-flutter-con-cached-network-image","Scopri come gestire in modo efficiente il caricamento e la cache delle immagini di rete in Flutter, migliorando performance e UX con cached_network_image, placeholder, gestione errori e configurazioni avanzate.","## Perché il caching delle immagini è importante\n\nIn molte app Flutter le immagini provengono da URL remoti: avatar, copertine, gallerie di prodotti. Caricare ogni volta queste immagini dalla rete è costoso in termini di banda, batteria e tempi di attesa. Senza una cache adeguata, scorrere una lista comporta richieste HTTP ripetute e fastidiosi sfarfallii.\n\nIl widget `Image.network` di Flutter offre una cache solo in memoria, che viene svuotata alla chiusura dell'app e quando la pressione di memoria aumenta. Per una soluzione robusta, con cache anche su disco, la libreria di riferimento è **cached_network_image**.\n\n## Installazione\n\nAggiungi la dipendenza al tuo `pubspec.yaml`:\n\n```yaml\ndependencies:\n  cached_network_image: ^3.4.1\n```\n\nPoi esegui `flutter pub get`.\n\n## Utilizzo di base\n\nNel caso più semplice basta sostituire `Image.network` con `CachedNetworkImage`:\n\n```dart\nimport 'package:cached_network_image\u002Fcached_network_image.dart';\n\nCachedNetworkImage(\n  imageUrl: 'https:\u002F\u002Fexample.com\u002Ffoto.jpg',\n  placeholder: (context, url) => const CircularProgressIndicator(),\n  errorWidget: (context, url, error) => const Icon(Icons.error),\n)\n```\n\nLa prima volta l'immagine viene scaricata e salvata su disco; le volte successive viene letta direttamente dalla cache locale, in modo quasi istantaneo.\n\n## Placeholder e gestione degli errori\n\nUno dei vantaggi principali è la possibilità di mostrare contenuti diversi durante il caricamento e in caso di errore. Per migliorare la UX si può usare un effetto shimmer o un'immagine di fallback:\n\n```dart\nCachedNetworkImage(\n  imageUrl: imageUrl,\n  fadeInDuration: const Duration(milliseconds: 300),\n  placeholder: (context, url) => Container(\n    color: Colors.grey.shade300,\n  ),\n  errorWidget: (context, url, error) => Image.asset(\n    'assets\u002Fplaceholder.png',\n    fit: BoxFit.cover,\n  ),\n  fit: BoxFit.cover,\n)\n```\n\nIl parametro `fadeInDuration` permette una transizione morbida quando l'immagine appare, evitando l'effetto \"a scatto\".\n\n## Usare l'immagine come provider\n\nA volte serve un `ImageProvider` invece di un widget, ad esempio per un `CircleAvatar` o un `DecorationImage`. In questo caso si usa `CachedNetworkImageProvider`:\n\n```dart\nCircleAvatar(\n  radius: 24,\n  backgroundImage: CachedNetworkImageProvider(avatarUrl),\n)\n```\n\n```dart\nContainer(\n  decoration: BoxDecoration(\n    image: DecorationImage(\n      image: CachedNetworkImageProvider(coverUrl),\n      fit: BoxFit.cover,\n    ),\n  ),\n)\n```\n\n## Ridimensionamento e memoria\n\nUn errore comune è caricare immagini ad alta risoluzione in spazi piccoli, sprecando memoria. Con `memCacheWidth` e `memCacheHeight` si può decodificare l'immagine a una dimensione ridotta:\n\n```dart\nCachedNetworkImage(\n  imageUrl: thumbnailUrl,\n  memCacheWidth: 200,\n  memCacheHeight: 200,\n  fit: BoxFit.cover,\n)\n```\n\nQuesto riduce significativamente il consumo di RAM, soprattutto in liste e griglie con molte immagini.\n\n## Configurare la cache\n\nDietro le quinte, cached_network_image usa il pacchetto **flutter_cache_manager**. È possibile personalizzare durata e dimensione massima della cache creando un cache manager dedicato:\n\n```dart\nimport 'package:flutter_cache_manager\u002Fflutter_cache_manager.dart';\n\nclass CustomCacheManager {\n  static const key = 'customCache';\n\n  static final instance = CacheManager(\n    Config(\n      key,\n      stalePeriod: const Duration(days: 7),\n      maxNrOfCacheObjects: 200,\n    ),\n  );\n}\n```\n\nE poi passarlo al widget:\n\n```dart\nCachedNetworkImage(\n  imageUrl: imageUrl,\n  cacheManager: CustomCacheManager.instance,\n)\n```\n\nIn questo modo le immagini vengono rimosse dopo 7 giorni e non si superano mai i 200 file in cache.\n\n## Svuotare la cache\n\nÈ utile fornire all'utente un'opzione per liberare spazio, oppure forzare il refresh di un'immagine aggiornata:\n\n```dart\n\u002F\u002F Svuota tutta la cache\nawait DefaultCacheManager().emptyCache();\n\n\u002F\u002F Rimuove una singola immagine\nawait DefaultCacheManager().removeFile(imageUrl);\n```\n\n## Best practice\n\n- Usa sempre `placeholder` ed `errorWidget` per evitare schermate vuote o crash visivi.\n- Imposta `memCacheWidth`\u002F`memCacheHeight` nelle liste per limitare il consumo di memoria.\n- Definisci un `stalePeriod` coerente con la frequenza di aggiornamento dei tuoi contenuti.\n- Per immagini che cambiano spesso allo stesso URL, valuta di aggiungere un parametro di versione o di rimuovere il file dalla cache.\n- Combina con `BoxFit.cover` e un `Container` di sfondo per un layout stabile durante il caricamento.\n\n## Conclusione\n\n`cached_network_image` è una libreria matura e semplice da integrare che migliora sensibilmente performance e percezione di fluidità della tua app. Con poche righe di codice ottieni cache su disco, placeholder, gestione errori e controllo fine sul consumo di memoria: un alleato indispensabile in qualsiasi app che mostri immagini di rete.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Farticles\u002F1fdcb036-ea1b-4bd6-9fb8-a1fa55b0d9fc.jpg",null,"published","2026-06-24T04:00:36+00:00","Caching immagini in Flutter con cached_network_image","Guida pratica al caching delle immagini di rete in Flutter con cached_network_image: placeholder, gestione errori, memoria e configurazione della cache.",{"id":16,"name":17,"slug":18},1,"Guide","guide",{"id":16,"name":20},"Flutter Bot",[],1785219604901]