Flick Video Player is a video player for flutter.
The video_player plugin gives low level access for the video playback. Flick Player wraps video_player
under the hood and provides base architecture for developers to create their own set of UI and functionalities.
Default player Video Code |
Animation player Video Code |
Feed player Video Code |
Orientation player Video Code |
Landscape player Video Code |
Short Video player Video Code |
Web player Video Code |
Please run the app in the example/ folder to start playing!
Refer to this article to understand how things are working under the hood.
Add the following dependencies in your pubspec.yaml file of your flutter project.
flick_video_player: <latest_version>
video_player: <latest_version>
Create a FlickManager
and pass the manager to FlickVideoPlayer
, make sure to dispose FlickManager
after use.
import 'package:flutter/material.dart';
import 'package:flick_video_player/flick_video_player.dart';
import 'package:video_player/video_player.dart';
class SamplePlayer extends StatefulWidget {
SamplePlayer({Key key}) : super(key: key);
@override
_SamplePlayerState createState() => _SamplePlayerState();
}
class _SamplePlayerState extends State<SamplePlayer> {
late FlickManager flickManager;
@override
void initState() {
super.initState();
flickManager = FlickManager(
videoPlayerController:
VideoPlayerController.networkUrl(Uri.parse("url"),
);
}
@override
void dispose() {
flickManager.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Container(
child: FlickVideoPlayer(
flickManager: flickManager
),
);
}
}
Class | Summary |
---|---|
FlickVideoPlayer |
Main entry point, takes a FlickManager and a widget flickVideoWithControls as one of the arguments. |
FlickManager |
Manages all the video related operations with the help of different managers. FlickVideoManager is responsible to maintain life-cycle of a video, change a video and listen to state changes on the video. FlickControlManager is responsible to perform action on the video such as play, mute, seek, toggle full-screen etc. FlickDisplayManager is responsible to show/hide controls when player state changes. |
FlickVideoWithControls |
A helper widget to render video_player using FlickNativeVideoPlayer and Custom player controls. To create video player with custom controls you have to use this widget and pass this to FlickVideoPlayer in the argument flickVideoWithControls . closedCaptionTextStyle argument added to style video subtitles. |
FlickPlayToggle |
A UI helper widget to create play/pause/replay button for the video player. You can either pass your custom play, pause and replay widgets or change settings for the default icons. |
FlickSoundToggle |
A UI helper widget to create mute/unmute button for the video player. You can either pass your custom mute and unmute widgets or change settings for the default icons. |
FlickFullscreenToggle |
A UI helper widget to create fullscreen/fullscreen_exit button for the video player. You can either pass your custom fullscreen and fullscreen_exit widgets or change settings for the default icons. |
FlickVideoProgressBar |
A UI helper widget to create progress bar for your video player. It takes FlickProgressBarSettings as one of the arguments so that user can create a custom progress bar. This is highly customizable, user can almost change all the properties of the progress bar like height , handleRadius , provide custom Color or custom Paint . |
FlickTotalDuration |
A text UI helper widget to show total duration of the video. |
FlickCurrentPosition |
A text UI helper widget to show current position of the video. |
FlickLeftDuration |
A text UI helper widget to show left duration of the video. |
FlickSetPlayBack |
A text UI helper widget to change the playback speed of the video. |
FlickVideoBuffer |
A UI helper widget to show CircularProgressIndicator or your custom widget when the video is buffering. |
FlickAutoPlayCircularProgress |
A UI helper widget to show circular progress bar with timer to switch to the next video. |
FlickSeekVideoAction |
An Action helper to seek video forward/backward by custom Duration on double tap of screen. Takes child as one of the arguments to nest other actions or widgets. |
FlickShowControlsAction |
An Action helper to toggle between show/hide of controls on tap of the screen. Takes child as one of the arguments to nest other actions or widgets. |
FlickTogglePlayAction |
An action helper to toggle between play/pause on tap of the screen. Takes child as one of the arguments to nest other actions or widgets. |
FlickToggleSoundAction |
An action helper to toggle between mute/unmute on tap of the screen. Takes child as one of the arguments to nest other actions or widgets. |
FlickSubtitleToggle |
An action helper to toggle between display subtitle/no-subtitle on tap of the screen. Takes child as one of the arguments to nest other actions or widgets. |
To play a list of videos you have to create your custom DataManager
, You can find some of the implementations in /example folder.
UI Helper and Action helpers are widgets which interacts with FlickDisplayManager
, FlickControlManager
and FlickVideoManager
you can easily create your custom widgets/actions, Provider package is used for state management.
Guideline for web: As we are using video_player_web
under-hood please follow video_player_web doc before you start.
Key | Behavior |
---|---|
f |
Toggle full-screen |
m |
Toggle mute |
ArrowRight |
Seek forward |
ArrowLeft |
Seek backward |
(Space character) |
Toggle play |
ArrowUp |
Increase volume |
ArrowDown |
Decrease volume |
webKeyDownHandler
argument to FlickVideoPlayer
and manage the keyboard shortcuts yourself.Esc
shortcut to exit from full-screen is in development.Videos
Pictures