Play Video in Flutter

This is a simple example to play a video in Flutter.

---

Add Plugin

We will use the video player plugin to play video.
Go to your pubspec.yaml file in your project and add the below plugin.

dependencies:
  flutter: 
    sdk: flutter
  ...
  video_player: ^0.10.1
  ...

---

Initialiaze the Controller

 VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    _controller = VideoPlayerController.network(
        "https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4");
    //_controller = VideoPlayerController.asset("videos/sample_video.mp4");
    _initializeVideoPlayerFuture = _controller.initialize();
    _controller.setLooping(true);
    _controller.setVolume(1.0);
    super.initState();
  }

---

Add the Video Player Widget

We will add the VideoPlayer when the connectionState is done and video is actually loaded.
Until then we will show a CircularProgressIndicator.

FutureBuilder(
future: _initializeVideoPlayerFuture,
builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
    return Center(
        child: AspectRatio(
        aspectRatio: _controller.value.aspectRatio,
        child: VideoPlayer(_controller),
        ),
    );
    } else {
    return Center(
        child: CircularProgressIndicator(),
    );
    }
 },
),

Call _controller.play() and _controller.pause() to Play and Pause the Video accordingly. We will add a FloationgActionButton to toggle the above action.

If you want to play a local video in the app’s assets, make sure to add the folder or file in the pubspec.yaml file.

VideoPlayerController.asset(filepath) is used to play local files.

Make sure to dispose the controller when you are done.

---

Complete Code

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

class VideoDemo extends StatefulWidget {
  VideoDemo() : super();

  final String title = "Video Demo";

  @override
  VideoDemoState createState() => VideoDemoState();
}

class VideoDemoState extends State<VideoDemo> {
  //
  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    _controller = VideoPlayerController.network(
        "https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4");
    //_controller = VideoPlayerController.asset("videos/sample_video.mp4");
    _initializeVideoPlayerFuture = _controller.initialize();
    _controller.setLooping(true);
    _controller.setVolume(1.0);
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Video Demo"),
      ),
      body: FutureBuilder(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return Center(
              child: AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              ),
            );
          } else {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            if (_controller.value.isPlaying) {
              _controller.pause();
            } else {
              _controller.play();
            }
          });
        },
        child:
            Icon(_controller.value.isPlaying ? Icons.pause : Icons.play_arrow),
      ),
    );
  }
}