Creating your own video player in Flutter

This article shows you step-by-step how to set up and run your own customized video player in Flutter to play videos from the device file-system or using a given URL such as http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4.

Image for post
Image for post
KiddVideoPlayer in full screen mode

Setup

The first step is to add the KiddVideoPlayer plugin as a dependency in the pubspec.yaml file. The package is available as kidd_video_player on pub.dartlang.org.

Once you do that, you need to run flutter packages get.

Be sure that the following line appears in the <application ...> tag located in android/app/src/main/AndroidManifest.xml.

Also make sure the line below appears outside the <application ...> tag:

Warning: The video player is not functional on iOS simulators. An iOS device must be used during development/testing.

Add the following entry to your Info.plist file, located in <project root>/ios/Runner/Info.plist:

This entry allows your app to access video files by URL.

Adding the KiddVideoPlayer widget

And here we go! Add the KiddVideoPlayer widget as a child of some sized widget, as follows:

Important: If you set the fromUrl variable to true, be sure to set the videoUrlparameter instead of the videoFile parameter and viceversa. Only one option must be chosen

The only required parameter is fromUrl but then either videoUrlOR fileUrl will be required to make it work.

  • fromUrl: boolean that defines if the video source comes from an url or a file.
  • videoUrl: string that contains the url of the video file that will be played in our video player
  • videoFile: File type that contains the video (either picked from the device file-system or recorded with the camera).
Image for post
Image for post
Basic layout

Customization

And here comes the best part, customizing the UI in our app at will. To do this, the KiddVideoPlayer class has an optional parameter called layoutConfigs. Using it, you can easily edit the UI.

Image for post
Image for post

Thanks Sofia Schiavone for text editing:

https://www.linkedin.com/in/sof%C3%ADa-schiavone-01a5801a0/

Written by

Machine Learning and Frontend padawan, on the open source side of the force.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store