Flutter Tutorial – #1.12 – VIDEO Player | Chewie

Introduction

Welcome to Himdeve development, where we are preparing the best tutorials to make your mobile app development easier and more efficient.

Goal

1. We will create a Video Player to play our tutorials.
2. We will use the Chewie library, which wraps the Video Player in a design user-friendly optimized for Android as well as iOS.
3. We will show you how to play videos from the Internet as well as directly from the application’s asset.
4. We will also show video playback from the phone’s storage using the FilePicker library to select files.
5. We will combine video playback with Hero animation and page transition.

Procedure

First we open our existing application from the previous tutorial and we open the portfolio_tutorials_sub_page.dart file. This will be our entry file for this tutorial.

We change the Tuple2 class to the Tuple3 class and we add the url address to the video tutorial as a third item.

We will also change the Tuple2 class to Tuple3 in the _buildListItem method. And we add a new parameter – videoUrl, to the _buildRippleEffectNavigation method.

Now we go to the PortfolioTutorialDetailPage class and we change the imageUrl parameter to videoUrl.

Stateful Widget

Then we change the Stateless Widget to Stateful Widget. This is so that we can release the Video Player in the dispose method when removing the widget.

iOS Settings

Our goal is to play video tutorials stored on a server. For this reason, we must have permission to read network data. When we create a project using the Flutter create command, the permissions are automatically created for Android. However, for iOS, they need to be defined separately. But since we have already shown in the first part of this series of tutorials how to implement this setting, now we can only show where the code is located and how it looks.

It’s in the ios folder-> Runner -> Info.plist.

Video Player

The video_player plugin, which is in natively supported in the flutter, provides access to low-level video playback functionality.

For iOS, video_player plugin uses AVPlayer to play videos. And for Android it uses ExoPlayer.

Using the video_player plugin, it is possible to play videos stored on the network, in the application as well as directly in the phone’s storage.

Chewie

The video_player plugin, of course, contains functionality with which we can create our own UI design of buttons for playing and managing videos, which we can specify separately for Android and separately for iOS. This means Material design as well as Cupertino design.

However, there is a library called Chewie that wraps the video_player plugin into a user-friendly interface automatically for both Material and Cupertino designs.

Therefore, we will use the given library in our project.

Pubspec.yaml

We define the following libraries in the pubspec.yaml file:

ChewieController

In the portfolio_tutorial_detail_page.dart file, we define the ChewieController for the _PortfolioTutorialDetailPageState class.

Then we create an initState method, where we initialize the ChewieController. ChewieController has several attributes, the most important of which is:

videoPlayerController

We set the videoPlayerController object obtained using the VideoPlayerController.network constructor, which has the url address to the video as a parameter, in the ChewieController attribute of the videoPlayerController.

aspectRatio

AspectRatio is the ratio of the width to the height of the video. In our case, we set the value to 16 : 9.

autoInitialize

This attribute initializes a video at startup. This prepares the video for playback. Which means the first frame of the video is loaded and displayed automatically.

autoPlay

This attribute allows us to automatically play the video as it is displayed.

looping

This allows us to repeat the playback of the video over and over again.

errorBuilder

This attribute allows the user to display a custom error message when a video playback error occurs. We will currently display this message in the center of the Video Player.

And many other attributes.

Chewie widget

We will now modify the _buildHeroWidgetContent method and instead of the CachedNetworkImage we will return the Chewie widget, to which we will set the required attribute – controller.

Dispose

As mentioned at the beginning, when disposing a parent video widget, it is necessary to release all used resources, ie VideoPlayerController as well as ChewieController. We can do so in the dispose method of the Stateful Widget.

HERO

In order to be able to see the video image and not the video itself during the flight of the Hero widget, we will edit the hero_widget.dart file. If you wish to know more about Hero animation, you can check out our previous tutorial.

In the build method, for Hero, we modify the flightShuttleBuilder attribute.

If the Hero flies from the first page to the detail page, we will display the widget obtained using the fromContext parameter. In our case it will be an image of the tutorial.

Otherwise, when Hero flies from the detail page back to the first page, we will use the widget obtained using the toContext parameter to display the image from the first screen again, instead of the video.

And then we set this flying widget to the child attribute for the RotationTransition.

Video loaded from application storage (from asset folder)

In case we do not want to load video from the Internet, we can load the video directly from the application’s storage.

We will create a new videos folder in the assets folder where we will insert a particular  video. In our case we will insert the video file himdeveIntro.mp4 here.

And in the pubspec.yaml file we set the path to the file -> assets/videos/himdeveIntro.mp4

And then when creating a ChewieController, we can insert the VideoPlayerController.asset constructor with the path to the given asset, into the videoPlayerController attribute.

Loading video from the phone storage

When creating a ChewieController in the portfolio_tutorial_detail_page.dart file, we insert the VideoPlayerController.file constructor with the video file parameter into the videoPlayerController attribute. The video file parameter is obtained using the constructor of the File class with the path to the desired file.

FilePicker

In order to be able to define and use an external file, we need certain permissions for the application. However, in this tutorial, we will use the FilePicker library, which will allow the user to select a file from the phone’s storage and at the same time to require the necessary permissions.

We go to the pubspec.yaml file and define the FilePicker library.

Then, in the portfolio_tutorials_sub_page.dart file in the _buildRippleEffectNavigation method, we modify the onTap attribute of the InkWell widget.

We call the FilePicker constructor – FilePicker.getFile, for which we set the type attribute on the video. So the user will only be able to select a video file. Again, we will use the async-await mechanism similar to the previous tutorials in this series. And we get the path to the selected file by calling .path on the given File object. We then insert this path as the value for the videoUrl attribute used to create and then display the detail of the PortfolioTutorialDetailPage screen.

Conclusion

And with this is our twelfth part of this first series of Flutter Tutorials completed and of course you can find the complete source code on the githube.