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.
Once you do that, you need to run flutter packages get.
Be sure that the following line appears in the
<application ...> tag located in
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
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
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).
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.
Thanks Sofia Schiavone for text editing: