flutter.it
Tutti i tutorial
Riprodurre video in Flutter con il pacchetto video_player e chewie
GuideIntermedio35 min Flutter 3.x

Riprodurre video in Flutter con il pacchetto video_player e chewie

Introduzione

La 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.

Per risparmiare tempo e offrire un'esperienza curata (barra di avanzamento, pulsanti play/pausa, fullscreen), abbineremo video_player a chewie, un wrapper che fornisce controlli pronti all'uso e altamente personalizzabili.

In 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.

  1. 1

    Aggiungere le dipendenze

    Apri il file pubspec.yaml e aggiungi i pacchetti video_player (ufficiale del team Flutter) e chewie (per i controlli avanzati).

    Dopo aver salvato, esegui flutter pub get dal terminale per scaricare le dipendenze.

    dependencies:
  flutter:
    sdk: flutter
  video_player: ^2.9.1
  chewie: ^1.8.5

    Risultato atteso

    I pacchetti vengono scaricati senza errori e sono disponibili per l'import.

  2. 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/app/src/main/AndroidManifest.xml, subito prima del tag <application>.

    Su iOS, per gli URL non-HTTPS, potresti dover configurare NSAppTransportSecurity in ios/Runner/Info.plist. Con URL HTTPS (consigliato) non serve alcuna modifica.

    <uses-permission android:name="android.permission.INTERNET"/>

    Risultato atteso

    L'app avrà il permesso di scaricare e riprodurre video da URL remoti.

  3. 3

    Inizializzare il VideoPlayerController

    Crea un widget StatefulWidget chiamato VideoScreen. Nel metodo initState inizializziamo il VideoPlayerController puntando a un video di rete.

    È 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/material.dart';
import 'package:video_player/video_player.dart';

class VideoScreen extends StatefulWidget {
  const VideoScreen({super.key});

  @override
  State<VideoScreen> createState() => _VideoScreenState();
}

class _VideoScreenState extends State<VideoScreen> {
  late VideoPlayerController _videoController;

  @override
  void initState() {
    super.initState();
    _videoController = VideoPlayerController.networkUrl(
      Uri.parse(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
      ),
    );
  }

  @override
  void dispose() {
    _videoController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

    Risultato atteso

    Il controller è pronto a caricare il video, ma non viene ancora mostrato nulla.

  4. 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.

    Il 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/chewie.dart';

ChewieController? _chewieController;
bool _isLoading = true;

@override
void initState() {
  super.initState();
  _initializePlayer();
}

Future<void> _initializePlayer() async {
  _videoController = VideoPlayerController.networkUrl(
    Uri.parse(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
    ),
  );

  await _videoController.initialize();

  _chewieController = ChewieController(
    videoPlayerController: _videoController,
    autoPlay: false,
    looping: false,
    aspectRatio: _videoController.value.aspectRatio,
    allowFullScreen: true,
    allowMuting: true,
    errorBuilder: (context, errorMessage) {
      return Center(
        child: Text(
          errorMessage,
          style: const TextStyle(color: Colors.white),
        ),
      );
    },
  );

  setState(() => _isLoading = false);
}

    Risultato atteso

    Al termine del caricamento, il ChewieController è configurato con i controlli e pronto per il rendering.

  5. 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.

    Avvolgiamo il player in un AspectRatio per mantenere le proporzioni corrette del video.

    @override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Video Player')),
    body: Center(
      child: _isLoading || _chewieController == null
          ? const CircularProgressIndicator()
          : AspectRatio(
              aspectRatio: _videoController.value.aspectRatio,
              child: Chewie(controller: _chewieController!),
            ),
    ),
  );
}

    Risultato atteso

    L'app mostra uno spinner durante il caricamento e poi il video con controlli play/pausa, barra di avanzamento e pulsante fullscreen.

  6. 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.

    È importante rilasciare prima il ChewieController e poi il VideoPlayerController.

    @override
void dispose() {
  _chewieController?.dispose();
  _videoController.dispose();
  super.dispose();
}

    Risultato atteso

    Uscendo dalla schermata non vengono più stampati warning relativi a controller non disposti e la memoria viene liberata correttamente.

  7. 7

    Riprodurre un video locale da asset

    Oltre ai video di rete, puoi riprodurre file inclusi nell'app. Crea una cartella assets/videos/, inserisci il tuo file (es. intro.mp4) e dichiaralo nel pubspec.yaml.

    Poi sostituisci l'inizializzazione del controller usando VideoPlayerController.asset. Il resto della logica con chewie rimane identico.

    # pubspec.yaml
flutter:
  assets:
    - assets/videos/intro.mp4

// Nel codice, sostituisci l'inizializzazione:
_videoController = VideoPlayerController.asset(
  'assets/videos/intro.mp4',
);

    Risultato atteso

    L'app riproduce il video incluso negli asset senza necessità di connessione a Internet, mantenendo tutti i controlli di chewie.

CondividiXLinkedInFacebookWhatsApp

Commenti (0)

Ancora nessun commento. Inizia tu!