[{"data":1,"prerenderedAt":70},["ShallowReactive",2],{"tutorial-scansionare-codici-qr-e-a-barre-in-flutter-con-mobile-scanner":3,"comments-tutorial-scansionare-codici-qr-e-a-barre-in-flutter-con-mobile-scanner":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},40,"Scansionare codici QR e a barre in Flutter con mobile_scanner","scansionare-codici-qr-e-a-barre-in-flutter-con-mobile-scanner","Impara a integrare la scansione di codici QR e barcode nella tua app Flutter usando il pacchetto mobile_scanner, con gestione dei permessi e controllo della fotocamera.","La scansione di codici QR e a barre è una funzionalità richiesta in moltissime app moderne: dalla lettura di biglietti agli inventari, dai pagamenti alle promozioni. In questo tutorial useremo il pacchetto **mobile_scanner**, una soluzione performante basata su ML Kit (Android) e AVFoundation (iOS), che offre un'API semplice e reattiva.\n\nAl termine avrai un'app funzionante in grado di rilevare codici in tempo reale, mostrare il risultato e gestire funzionalità come il flash e il cambio di fotocamera.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Ftutorials\u002Fb51a7921-b99c-4cce-96e1-18474330acfd.jpg",null,"intermediate",35,"3.x","published","2026-07-16T04:30:42+00:00","Scanner QR e barcode in Flutter con mobile_scanner","Guida pratica per scansionare codici QR e barcode in Flutter con mobile_scanner: permessi, controller, flash e gestione dei risultati.",{"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},269,"Aggiungere la dipendenza mobile_scanner","Aggiungi il pacchetto **mobile_scanner** al tuo progetto. Puoi farlo da terminale oppure modificando direttamente il file `pubspec.yaml`.\n\nDa terminale esegui:\n\n```bash\nflutter pub add mobile_scanner\n```\n\nIn alternativa, aggiungi manualmente la dipendenza e lancia `flutter pub get`.","dependencies:\n  flutter:\n    sdk: flutter\n  mobile_scanner: ^5.2.3","yaml","Il pacchetto mobile_scanner viene scaricato e reso disponibile 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},270,2,"Configurare i permessi della fotocamera","La scansione richiede l'accesso alla fotocamera. Devi dichiarare i permessi sia su Android sia su iOS.\n\n**Android** — nel file `android\u002Fapp\u002Fsrc\u002Fmain\u002FAndroidManifest.xml`, all'interno del tag `\u003Cmanifest>`, aggiungi il permesso. Assicurati inoltre che `minSdkVersion` sia almeno 21 in `android\u002Fapp\u002Fbuild.gradle`.\n\n**iOS** — nel file `ios\u002FRunner\u002FInfo.plist` aggiungi la chiave con una descrizione dell'uso della fotocamera.","\u003C!-- AndroidManifest.xml -->\n\u003Cuses-permission android:name=\"android.permission.CAMERA\" \u002F>\n\n\u003C!-- ios\u002FRunner\u002FInfo.plist -->\n\u003Ckey>NSCameraUsageDescription\u003C\u002Fkey>\n\u003Cstring>L'app usa la fotocamera per scansionare i codici QR e a barre.\u003C\u002Fstring>","xml","Al primo avvio della scansione il sistema chiederà all'utente il permesso di accedere alla fotocamera.",{"id":41,"position":42,"title":43,"body":44,"code_snippet":45,"code_language":46,"expected_result":47,"demo_url":10,"video_url":10},271,3,"Creare la schermata dello scanner","Creiamo un widget `StatefulWidget` che ospita il `MobileScanner`. Il widget mostra il flusso della fotocamera a schermo intero e utilizza il callback `onDetect` per ricevere i codici rilevati.\n\nUsiamo un `MobileScannerController` per poter controllare in seguito il flash e la fotocamera, e ricordiamo di rilasciarlo nel metodo `dispose`.","import 'package:flutter\u002Fmaterial.dart';\nimport 'package:mobile_scanner\u002Fmobile_scanner.dart';\n\nclass ScannerScreen extends StatefulWidget {\n  const ScannerScreen({super.key});\n\n  @override\n  State\u003CScannerScreen> createState() => _ScannerScreenState();\n}\n\nclass _ScannerScreenState extends State\u003CScannerScreen> {\n  final MobileScannerController _controller = MobileScannerController();\n  String? _lastCode;\n\n  @override\n  void dispose() {\n    _controller.dispose();\n    super.dispose();\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(title: const Text('Scanner')),\n      body: MobileScanner(\n        controller: _controller,\n        onDetect: (capture) {\n          final List\u003CBarcode> barcodes = capture.barcodes;\n          if (barcodes.isNotEmpty) {\n            final code = barcodes.first.rawValue;\n            if (code != null && code != _lastCode) {\n              setState(() => _lastCode = code);\n            }\n          }\n        },\n      ),\n    );\n  }\n}","dart","Avviando l'app viene mostrata l'anteprima della fotocamera e i codici inquadrati vengono rilevati automaticamente.",{"id":49,"position":50,"title":51,"body":52,"code_snippet":53,"code_language":46,"expected_result":54,"demo_url":10,"video_url":10},272,4,"Mostrare il risultato della scansione","Rendiamo più utile lo scanner mostrando il valore rilevato in fondo allo schermo. Usiamo uno `Stack` per sovrapporre un pannello di risultato all'anteprima della fotocamera.\n\nUna buona pratica è evitare letture ripetute dello stesso codice: nel passo precedente lo gestivamo confrontando con `_lastCode`.","body: Stack(\n  children: [\n    MobileScanner(\n      controller: _controller,\n      onDetect: (capture) {\n        final barcodes = capture.barcodes;\n        if (barcodes.isNotEmpty) {\n          final code = barcodes.first.rawValue;\n          if (code != null && code != _lastCode) {\n            setState(() => _lastCode = code);\n          }\n        }\n      },\n    ),\n    Align(\n      alignment: Alignment.bottomCenter,\n      child: Container(\n        width: double.infinity,\n        color: Colors.black54,\n        padding: const EdgeInsets.all(16),\n        child: Text(\n          _lastCode ?? 'Inquadra un codice...',\n          style: const TextStyle(color: Colors.white, fontSize: 16),\n          textAlign: TextAlign.center,\n        ),\n      ),\n    ),\n  ],\n),","In basso appare un pannello che mostra il contenuto dell'ultimo codice scansionato.",{"id":56,"position":57,"title":58,"body":59,"code_snippet":60,"code_language":46,"expected_result":61,"demo_url":10,"video_url":10},273,5,"Controllare flash e fotocamera","Il `MobileScannerController` permette di attivare la torcia (`toggleTorch`) e cambiare tra fotocamera anteriore e posteriore (`switchCamera`). Aggiungiamo due pulsanti nell'`AppBar`.\n\nDa mobile_scanner 5.x puoi anche usare il `ValueListenableBuilder` sul controller per aggiornare l'icona in base allo stato della torcia.","appBar: AppBar(\n  title: const Text('Scanner'),\n  actions: [\n    IconButton(\n      icon: const Icon(Icons.flash_on),\n      onPressed: () => _controller.toggleTorch(),\n    ),\n    IconButton(\n      icon: const Icon(Icons.cameraswitch),\n      onPressed: () => _controller.switchCamera(),\n    ),\n  ],\n),","I due pulsanti nell'AppBar consentono di accendere il flash e passare da una fotocamera all'altra.",{"id":63,"position":64,"title":65,"body":66,"code_snippet":67,"code_language":46,"expected_result":68,"demo_url":10,"video_url":10},274,6,"Filtrare i tipi di codice e restituire il risultato","Puoi limitare la scansione a determinati formati (ad esempio solo QR code) passando i `formats` al controller. Inoltre, quando un codice valido viene rilevato, spesso vogliamo chiudere la schermata e restituire il valore alla pagina chiamante.\n\nEsegui `Navigator.pop` all'interno del callback, mettendo in pausa il controller per evitare doppie letture.","final MobileScannerController _controller = MobileScannerController(\n  formats: [BarcodeFormat.qrCode],\n);\n\n\u002F\u002F Nel callback onDetect:\nonDetect: (capture) {\n  final code = capture.barcodes.first.rawValue;\n  if (code != null) {\n    _controller.stop();\n    Navigator.of(context).pop(code);\n  }\n},\n\n\u002F\u002F Nella pagina chiamante:\nElevatedButton(\n  onPressed: () async {\n    final result = await Navigator.push\u003CString>(\n      context,\n      MaterialPageRoute(builder: (_) => const ScannerScreen()),\n    );\n    if (result != null) {\n      ScaffoldMessenger.of(context).showSnackBar(\n        SnackBar(content: Text('Codice: $result')),\n      );\n    }\n  },\n  child: const Text('Scansiona QR'),\n),","Lo scanner riconosce solo i QR code, si chiude alla prima lettura valida e restituisce il valore alla schermata precedente che lo mostra in una SnackBar.",[],1785219608009]