[{"data":1,"prerenderedAt":70},["ShallowReactive",2],{"tutorial-caricare-immagini-e-file-in-flutter-con-image-picker-e-file-picker":3,"comments-tutorial-caricare-immagini-e-file-in-flutter-con-image-picker-e-file-picker":69},{"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},11,"Caricare immagini e file in Flutter con image_picker e file_picker","caricare-immagini-e-file-in-flutter-con-image-picker-e-file-picker","Impara a selezionare immagini dalla galleria, scattare foto con la fotocamera e caricare documenti dal dispositivo usando image_picker e file_picker.","# Selezione di immagini e file in Flutter\n\nMolte applicazioni hanno bisogno di accedere a contenuti multimediali o documenti presenti sul dispositivo dell'utente: pensa a un avatar del profilo, all'allegato di un messaggio o al caricamento di un PDF.\n\nIn questo tutorial vedremo come usare due pacchetti molto diffusi:\n\n- **`image_picker`** per scegliere immagini dalla galleria o scattarle con la fotocamera;\n- **`file_picker`** per selezionare file di qualsiasi tipo (PDF, documenti, ecc.).\n\nAffronteremo anche la configurazione dei permessi su Android e iOS e la gestione corretta degli stati (caricamento, errore, annullamento).","https:\u002F\u002Fflutter.it\u002Fstorage\u002Ftutorials\u002F647b5718-7d7f-43f0-9674-95253bd78ade.jpg",null,"intermediate",35,"3.x","published","2026-06-16T04:30:37+00:00","Caricare immagini e file in Flutter | Guida pratica","Tutorial Flutter su image_picker e file_picker: seleziona foto dalla galleria, scatta con la fotocamera e carica documenti con permessi configurati.",{"id":19,"name":20,"slug":21},1,"Guide","guide",{"id":19,"name":23},"Flutter Bot",[25,32,40,48,55,62],{"id":26,"position":19,"title":27,"body":28,"code_snippet":29,"code_language":30,"expected_result":31,"demo_url":10,"video_url":10},77,"Aggiungere le dipendenze","Aggiungi i pacchetti `image_picker` e `file_picker` al tuo progetto.\n\nPuoi farlo da terminale con i comandi seguenti, oppure modificando manualmente il `pubspec.yaml`.","flutter pub add image_picker\nflutter pub add file_picker","bash","Le dipendenze compaiono nel file pubspec.yaml e `flutter pub get` viene eseguito senza errori.",{"id":33,"position":34,"title":35,"body":36,"code_snippet":37,"code_language":38,"expected_result":39,"demo_url":10,"video_url":10},78,2,"Configurare i permessi nativi","Su **iOS** devi dichiarare gli usi della fotocamera e della libreria foto nel file `ios\u002FRunner\u002FInfo.plist`, altrimenti l'app va in crash al primo accesso.\n\nSu **Android** `image_picker` (versioni recenti) e `file_picker` generalmente non richiedono permessi runtime aggiuntivi per la galleria, ma assicurati che `compileSdkVersion` sia aggiornato.","\u003C!-- ios\u002FRunner\u002FInfo.plist -->\n\u003Ckey>NSCameraUsageDescription\u003C\u002Fkey>\n\u003Cstring>L'app usa la fotocamera per scattare foto del profilo.\u003C\u002Fstring>\n\u003Ckey>NSPhotoLibraryUsageDescription\u003C\u002Fkey>\n\u003Cstring>L'app accede alla galleria per selezionare le immagini.\u003C\u002Fstring>","xml","Le chiavi sono presenti nell'Info.plist; l'app non crasha quando apre fotocamera o galleria su iOS.",{"id":41,"position":42,"title":43,"body":44,"code_snippet":45,"code_language":46,"expected_result":47,"demo_url":10,"video_url":10},79,3,"Selezionare un'immagine dalla galleria","Creiamo un metodo che usa `ImagePicker` per scegliere un'immagine. Il risultato è un `XFile` (può essere `null` se l'utente annulla).\n\nManteniamo il file selezionato in una variabile di stato per poterlo mostrare.","import 'dart:io';\nimport 'package:flutter\u002Fmaterial.dart';\nimport 'package:image_picker\u002Fimage_picker.dart';\n\nclass MediaPage extends StatefulWidget {\n  const MediaPage({super.key});\n\n  @override\n  State\u003CMediaPage> createState() => _MediaPageState();\n}\n\nclass _MediaPageState extends State\u003CMediaPage> {\n  final ImagePicker _picker = ImagePicker();\n  File? _immagine;\n\n  Future\u003Cvoid> _scegliDallaGalleria() async {\n    final XFile? file = await _picker.pickImage(\n      source: ImageSource.gallery,\n      imageQuality: 80,\n      maxWidth: 1080,\n    );\n    if (file != null) {\n      setState(() => _immagine = File(file.path));\n    }\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return const Placeholder();\n  }\n}","dart","Chiamando `_scegliDallaGalleria` si apre la galleria e l'immagine scelta viene salvata in `_immagine`.",{"id":49,"position":50,"title":51,"body":52,"code_snippet":53,"code_language":46,"expected_result":54,"demo_url":10,"video_url":10},80,4,"Scattare una foto con la fotocamera","Per scattare una foto basta cambiare il `source` in `ImageSource.camera`. Il flusso di gestione del risultato è identico a quello della galleria.\n\nÈ buona pratica gestire eventuali eccezioni (ad esempio se la fotocamera non è disponibile).","Future\u003Cvoid> _scattaFoto() async {\n  try {\n    final XFile? file = await _picker.pickImage(\n      source: ImageSource.camera,\n      imageQuality: 80,\n    );\n    if (file != null) {\n      setState(() => _immagine = File(file.path));\n    }\n  } catch (e) {\n    if (mounted) {\n      ScaffoldMessenger.of(context).showSnackBar(\n        SnackBar(content: Text('Errore fotocamera: $e')),\n      );\n    }\n  }\n}","Premendo il pulsante si apre la fotocamera; la foto scattata viene mostrata o un messaggio di errore appare in caso di problemi.",{"id":56,"position":57,"title":58,"body":59,"code_snippet":60,"code_language":46,"expected_result":61,"demo_url":10,"video_url":10},81,5,"Selezionare un file con file_picker","Per file generici (PDF, documenti, ecc.) usiamo `FilePicker`. Possiamo limitare i tipi accettati con `FileType.custom` e l'elenco delle estensioni.\n\nIl risultato è un `FilePickerResult` con la lista dei file selezionati.","import 'package:file_picker\u002Ffile_picker.dart';\n\nString? _nomeFile;\n\nFuture\u003Cvoid> _scegliFile() async {\n  final FilePickerResult? result = await FilePicker.platform.pickFiles(\n    type: FileType.custom,\n    allowedExtensions: ['pdf', 'doc', 'docx'],\n  );\n\n  if (result != null && result.files.isNotEmpty) {\n    final file = result.files.single;\n    setState(() => _nomeFile = file.name);\n    \u002F\u002F file.path -> percorso, file.size -> dimensione in byte\n  } else {\n    \u002F\u002F L'utente ha annullato la selezione\n  }\n}","Si apre il selettore di file di sistema filtrato sulle estensioni indicate; il nome del file scelto viene salvato in `_nomeFile`.",{"id":63,"position":64,"title":65,"body":66,"code_snippet":67,"code_language":46,"expected_result":68,"demo_url":10,"video_url":10},82,6,"Costruire l'interfaccia completa","Mettiamo insieme tutto in un'unica schermata con i pulsanti per le tre azioni e l'anteprima dell'immagine o del nome del file selezionato.\n\nUsiamo un'anteprima condizionale: se è presente un'immagine la mostriamo, altrimenti mostriamo un placeholder.","@override\nWidget build(BuildContext context) {\n  return Scaffold(\n    appBar: AppBar(title: const Text('Upload media')),\n    body: Padding(\n      padding: const EdgeInsets.all(16),\n      child: Column(\n        children: [\n          if (_immagine != null)\n            Image.file(_immagine!, height: 200, fit: BoxFit.cover)\n          else\n            Container(\n              height: 200,\n              alignment: Alignment.center,\n              color: Colors.grey.shade200,\n              child: const Text('Nessuna immagine selezionata'),\n            ),\n          const SizedBox(height: 16),\n          if (_nomeFile != null)\n            Text('File: $_nomeFile'),\n          const SizedBox(height: 16),\n          Wrap(\n            spacing: 12,\n            children: [\n              ElevatedButton.icon(\n                onPressed: _scegliDallaGalleria,\n                icon: const Icon(Icons.photo_library),\n                label: const Text('Galleria'),\n              ),\n              ElevatedButton.icon(\n                onPressed: _scattaFoto,\n                icon: const Icon(Icons.camera_alt),\n                label: const Text('Fotocamera'),\n              ),\n              ElevatedButton.icon(\n                onPressed: _scegliFile,\n                icon: const Icon(Icons.attach_file),\n                label: const Text('File'),\n              ),\n            ],\n          ),\n        ],\n      ),\n    ),\n  );\n}","L'app mostra tre pulsanti funzionanti e visualizza l'anteprima dell'immagine o il nome del file selezionato.",[],1781680690580]