Introduction 📕

In today's article, we will see how you can integrate a video player and play videos from assets or the internet, in your Flutter app.

We will do this with the help of a package called video_player. It is a highly rated package created by the flutter team.

Project Setup 🧑🏻‍💻

First of all, we will add the video_player package in the pubspec file and import it in our main.dart. Here is the code to add to your pubspec file, followed by the import statement.

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  video_player:

import 'package:video_player/video_player.dart';

That's it. We are done with our project setup. Let's code the logic.

Coding the Logic 🤔

We will need a video player controller which will control every aspect of our video player. We create a controller like this

// late because we are not initializing it.
late VideoPlayerController _controller;

Now, let's create a function that sets up our video player. I am going to play a video file over the internet. You can also use the.asset() method to play a video from the assets folder.

Add the below block of code in your initstate. Since we want our video player to be ready whenever the app is started, we will add the initialization logic in the initstate.

_controller = VideoPlayerController.network(
  'https://flutter.github.io/assetsforapidocs/assets/videos/bee.mp4')..initialize().then((_) {
// Ensure the first frame is shown after the video is initialized
// even before the play button has been pressed.

   setState(() {});
 }
);

Now, Let's create the UI. We will use the VideoPlayer widget and wrap it with Aspect Ratio widget to show our video. Add the below code in the body of your Scaffold.

Center(
// if our controller is initialized, we will show our video player, else we will show a blank screen
child: _controller.value.isInitialized ? 
AspectRatio(
 aspectRatio: _controller.value.aspectRatio,
// the video player widget needs a video player controller.
 child: VideoPlayer(_controller),
)
 : Container(),
),

If you run your app now, you will see a video playing infinitely. The next logical step would be to add a play pause button. So let's see how can we do that.

Since we are using a controller, it becomes very easy to implement the play and pause feature. We will first create a Floating action button. When we tap on it, our video plays and when we tap again, our video will pause.

Here is the code for the floating action button.

floatingActionButton: FloatingActionButton(
 onPressed: () {
   setState(() {
    _controller.value.isPlaying // checks if the video is playing, if yes
       ? _controller.pause() // pauses the video
        : _controller.play(); // resumes it again
     });
   },
    child: Icon(
     _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
  ),
),

Now when you run your app, the video will start playing and when you press the floating action button, it will pause. When you tap on it again, the video will resume. If you were able to successfully implement this, then CONGRATULATIONS! You have learned how to add a video player in your Flutter app.

See how simple it was. There are many more functions that come with this video_player package.

You can add subtitles to your videos, loop it, forward it by x seconds, change the playback speed, and much more. Everything is controlled by the _controller.

If you want to play a video from the assets, just replace the .network() function with .asset() when you are initializing your controller in initstate.

Conclusion 👋🏻

With this, we conclude our today's article on how to add a video player and play videos in the Flutter app. I hope that you learned something new today.

You can appreciate and support my blogs via.

Also, let's connect on Twitter. Follow CSwithIyush for more amazing tutorials, tips/tricks on Flutter & DSA.