[Solved] Flutter Video Player Easy Implementation With Practical Example

In this tutorial, we’ll learn how to properly use Flutter video player with the help of an easy Flutter code example.

Introduction: Flutter Video Player

As the name suggests, video player is used to play videos and in Flutter apps, we can play videos as well.

We’ll first import a simple video player package in our Flutter project. After that, we’ll do some coding to implement video player in our app. Finally, we’ll use a sample video to play in our Flutter app.

Let’s not wait anymore and jump right into its practical implementation.

Implementing Flutter Video Player (Step By Step Guide)

Follow below steps to properly implement Flutter video player.

Step 1

video_player: ^2.4.7

Import the video player package in the dependencies section of your project’s pubspec.yaml file as shown in the below image. Click here to get the latest version of video player.

Step 2

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

Add this line in your AndroidManifest.xml file as shown in the below image.

The path for android manifest file is android>app>src>main>AndroidManifest.xml.

Step 3

import 'package:video_player/video_player.dart';

Use it wherever your want to implement the Flutter video player in your app.

Step 4

late VideoPlayerController _controller;

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

Create a Flutter video player controller and also dispose it, so whenever the work is done then this controller will get disposed automatically to avoid memory leaks.

Step 5

 @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4')
      ..initialize().then((_) {
         _controller.play();
        setState(() {});
      });
  }

This is where the controller will be initialized. We’ve passed it a sample network video path. This code is used to fetch the video online. Use it in initState of your app’s screen page so whenever the page loads, then with it the video player will also get initialized with the required data.

_controller.play() is used to play the video.

_controller.pause() is used to stop the video.

Step 6

Center(
   child: _controller.value.isInitialized? AspectRatio(
                        aspectRatio: _controller.value.aspectRatio,
                        child: VideoPlayer(_controller),
                      )
                    : CircularProgressIndicator())

It’ll check it the controller is initialized then the Flutter video player will play the video as seen in the above image. If not, then it’ll just show the Flutter circular progress indicator widget.

You can also give it an aspect ratio of your choice like:

aspectRatio: 16 / 9

You can also wrap the Flutter video player with container widget or Flutter sizedbox widget to give it a custom height and width. See below examples:

Container(
         height: 100,
         width: 200,
          child: VideoPlayer(_controller)
        )

Container(
       height: 100,
       width: 200,
        child: VideoPlayer(_controller)
       )

flutter video player

Just make sure that the whole video is shown in the screen.

So this is how we can easily use Flutter video player in our app.

Play/Pause Buttons

Let’s now create two buttons. First button will be used to play the video while the second one will be used to pause it.

For that, we’ll use Flutter container widget with a background color and we’ll pass a Flutter icon widget as a child to it.

After that, we’ll wrap this container with Flutter inkwell widget to make it clickable and will pass the required code in its onTap function. See below code:

flutter video player buttons

 Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            InkWell(
              onTap: () {
                setState(() {
                  _controller.play(); // play the video
                });
              },
              child: Container(
                height: 50,
                width: 50,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    shape: BoxShape.circle, color: Colors.blue.shade400),
                child: Icon(Icons.play_arrow, color: Colors.white),
              ),
            ),
            InkWell(
              onTap: () {
                setState(() {
                  _controller.pause();  // pause the video
                });
              },
              child: Container(
                height: 50,
                width: 50,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    shape: BoxShape.circle, color: Colors.blue.shade400),
                child: Icon(Icons.pause, color: Colors.white),
              ),
            ),
          ],
        )

So this is how we can play/pause the video. Hope you now have a complete idea of how to properly use Flutter video player.

The complete source code of customized Flutter video player is given in the next section.

Custom Flutter Video Player Source Code