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.

KiddVideoPlayer in full screen mode

Setup

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

For Android

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

For iOS

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

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).
Basic layout

Customization

Full example

Thanks Sofia Schiavone for text editing:

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

Machine Learning and Javascript 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