Flutter Video Player

admin@crackerworld.in Avatar

Flutter Video Player :Implementing video functionality from scratch would be a burdensome task. But there are few plugins available to make developer life easy. The video player plugin is one of the best plugins available for Flutter to fulfill that requirement.

In this article, you will learn how to apply the video player plugin along with controlling the different functionalities of the video player.

Creating a new video player

Before using the video player plugin, you should add it to your pubspec.yaml file. When you open the pubspec.yaml file, you can see some configurations and dependencies required to run your app. Our video player plugin should be added under the dependencies block:

The current version of the plugin is 2.1.15, but you can add the latest version in here by checking the plugin page. If you are in VS Code when you save the file, it will download the plugin automatically. If not, open the terminal and write flutter pub get to download the plugin.

Go to the file where you want to add the plugin and import the video_player.dart file:

Now you can use the video player plugin in your project.

There are few ways to load video. Let’s load our example from the assets. Create an assets/video folder at the root level of the project and add a video inside that folder. Then in pubspec.yaml, under the assets section, specify the file path as below:

Let’s create a separate stateful widget called VideoPlayerWidget to insert our video player–related implementation.

You can initialize the video player inside the initState method like below. Also, don’t forget to dispose the video player to do cleanup work:

VideoPlayerController must specify with the late keyword because we are still not a defined video player controller in that line and we are going to do that later. Inside the initStatevideoPlayerController has been initialized along with the path of the asset.

When the initialization is completed, it changes the state and rebuilds the widget. You can start playing the video after initialization.

Instead of assets, you can use the video URL. To access the network, you should add Internet permission configurations to both Android and iOS.

From the root, go to ios/Runner and open the info.plist file. Then, add the following config to that file:

Next, go to android/app/src/main and open AndroidManifest.xml. Then, add the following code to it:

Now you can change asset to network and add the video URL there:

Even though initialization has been done, there should be a way to show the player in the UI. The VideoPlayer widget can be used to do that. To make it work, you should pass the controller as a first argument to the VideoPlayer widget.

It’s better to check whether the initialization is a success before showing the VideoPlayer widget:

Now you can see the video on the screen. But there is a small issue: it’s not in a proper aspect ratio. That can be fixed by using the AspectRatio widget. The video player provides a proper aspect ratio of the video, and you can use that value to set to an AspectRatio widget:

Flutter Video Player

For More: To know about videocall in flutter

Tagged in :

admin@crackerworld.in Avatar

Leave a Reply

Your email address will not be published. Required fields are marked *

More Articles & Posts