[{"data":1,"prerenderedAt":69},["ShallowReactive",2],{"tutorial-cache-di-immagini-di-rete-in-flutter-con-cached-network-image":3,"comments-tutorial-cache-di-immagini-di-rete-in-flutter-con-cached-network-image":68},{"id":4,"title":5,"slug":6,"excerpt":7,"intro":8,"cover_image":9,"video_url":10,"difficulty":11,"estimated_minutes":12,"flutter_version":13,"status":14,"published_at":15,"meta_title":16,"meta_description":17,"category":18,"author":22,"steps":24},16,"Cache di immagini di rete in Flutter con cached_network_image","cache-di-immagini-di-rete-in-flutter-con-cached-network-image","Impara a caricare, memorizzare nella cache e gestire immagini di rete in Flutter usando il pacchetto cached_network_image, con placeholder e gestione degli errori.","Caricare immagini da internet è un'operazione comune in quasi tutte le app, ma scaricarle ogni volta che un widget viene ricostruito spreca banda e rallenta l'interfaccia. Il pacchetto `cached_network_image` risolve questo problema memorizzando le immagini in cache su disco, mostrando placeholder durante il caricamento e gestendo eventuali errori.\n\nIn questo tutorial vedremo come integrarlo in un progetto Flutter, configurare placeholder e widget di errore, applicare effetti di dissolvenza e gestire la cache manualmente.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Ftutorials\u002Fc5fe7468-24cf-4018-addb-916bd37dba00.jpg",null,"beginner",25,"3.x","published","2026-06-22T07:34:12+00:00","Cache immagini in Flutter con cached_network_image","Guida pratica per caricare e mettere in cache immagini di rete in Flutter con cached_network_image: placeholder, errori e gestione della cache.",{"id":19,"name":20,"slug":21},1,"Guide","guide",{"id":19,"name":23},"Flutter Bot",[25,32,40,47,54,61],{"id":26,"position":19,"title":27,"body":28,"code_snippet":29,"code_language":30,"expected_result":31,"demo_url":10,"video_url":10},111,"Aggiungere la dipendenza al progetto","Per prima cosa aggiungiamo il pacchetto `cached_network_image` al file `pubspec.yaml`. Puoi farlo manualmente oppure tramite riga di comando.\n\nDa terminale, nella cartella del progetto, esegui:\n\n```bash\nflutter pub add cached_network_image\n```\n\nIn alternativa aggiungi la riga nella sezione `dependencies` del `pubspec.yaml` e poi lancia `flutter pub get`.","dependencies:\n  flutter:\n    sdk: flutter\n  cached_network_image: ^3.3.1","yaml","Il pacchetto viene scaricato e diventa disponibile per l'import nel progetto.",{"id":33,"position":34,"title":35,"body":36,"code_snippet":37,"code_language":38,"expected_result":39,"demo_url":10,"video_url":10},112,2,"Mostrare un'immagine di base","Importiamo il pacchetto e usiamo il widget `CachedNetworkImage` al posto del classico `Image.network`. Alla prima esecuzione l'immagine viene scaricata e salvata in cache; alle successive viene letta direttamente dal disco, molto più velocemente.","import 'package:flutter\u002Fmaterial.dart';\nimport 'package:cached_network_image\u002Fcached_network_image.dart';\n\nclass ImmagineDemo extends StatelessWidget {\n  const ImmagineDemo({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(title: const Text('Cache Immagini')),\n      body: Center(\n        child: CachedNetworkImage(\n          imageUrl: 'https:\u002F\u002Fpicsum.photos\u002F400\u002F300',\n          width: 400,\n          height: 300,\n          fit: BoxFit.cover,\n        ),\n      ),\n    );\n  }\n}","dart","L'immagine viene mostrata e, dopo il primo caricamento, appare istantaneamente alle riaperture.",{"id":41,"position":42,"title":43,"body":44,"code_snippet":45,"code_language":38,"expected_result":46,"demo_url":10,"video_url":10},113,3,"Aggiungere placeholder e gestione degli errori","Un buon UX prevede di mostrare un indicatore durante il caricamento e un'icona di errore se l'immagine non è disponibile. Usiamo le proprietà `placeholder` ed `errorWidget`.\n\n- `placeholder`: widget mostrato durante il download.\n- `errorWidget`: widget mostrato se il caricamento fallisce (URL errato, assenza di rete, ecc.).","CachedNetworkImage(\n  imageUrl: 'https:\u002F\u002Fpicsum.photos\u002F400\u002F300',\n  width: 400,\n  height: 300,\n  fit: BoxFit.cover,\n  placeholder: (context, url) => const Center(\n    child: CircularProgressIndicator(),\n  ),\n  errorWidget: (context, url, error) => const Icon(\n    Icons.broken_image,\n    size: 48,\n    color: Colors.grey,\n  ),\n)","Durante il download appare uno spinner; con un URL non valido appare l'icona di immagine rotta.",{"id":48,"position":49,"title":50,"body":51,"code_snippet":52,"code_language":38,"expected_result":53,"demo_url":10,"video_url":10},114,4,"Applicare effetti di dissolvenza e barra di progresso","`cached_network_image` supporta una transizione di dissolvenza tra placeholder e immagine. Possiamo regolarne la durata con `fadeInDuration` e `fadeOutDuration`.\n\nPer un caricamento più informativo possiamo usare `progressIndicatorBuilder`, che fornisce il progresso del download (`downloaded`\u002F`totalSize`) e ci permette di mostrare una percentuale reale.","CachedNetworkImage(\n  imageUrl: 'https:\u002F\u002Fpicsum.photos\u002F600\u002F400',\n  fit: BoxFit.cover,\n  fadeInDuration: const Duration(milliseconds: 500),\n  progressIndicatorBuilder: (context, url, progress) => Center(\n    child: CircularProgressIndicator(\n      value: progress.progress, \u002F\u002F null finché non si conosce la dimensione totale\n    ),\n  ),\n  errorWidget: (context, url, error) => const Icon(Icons.error),\n)","L'immagine appare con una transizione fluida e, quando disponibile, viene mostrata la percentuale di download.",{"id":55,"position":56,"title":57,"body":58,"code_snippet":59,"code_language":38,"expected_result":60,"demo_url":10,"video_url":10},115,5,"Usare l'immagine in cache come decorazione","A volte serve un'immagine di rete come sfondo di un container o dentro un `CircleAvatar`. In questi casi non possiamo usare il widget direttamente, ma il provider `CachedNetworkImageProvider`, che si integra con `DecorationImage` e con `backgroundImage`.","\u002F\u002F Sfondo di un Container\nContainer(\n  width: 200,\n  height: 200,\n  decoration: BoxDecoration(\n    borderRadius: BorderRadius.circular(16),\n    image: DecorationImage(\n      image: CachedNetworkImageProvider('https:\u002F\u002Fpicsum.photos\u002F200'),\n      fit: BoxFit.cover,\n    ),\n  ),\n)\n\n\u002F\u002F Avatar circolare\nCircleAvatar(\n  radius: 40,\n  backgroundImage:\n      CachedNetworkImageProvider('https:\u002F\u002Fi.pravatar.cc\u002F150'),\n)","L'immagine viene riutilizzata dalla cache anche come sfondo o avatar, senza nuovi download.",{"id":62,"position":63,"title":64,"body":65,"code_snippet":66,"code_language":38,"expected_result":67,"demo_url":10,"video_url":10},116,6,"Gestire e svuotare la cache","Per liberare spazio o forzare il refresh delle immagini, puoi gestire la cache tramite `DefaultCacheManager` del pacchetto `flutter_cache_manager` (dipendenza di `cached_network_image`).\n\nÈ utile, ad esempio, in un pulsante \"Pulisci cache\" nelle impostazioni dell'app. Puoi rimuovere una singola immagine con `removeFile(url)` oppure svuotare tutto con `emptyCache()`.","import 'package:flutter_cache_manager\u002Fflutter_cache_manager.dart';\n\n\u002F\u002F Rimuove dalla cache una singola immagine\nFuture\u003Cvoid> rimuoviImmagine(String url) async {\n  await DefaultCacheManager().removeFile(url);\n}\n\n\u002F\u002F Svuota completamente la cache delle immagini\nFuture\u003Cvoid> svuotaCache() async {\n  await DefaultCacheManager().emptyCache();\n}\n\n\u002F\u002F Esempio di pulsante\nElevatedButton.icon(\n  onPressed: svuotaCache,\n  icon: const Icon(Icons.delete),\n  label: const Text('Pulisci cache'),\n)","Dopo lo svuotamento, le immagini verranno scaricate nuovamente dalla rete al prossimo utilizzo.",[],1785219611551]