Flutter Video Player with a Heart of Gold

The video_player plugin provides low-level access to video playback. Chewie uses the video_player under the hood and wraps it in a friendly Material or Cupertino UI!

Preview

MaterialControls

MaterialDesktopControls

CupertinoControls

Installation

In your pubspec.yaml file within your Flutter Project:

dependencies:
  chewie: <latest_version>
  video_player: <latest_version>

Use it

import 'package:chewie/chewie.dart';
final videoPlayerController = VideoPlayerController.network(
    'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4');

await videoPlayerController.initialize();

final chewieController = ChewieController(
  videoPlayerController: videoPlayerController,
  autoPlay: true,
  looping: true,
);

final playerWidget = Chewie(
  controller: chewieController,
);

Please make sure to dispose both controller widgets after use. For example by overriding the dispose method of the a StatefulWidget:

@override
void dispose() {
  videoPlayerController.dispose();
  chewieController.dispose();
  super.dispose();
}

Options

Chewie got some options which controls the video you provide. These options appear on default on a showModalBottomSheet (like you already know from YT maybe). Chewie is passing on default Playback speed and Subtitles options as an OptionItem.

To add additional options just add these lines to your ChewieController:

additionalOptions: (context) {
  return <OptionItem>[
    OptionItem(
      onTap: () => debugPrint('My option works!'),
      iconData: Icons.chat,
      title: 'My localized title',
    ),
    OptionItem(
      onTap: () =>
          debugPrint('Another option working!'),
      iconData: Icons.chat,
      title: 'Another localized title',
    ),
  ];
},

If you don’t like to show your options with the default showModalBottomSheet just override the View with the optionsBuilder method:

optionsBuilder: (context, defaultOptions) async {
  await showDialog<void>(
    context: context,
    builder: (ctx) {
      return AlertDialog(
        content: ListView.builder(
          itemCount: defaultOptions.length,
          itemBuilder: (_, i) => ActionChip(
            label: Text(defaultOptions[i].title),
            onPressed: () =>
                defaultOptions[i].onTap!(),
          ),
        ),
      );
    },
  );
},

Your additionalOptions are already included here (if you provided additionalOptions)!

Last but not least: What is an option without proper translation. To add your strings to them just add:

optionsTranslation: OptionsTranslation(
  playbackSpeedButtonText: 'Wiedergabegeschwindigkeit',
  subtitlesButtonText: 'Untertitel',
  cancelButtonText: 'Abbrechen',
),

Subtitles

Since version 1.1.0 chewie supports subtitles. Here you can see how to use them

You can provide an List<Subtitle> and customize your subtitles with the subtitleBuilder function.

Just add subtitles as following code is showing into your ChewieController:

ChewieController(
  videoPlayerController: _videoPlayerController,
  autoPlay: true,
  looping: true,
  subtitle: Subtitles([
    Subtitle(
      index: 0,
      start: Duration.zero,
      end: const Duration(seconds: 10),
      text: 'Hello from subtitles',
    ),
    Subtitle(
      index: 1,
      start: const Duration(seconds: 10),
      end: const Duration(seconds: 20),
      text: 'Whats up? :)',
    ),
  ]),
  subtitleBuilder: (context, subtitle) => Container(
    padding: const EdgeInsets.all(10.0),
    child: Text(
      subtitle,
      style: const TextStyle(color: Colors.white),
    ),
  ),
);

The index attribute is just for purpases if you want to structure your subtitles in your database and provide your indexes here. start, end and text are here the key attributes.

The Duration defines on which part of your video your subtitles should start and end. For example: Your video is 10 minutes long and you want to add a subtitle between: 00:00 and 00:10‘th second you’ve to provide:

Subtitle(
  index: 0,
  start: Duration.zero,
  end: const Duration(seconds: 10),
  text: 'Hello from subtitles',
),

Example

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

Migrating from Chewie < 0.9.0

Instead of passing the VideoPlayerController and your options to the Chewie widget you now pass them to the ChewieController and pass that latter to the Chewie widget.

final playerWidget = Chewie(
  videoPlayerController,
  autoPlay: true,
  looping: true,
);

becomes

final chewieController = ChewieController(
  videoPlayerController: videoPlayerController,
  autoPlay: true,
  looping: true,
);

final playerWidget = Chewie(
  controller: chewieController,
);

Credit

This project is developed by brianegan
Download this project from the below link.
https://github.com/brianegan/chewie/archive/refs/heads/master.zip
You can visit original source page from the below link:
https://github.com/brianegan/chewie