[{"data":1,"prerenderedAt":77},["ShallowReactive",2],{"tutorial-riprodurre-video-in-flutter-con-il-pacchetto-video-player-e-chewie":3,"comments-tutorial-riprodurre-video-in-flutter-con-il-pacchetto-video-player-e-chewie":76},{"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},39,"Riprodurre video in Flutter con il pacchetto video_player e chewie","riprodurre-video-in-flutter-con-il-pacchetto-video-player-e-chewie","Impara a integrare la riproduzione video nelle tue app Flutter usando video_player per la logica di base e chewie per ottenere controlli professionali pronti all'uso.","## Introduzione\n\nLa riproduzione di contenuti video è una funzionalità sempre più richiesta nelle applicazioni mobile, dai tutorial ai social feed. Flutter offre il pacchetto ufficiale `video_player`, che gestisce la logica di caricamento e decodifica, ma con un'interfaccia utente molto essenziale.\n\nPer risparmiare tempo e offrire un'esperienza curata (barra di avanzamento, pulsanti play\u002Fpausa, fullscreen), abbineremo `video_player` a **chewie**, un wrapper che fornisce controlli pronti all'uso e altamente personalizzabili.\n\nIn questo tutorial costruiremo un player capace di riprodurre sia video di rete che video locali (asset), con gestione dello stato di caricamento e degli errori.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Ftutorials\u002Ff482acab-95d3-4c18-b431-c244f094eaa7.jpg",null,"intermediate",35,"3.x","published","2026-07-15T04:30:45+00:00","Riprodurre video in Flutter con video_player e chewie","Guida pratica per integrare la riproduzione video in Flutter usando video_player e chewie: controlli, fullscreen e gestione errori.",{"id":19,"name":20,"slug":21},1,"Guide","guide",{"id":19,"name":23},"Flutter Bot",[25,32,40,48,55,62,69],{"id":26,"position":19,"title":27,"body":28,"code_snippet":29,"code_language":30,"expected_result":31,"demo_url":10,"video_url":10},262,"Aggiungere le dipendenze","Apri il file `pubspec.yaml` e aggiungi i pacchetti `video_player` (ufficiale del team Flutter) e `chewie` (per i controlli avanzati).\n\nDopo aver salvato, esegui `flutter pub get` dal terminale per scaricare le dipendenze.","dependencies:\n  flutter:\n    sdk: flutter\n  video_player: ^2.9.1\n  chewie: ^1.8.5","yaml","I pacchetti vengono scaricati senza errori e sono disponibili per l'import.",{"id":33,"position":34,"title":35,"body":36,"code_snippet":37,"code_language":38,"expected_result":39,"demo_url":10,"video_url":10},263,2,"Configurare le piattaforme","Per riprodurre video di rete su Android devi assicurarti che l'app abbia il permesso di accesso a Internet. Aggiungi la seguente riga nel file `android\u002Fapp\u002Fsrc\u002Fmain\u002FAndroidManifest.xml`, subito prima del tag `\u003Capplication>`.\n\nSu iOS, per gli URL non-HTTPS, potresti dover configurare `NSAppTransportSecurity` in `ios\u002FRunner\u002FInfo.plist`. Con URL HTTPS (consigliato) non serve alcuna modifica.","\u003Cuses-permission android:name=\"android.permission.INTERNET\"\u002F>","xml","L'app avrà il permesso di scaricare e riprodurre video da URL remoti.",{"id":41,"position":42,"title":43,"body":44,"code_snippet":45,"code_language":46,"expected_result":47,"demo_url":10,"video_url":10},264,3,"Inizializzare il VideoPlayerController","Crea un widget `StatefulWidget` chiamato `VideoScreen`. Nel metodo `initState` inizializziamo il `VideoPlayerController` puntando a un video di rete.\n\nÈ fondamentale chiamare `initialize()`, che restituisce un `Future`: dobbiamo attenderlo prima di poter mostrare il video. Ricorda sempre di liberare le risorse nel metodo `dispose`.","import 'package:flutter\u002Fmaterial.dart';\nimport 'package:video_player\u002Fvideo_player.dart';\n\nclass VideoScreen extends StatefulWidget {\n  const VideoScreen({super.key});\n\n  @override\n  State\u003CVideoScreen> createState() => _VideoScreenState();\n}\n\nclass _VideoScreenState extends State\u003CVideoScreen> {\n  late VideoPlayerController _videoController;\n\n  @override\n  void initState() {\n    super.initState();\n    _videoController = VideoPlayerController.networkUrl(\n      Uri.parse(\n        'https:\u002F\u002Fflutter.github.io\u002Fassets-for-api-docs\u002Fassets\u002Fvideos\u002Fbee.mp4',\n      ),\n    );\n  }\n\n  @override\n  void dispose() {\n    _videoController.dispose();\n    super.dispose();\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return const Placeholder();\n  }\n}","dart","Il controller è pronto a caricare il video, ma non viene ancora mostrato nulla.",{"id":49,"position":50,"title":51,"body":52,"code_snippet":53,"code_language":46,"expected_result":54,"demo_url":10,"video_url":10},265,4,"Creare il ChewieController con i controlli avanzati","Ora inizializziamo `chewie`. Poiché `chewie` richiede un `VideoPlayerController` già inizializzato, incapsuliamo la logica in un metodo asincrono `_initializePlayer` chiamato da `initState`.\n\nIl `ChewieController` permette di configurare autoplay, loop, aspect ratio e la visualizzazione degli errori. Aggiorniamo lo stato con `setState` al termine dell'inizializzazione.","import 'package:chewie\u002Fchewie.dart';\n\nChewieController? _chewieController;\nbool _isLoading = true;\n\n@override\nvoid initState() {\n  super.initState();\n  _initializePlayer();\n}\n\nFuture\u003Cvoid> _initializePlayer() async {\n  _videoController = VideoPlayerController.networkUrl(\n    Uri.parse(\n      'https:\u002F\u002Fflutter.github.io\u002Fassets-for-api-docs\u002Fassets\u002Fvideos\u002Fbee.mp4',\n    ),\n  );\n\n  await _videoController.initialize();\n\n  _chewieController = ChewieController(\n    videoPlayerController: _videoController,\n    autoPlay: false,\n    looping: false,\n    aspectRatio: _videoController.value.aspectRatio,\n    allowFullScreen: true,\n    allowMuting: true,\n    errorBuilder: (context, errorMessage) {\n      return Center(\n        child: Text(\n          errorMessage,\n          style: const TextStyle(color: Colors.white),\n        ),\n      );\n    },\n  );\n\n  setState(() => _isLoading = false);\n}","Al termine del caricamento, il ChewieController è configurato con i controlli e pronto per il rendering.",{"id":56,"position":57,"title":58,"body":59,"code_snippet":60,"code_language":46,"expected_result":61,"demo_url":10,"video_url":10},266,5,"Mostrare il player nell'interfaccia","Nel metodo `build` gestiamo tre stati: caricamento in corso (mostriamo un `CircularProgressIndicator`), player pronto (mostriamo il widget `Chewie`) ed eventuale assenza del controller.\n\nAvvolgiamo il player in un `AspectRatio` per mantenere le proporzioni corrette del video.","@override\nWidget build(BuildContext context) {\n  return Scaffold(\n    appBar: AppBar(title: const Text('Video Player')),\n    body: Center(\n      child: _isLoading || _chewieController == null\n          ? const CircularProgressIndicator()\n          : AspectRatio(\n              aspectRatio: _videoController.value.aspectRatio,\n              child: Chewie(controller: _chewieController!),\n            ),\n    ),\n  );\n}","L'app mostra uno spinner durante il caricamento e poi il video con controlli play\u002Fpausa, barra di avanzamento e pulsante fullscreen.",{"id":63,"position":64,"title":65,"body":66,"code_snippet":67,"code_language":46,"expected_result":68,"demo_url":10,"video_url":10},267,6,"Aggiornare il dispose per liberare tutte le risorse","Con l'aggiunta di `chewie` dobbiamo rilasciare anche il `ChewieController` nel metodo `dispose`. Dimenticare questo passaggio causa memory leak e possibili errori quando si chiude la schermata mentre il video è in riproduzione.\n\nÈ importante rilasciare prima il `ChewieController` e poi il `VideoPlayerController`.","@override\nvoid dispose() {\n  _chewieController?.dispose();\n  _videoController.dispose();\n  super.dispose();\n}","Uscendo dalla schermata non vengono più stampati warning relativi a controller non disposti e la memoria viene liberata correttamente.",{"id":70,"position":71,"title":72,"body":73,"code_snippet":74,"code_language":46,"expected_result":75,"demo_url":10,"video_url":10},268,7,"Riprodurre un video locale da asset","Oltre ai video di rete, puoi riprodurre file inclusi nell'app. Crea una cartella `assets\u002Fvideos\u002F`, inserisci il tuo file (es. `intro.mp4`) e dichiaralo nel `pubspec.yaml`.\n\nPoi sostituisci l'inizializzazione del controller usando `VideoPlayerController.asset`. Il resto della logica con `chewie` rimane identico.","# pubspec.yaml\nflutter:\n  assets:\n    - assets\u002Fvideos\u002Fintro.mp4\n\n\u002F\u002F Nel codice, sostituisci l'inizializzazione:\n_videoController = VideoPlayerController.asset(\n  'assets\u002Fvideos\u002Fintro.mp4',\n);","L'app riproduce il video incluso negli asset senza necessità di connessione a Internet, mantenendo tutti i controlli di chewie.",[],1785219608303]