• Stars
    star
    262
  • Rank 156,136 (Top 4 %)
  • Language
    Dart
  • License
    MIT License
  • Created over 4 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Flick Video Player

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.

Features

  • Double tap to seek video.
  • On video tap play/pause, mute/unmute, or perform any action on video.
  • Auto hide controls.
  • Custom animations.
  • Custom controls for normal and fullscreen.
  • Auto-play list of videos.
  • Change playback speed.
  • Keyboard shortcuts for web.

Demo Mobile

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

Demo Web

Web player
Video
Code

Example

Please run the app in the example/ folder to start playing!

Refer to this article to understand how things are working under the hood.

Installation

Add the following dependencies in your pubspec.yaml file of your flutter project.

    flick_video_player: <latest_version>
    video_player: <latest_version>

How to use

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> {
  FlickManager flickManager;
  @override
  void initState() {
    super.initState();
    flickManager = FlickManager(
      videoPlayerController:
          VideoPlayerController.network("url"),
    );
  }

  @override
  void dispose() {
    flickManager.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FlickVideoPlayer(
        flickManager: flickManager
      ),
    );
  }
}

Public Classes Summary

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.

Web

Guideline for web: As we are using video_player_web under-hood please follow video_player_web doc before you start.

Default shortcuts

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
  • You can pass webKeyDownHandler argument to FlickVideoPlayer and manage the keyboard shortcuts yourself.

Notes

  • Esc shortcut to exit from full-screen is in development.

Origin of third party content

Videos

Pictures

More Repositories

1

NativeBase

Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.
TypeScript
20,188
star
2

vue-native-core

Vue Native is a framework to build cross platform native mobile apps using JavaScript
JavaScript
8,320
star
3

NativeBase-KitchenSink

An example app with all the UI components of NativeBase
JavaScript
2,183
star
4

react-native-easy-grid

Easy React Native Layout & Grid for the Dumb
JavaScript
2,172
star
5

flutter-login-home-animation

Dart
1,240
star
6

express-typescript

Express + TypeScript + Boilerplate for Web / API App
TypeScript
1,096
star
7

react-native-seed

Get your favorite boilerplate of React Native
652
star
8

flutter-starter

A Flutter starter-kit for production-level apps.
Dart
439
star
9

KitchenSink-Vue-Native

KitchenSink app for Vue Native (using NativeBase)
Vue
414
star
10

flutter-web-admin-dashbaord

Admin Dashboard built using Flutter Web
Dart
250
star
11

react-native-aria

A library of React Hooks for React-Native (Android/iOS/web) to provide accessible UI primitives for a design system.
TypeScript
226
star
12

sb-admin-svelte

StartBootstrap SB Admin rebuilt using Svelte + Sveltestrap
CSS
221
star
13

FlatApp-Firebase-Flutter

Flap App with Firebase in Flutter by GeekyAnts.
Dart
217
star
14

ignite-native-base-boilerplate

JavaScript
184
star
15

react-pluggable

A plugin system for JS & React apps.
TypeScript
171
star
16

FlatApp-Flutter

Flap App in Flutter by GeekyAnts.
Dart
169
star
17

NativeBase-Sketch-Template

Sketch Template for NativeBase components
158
star
18

vue-native-starter-app

Vue Native Starter App with Login, News Feed and Sidebar using Vuelidate and Vuex
Vue
140
star
19

react-native-hamburger

Hamburger menu for react-native!
JavaScript
134
star
20

native-base-react-navigation-stack-navigator

JavaScript
126
star
21

flutter-galaxy-game

2D Flutter Galaxy Game
Dart
124
star
22

express-typescript-postgres

An API Boilerplate for Node.js, Express.js & PostgresSQL.
TypeScript
97
star
23

vue-native-cli

Write Native Mobile Apps using Vue. Vue Native is a wrapper around React Native APIs
JavaScript
92
star
24

vue-js-animation-starter-kit

JavaScript
90
star
25

reazy

Reazy Framework - A simple services-based framework for React and React Native
JavaScript
85
star
26

react-native-native-base-seed

React Native Seed Project with NativeBase, Redux, CodePush, Router, Push Notification and other basic must-have libraries
JavaScript
82
star
27

native-base-docs

Documentation of NativeBase
HTML
74
star
28

nativebase-templates

NativeBase Templates for different platforms.
JavaScript
72
star
29

nativebase-tutorial

Sample App using NativeBase
JavaScript
71
star
30

react-native-boilerplate-redux-typescript

TypeScript
68
star
31

GaugesFlutter

A gauge package for Flutter that displays progress and can be customized for appearance and behavior.
Dart
67
star
32

flutter-carousel

A carousel package in flutter with various configuration options
Dart
66
star
33

NativeBase-TodoApp

A basic Todo App built using NativeBase and Redux
Java
61
star
34

react-native-boilerplate-redux-flow

JavaScript
59
star
35

FlappyBird-ReactNative

Flappy Bird Experiment using React Native
JavaScript
57
star
36

ReactNative-Redux-TypeScript-Boilerplate

React Native Boilerplate app - Redux + TypeScript
TypeScript
57
star
37

customise-tinder-swipe

A tinder swipe package that can be customised
Dart
50
star
38

firestore-react

[UNMAINTAINED] Firestore bindings for React components
TypeScript
50
star
39

infinite-carousel-flutter

Carousel in flutter. Supports features like infinite looping, friction effect, multiple scroll physics and control over item anchor and velocity.
Dart
47
star
40

