media-kit-video-controls

media-kit-video-controls.md

Video Controls

package:media_kit provides highly-customizable pre-built video controls for usage.

Apart from theming, layout can be customized, position of buttons can be modified, custom buttons can be created etc. Necessary features like fullscreen, keyboard shortcuts & swipe-based controls are also supported by default.

MaterialDesktopVideoControls	MaterialVideoControls

• Video widget provides controls argument to display & customize video controls.
• By default, AdaptiveVideoControls are used.

Types

Type	Description
AdaptiveVideoControls	Selects MaterialVideoControls, CupertinoVideoControls etc. based on platform.
MaterialVideoControls	Material Design video controls.
MaterialDesktopVideoControls	Material Design video controls for desktop.
CupertinoVideoControls	iOS-style video controls.
NoVideoControls	Disable video controls i.e. only render video output.
Custom	Provide custom builder for video controls.

Select existing video controls

Modify the controls argument. For advanced theming of existing video controls, see theming & modifying video controls section.

Scaffold(
  body: Video(
    controller: controller,
    // Select [MaterialVideoControls].
    controls: MaterialVideoControls,
  ),
);

Scaffold(
  body: Video(
    controller: controller,
    // Select [CupertinoVideoControls].
    controls: CupertinoVideoControls,
  ),
);

Build custom video controls

Pass custom builder Widget Function(BuildContext, VideoController) as controls argument.

Scaffold(
  body: Video(
    controller: controller,
    // Provide custom builder for controls.
    controls: (state) {
      return Center(
        child: IconButton(
          onPressed: () {
            state.widget.controller.player.playOrPause();
          },
          icon: StreamBuilder(
            stream: state.widget.controller.player.stream.playing,
            builder: (context, playing) => Icon(
              playing.data == true ? Icons.pause : Icons.play_arrow,
            ),
          ),
          // It's not necessary to use [StreamBuilder] or to use [Player] & [VideoController] from [state].
          // [StreamSubscription]s can be made inside [initState] of this widget.
        ),
      );
    },
  ),
);

Theming & modifying video controls

AdaptiveVideoControls

• Selects MaterialVideoControls, CupertinoVideoControls etc. based on platform.
• Theming:
  • Theme specific controls according to the sections below.

MaterialVideoControls

• Material Design video controls.
• Theming:
  • Use MaterialVideoControlsTheme widget.
  • Video widget(s) in the child tree will follow the specified theme:

// Wrap [Video] widget with [MaterialVideoControlsTheme].
MaterialVideoControlsTheme(
  normal: MaterialVideoControlsThemeData(
    // Modify theme options:
    buttonBarButtonSize: 24.0,
    buttonBarButtonColor: Colors.white,
    // Modify top button bar:
    topButtonBar: [
      const Spacer(),
      MaterialDesktopCustomButton(
        onPressed: () {
          debugPrint('Custom "Settings" button pressed.');
        },
        icon: const Icon(Icons.settings),
      ),
    ],
  ),
  fullscreen: const MaterialVideoControlsThemeData(
    // Modify theme options:
    displaySeekBar: false,
    automaticallyImplySkipNextButton: false,
    automaticallyImplySkipPreviousButton: false,
  ),
  child: Scaffold(
    body: Video(
      controller: controller,
    ),
  ),
);

• Related widgets (may be used in primaryButtonBar, topButtonBar & bottomButtonBar):
  • MaterialPlayOrPauseButton
  • MaterialSkipNextButton
  • MaterialSkipPreviousButton
  • MaterialFullscreenButton
  • MaterialCustomButton
  • MaterialPositionIndicator

MaterialDesktopVideoControls

• Material Design video controls for desktop.
• Theming:
  • Use MaterialDesktopVideoControlsTheme widget.
  • Video widget(s) in the child tree will follow the specified theme:

// Wrap [Video] widget with [MaterialDesktopVideoControlsTheme].
MaterialDesktopVideoControlsTheme(
  normal: MaterialDesktopVideoControlsThemeData(
    // Modify theme options:
    seekBarThumbColor: Colors.blue,
    seekBarPositionColor: Colors.blue,
    toggleFullscreenOnDoublePress: false,
    // Modify top button bar:
    topButtonBar: [
      const Spacer(),
      MaterialDesktopCustomButton(
        onPressed: () {
          debugPrint('Custom "Settings" button pressed.');
        },
        icon: const Icon(Icons.settings),
      ),
    ],
    // Modify bottom button bar:
    bottomButtonBar: const [
      Spacer(),
      MaterialDesktopPlayOrPauseButton(),
      Spacer(),
    ],
  ),
  fullscreen: const MaterialDesktopVideoControlsThemeData(),
  child: Scaffold(
    body: Video(
      controller: controller,
    ),
  ),
);

• Related widgets (may be used in primaryButtonBar, topButtonBar & bottomButtonBar):
  • MaterialDesktopPlayOrPauseButton
  • MaterialDesktopSkipNextButton
  • MaterialDesktopSkipPreviousButton
  • MaterialDesktopFullscreenButton
  • MaterialDesktopCustomButton
  • MaterialDesktopVolumeButton
  • MaterialDesktopPositionIndicator
• Keyboard shortcuts may be modified using keyboardShortcuts argument. Default ones are listed below:

Shortcut	Action
Media Play Button	Play
Media Pause Button	Pause
Media Play/Pause Button	Play/Pause
Media Next Track Button	Skip Next
Media Previous Track Button	Skip Previous
Space	Play/Pause
J	Seek 10s Behind
I	Seek 10s Ahead
Arrow Left	Seek 2s Behind
Arrow Right	Seek 2s Ahead
Arrow Up	Increase Volume 5%
Arrow Down	Decrease Volume 5%
F	Enter/Exit Fullscreen
Escape	Exit Fullscreen

CupertinoVideoControls

• iOS-style video controls.
• Theming:
  • Use CupertinoVideoControlsTheme widget.
  • Video widget(s) in the child tree will follow the specified theme:

// Wrap [Video] widget with [CupertinoVideoControlsTheme].
CupertinoVideoControlsTheme(
  normal: const CupertinoVideoControlsThemeData(
    // W.I.P.
  ),
  fullscreen: const CupertinoVideoControlsThemeData(
    // W.I.P.
  ),
  child: Scaffold(
    body: Video(
      controller: controller,
    ),
  ),
);

NoVideoControls

• Disable video controls i.e. only render video output.
• Theming:
  • No theming options are available.

---