flick_video_player 0.1.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 93

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.

Demo #

Default player
Video
Code
Animation player
Video
Code
Feed player
Video
Code
Orientation player
Video
Code
Landscape player
Video
Code

Example #

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

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 #

ClassSummary
FlickVideoPlayerMain entry point, takes a FlickManager and a widget flickVideoWithControls as one of the arguments.
FlickManagerManages 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.
FlickVideoWithControlsA 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.
FlickPlayToggleA 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.
FlickSoundToggleA 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.
FlickFullscreenToggleA 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.
FlickVideoProgressBarA 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.
FlickTotalDurationA text UI helper widget to show total duration of the video.
FlickCurrentPositionA text UI helper widget to show current position of the video.
FlickLeftDurationA text UI helper widget to show left duration of the video.
FlickVideoBufferA UI helper widget to show CircularProgressIndicator or your custom widget when the video is buffering.
FlickAutoPlayCircularProgressA UI helper widget to show circular progress bar with timer to switch to the next video.
FlickSeekVideoActionAn 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.
FlickShowControlsActionAn 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.
FlickTogglePlayActionAn 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.
FlickToggleSoundActionAn 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.

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.

Origin of third party content #

Videos

Pictures

0.1.1 #

Added homepage in pubspec.yaml

0.1.0 #

Initial version of FlickVideoPlayer.

example/lib/main.dart

import 'package:example/animation_player/animation_player.dart';
import 'package:example/custom_orientation_player/custom_orientation_player.dart';
import 'package:example/feed_player/feed_player.dart';

import 'package:flutter/material.dart';

import './landscape_player/landscape_player.dart';

import 'default_player/default_player.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flick player example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: Color.fromRGBO(246, 245, 250, 1),
        body: SafeArea(child: Examples()),
      ),
    );
  }
}

class Examples extends StatefulWidget {
  const Examples({Key key}) : super(key: key);

  @override
  _ExamplesState createState() => _ExamplesState();
}

class _ExamplesState extends State<Examples> {
  final List<Map<String, dynamic>> samples = [
    {'name': 'Default player', 'widget': DefaultPlayer()},
    {'name': 'Animation player', 'widget': Expanded(child: AnimationPlayer())},
    {'name': 'Feed player', 'widget': Expanded(child: FeedPlayer())},
    {'name': 'Custom orientation player', 'widget': CustomOrientationPlayer()},
    {'name': 'Landscape player', 'widget': LandscapePlayer()},
  ];

  int selectedIndex = 0;

  changeSample(int index) {
    if (samples[index]['widget'] is LandscapePlayer) {
      Navigator.of(context).push(MaterialPageRoute(
        builder: (context) => LandscapePlayer(),
      ));
    } else {
      setState(() {
        selectedIndex = index;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Container(
          child: samples[selectedIndex]['widget'],
        ),
        Container(
          height: 80,
          decoration: BoxDecoration(
            color: Colors.white,
          ),
          child: ListView(
              scrollDirection: Axis.horizontal,
              children: samples.asMap().keys.map((index) {
                return Material(
                  color: Colors.transparent,
                  child: InkWell(
                    onTap: () {
                      changeSample(index);
                    },
                    child: Center(
                      child: Container(
                        padding: EdgeInsets.all(20),
                        child: Text(
                          samples.asMap()[index]['name'],
                          style: TextStyle(
                            color: index == selectedIndex
                                ? Color.fromRGBO(100, 109, 236, 1)
                                : Color.fromRGBO(173, 176, 183, 1),
                            fontWeight:
                                index == selectedIndex ? FontWeight.bold : null,
                          ),
                        ),
                      ),
                    ),
                  ),
                );
              }).toList()),
        ),
      ],
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flick_video_player: ^0.1.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flick_video_player/flick_video_player.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
87
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
93
Learn more about scoring.

We analyzed this package on Jul 11, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.15
  • Flutter: 1.17.5

Analysis suggestions

Package does not support Flutter platform Linux

Because:

  • package:flick_video_player/flick_video_player.dart that imports:
  • package:flick_video_player/src/controls/flick_video_with_controls.dart that imports:
  • package:video_player/video_player.dart that declares support for platforms: Android, iOS, Web

Package does not support Flutter platform Web

Because:

  • package:flick_video_player/flick_video_player.dart that imports:
  • package:flick_video_player/src/flick_video_player.dart that imports:
  • package:wakelock/wakelock.dart that declares support for platforms: Android, iOS

Package does not support Flutter platform Windows

Because:

  • package:flick_video_player/flick_video_player.dart that imports:
  • package:flick_video_player/src/controls/flick_video_with_controls.dart that imports:
  • package:video_player/video_player.dart that declares support for platforms: Android, iOS, Web

Package does not support Flutter platform macOS

Because:

  • package:flick_video_player/flick_video_player.dart that imports:
  • package:flick_video_player/src/controls/flick_video_with_controls.dart that imports:
  • package:video_player/video_player.dart that declares support for platforms: Android, iOS, Web

Package not compatible with SDK dart

Because:

  • flick_video_player that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.4.0 <3.0.0
flutter 0.0.0
provider ^4.0.5 4.3.1
video_player ^0.10.8+1 0.10.11+2
wakelock ^0.1.4+1 0.1.4+2
Transitive dependencies
collection 1.14.12 1.14.13
flutter_web_plugins 0.0.0
meta 1.1.8 1.2.2
nested 0.0.4
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
video_player_platform_interface 2.0.2
video_player_web 0.1.3+2
Dev dependencies
flutter_test