nativebase-v3-kitchensink

NativeBase KitchenSink App
TypeScript
44
star
41

react-native-to-flutter

TypeScript
40
star
42

native-base-cli

JavaScript
40
star
43

nextjs-typescript-firebase

Next.js + TypeScript + Firebase
TypeScript
40
star
44

vue-native-router

JavaScript
37
star
45

flutter_amplify_datastore_demo

A WhatsApp clone build using Flutter and AWS Amplify DataStore
Dart
37
star
46

flutter-folder-structure

The base folder structure to start any new project
Dart
36
star
47

vue-native-website

The website of Vue Native
JavaScript
36
star
48

flutter-docs-code-samples

Dart
35
star
49

NativeBase-VectorIconApp

Example repo to demo how to use Icons with NativeBase
JavaScript
34
star
50

mobx-state-tree-firebase

[UNMAINTAINED] Firebase Integration for your mobx-state-tree models.
TypeScript
34
star
51

do-app-builderx-sketch-import

A sample app to show how Sketch to React Native works in BuilderX
JavaScript
32
star
52

react-native-boilerplate-mobx-typescript

TypeScript
32
star
53

svelte-admin-dashboard

SB Admin dashboard, built using Svelte!
HTML
31
star
54

sample-e-voting-system-ethereum

TypeScript
30
star
55

unitools

Universal tools for Expo & Next to solve fragmented APIs of Link, Image & Platforms
TypeScript
30
star
56

sample-decentralised-kyc-ethereum

TypeScript
29
star
57

native-base-example-github-app

JavaScript
27
star
58

flutter_amplify_graphql_demo

A WhatsApp clone build using Flutter and AWS Amplify GraphQL API.
Dart
26
star
59

nativebase-docs

Mobile-first, accessible components for React Native & Web.
TypeScript
24
star
60

react-native-boilerplate-mobx-flow

JavaScript
23
star
61

react-native-boilerplate-mobx-state-tree-typescript

TypeScript
23
star
62

native-base-market-taxi-app-backend-docs

HTML
22
star
63

sample-supply-chain-ethereum

TypeScript
22
star
64

react-mst-boilerplate

React + mobx-state-tree + TypeScript + styled-components = Clean Boilerplate
TypeScript
19
star
65

localization-json-translator

A localisation language file generator using the Google translator
JavaScript
19
star
66

react-native-zebra-bluetooth-printer

Java
18
star
67

laravel-inertia-sharedo

Easy-to-add Share functionality for your Laravel project
Vue
15
star
68

external_app_launcher

C++
14
star
69

react-animated-charts

React wrapper for D3.js
JavaScript
14
star
70

ga-wdio

An automation CLI tool that creates the tests project for Web, API & Mobile apps and runs things like geckodriver, chromedriver & appium internally for various stacks, browsers, platforms & modes.
JavaScript
14
star
71

nativebase-vscode-extension

NativeBase VS Code Extensions are specifically designed to quicken your development process using NativeBase 3.0.
14
star
72

native-base-example-redux-form

JavaScript
13
star
73

react-native-tinder-card-swiper

Tinder like Card Swipe Example using NativeBase DeckSwiper component
Objective-C
13
star
74

react-native-bing-maps

Java
12
star
75

flutter-bluetooth-adapter

Java
12
star
76

nativebase-v3-taxi-app

TypeScript
12
star
77

react-native-chat

Chat Plugin for your React Native Apps
JavaScript
12
star
78

laravel-lumen-jwt-boilerplate

A boilerplate for your app using laravel, lumen & jwt libraries/frameworks.
PHP
12
star
79

native-base-example-redux-counter

JavaScript
11
star
80

Hacker-News-RN-Clone

Hacker News React Native clone built using BuilderX
JavaScript
9
star
81

sample-smart-contract-ethereum

JavaScript
9
star
82

native-base-example-flatlist-stickyHeaders

Example to demonstrate use of FlatList to include Sticky Headers using NativeBase components
JavaScript
8
star
83

flutter-firebase-notification-sender

A flutter client to send out firebase push notifications
Dart
8
star
84

backend-driven-universal-apps

Backend Driven Universal Apps
TypeScript
8
star
85

flutter-deno-sample-app

TypeScript
7
star
86

native-base-example-rnrf

JavaScript
7
star
87

react-native-chat-example

react-native-chat.com Example
JavaScript
7
star
88

react-native-fireworks

JavaScript
7
star
89

native-base-market-dating-app-docs

Documentation of Dating App (Tinder like) on StrapMobile.com
HTML
7
star
90

line-segment-slider-input

2D Line Segment Slider Input. Originally built for BuilderX.io
TypeScript
6
star
91

twitter-clone-svelte

HTML
6
star
92

geekymodel

GeekyModel - Opinionated State Container for Remote and Local Storage with a Database-like API powered by MobX
TypeScript
6
star
93

native-basev3-testbed

App for building nbv3 components.
TypeScript
6
star
94

native-base-atom-package

NativeBase snippets for Atom Editor
5
star
95

NativeBase_Flutter

Dart
5
star
96

NativeBase-Customizer

JavaScript
5
star
97

nativebase-v3-examples

All the examples of NativeBase v3 used in building the new website.
TypeScript
5
star
98

gform

React Forms with Validation, Two-way binding, Nested Forms
TypeScript
5
star
99

native-base-example-mobx-counter

JavaScript
5
star
100

about-us

4
star