DOCSEARCHbyAlgolia
Submit Docs

Chewie

repository·master·Indexed 24 days ago

https://github.com/fluttercommunity/chewie

A video player UI wrapper for Flutter that provides Material and Cupertino control interfaces on top of the low-level video_player plugin. It includes a customizable ChewieController for managing playback, full-screen behavior, and system UI, as well as support for subtitles, custom option menus, and a VideoProgressBar for playback tracking.

Tokens
3.5K
Snippets
7
Records
19
Agent score
83%

What's inside chewie

  2. Customize iOS launch screen assets

    master

    To change the launch screen image for the iOS version of your application, you can either replace the image files directly in the example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory or use Xcode for a more visual approach.

    Using Xcode:

    1. Open your Flutter project's iOS workspace by running open ios/Runner.xcworkspace in your terminal.
    2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
    3. Drag and drop your desired images into the asset catalog to replace the existing ones.
    open ios/Runner.xcworkspace

  4. Workaround for Android buffering issues

    master

    Due to an issue in video_player where buffering states are not reported correctly on Android, the loading indicator might persist or controls might hide.

    Option 1: Manual Playback Trigger Add a listener to your VideoPlayerController to force playback if the video is paused during a seek:

    // Your init code can be above
videoController.addListener(yourListeningMethod);

bool wasPlayingBefore = false;
void yourListeningMethod() {
  if (!videoController.value.isPlaying && !wasPlayingBefore) {
    videoController.play();
  }
  wasPlayingBefore = videoController.value.isPlaying;
}

    Option 2: Disable Loading Spinner You can disable the loading spinner entirely by setting a very long progressIndicatorDelay on Android:

    _chewieController = ChewieController(
  videoPlayerController: _videoPlayerController,
  progressIndicatorDelay: Platform.isAndroid ? const Duration(days: 1) : null,
);

  5. Troubleshoot iOS Simulator video playback

    master

    If you are using an iOS simulator, the video_player plugin (which chewie relies on) may not work unless you are using Flutter version 1.26.0 or above. If you encounter issues, you may need to switch to the Flutter beta channel.

    To switch to the beta channel, run:

    flutter channel beta

  6. Basic usage of Chewie

    master

    Chewie wraps a VideoPlayerController to provide a Material or Cupertino UI. You must initialize the VideoPlayerController before creating the ChewieController, and you must dispose of both controllers to prevent memory leaks.

    import 'package:chewie/chewie.dart';
import 'package:video_player/video_player.dart';

final videoPlayerController = VideoPlayerController.networkUrl(Uri.parse(
    '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,
);

// Remember to dispose in your StatefulWidget's dispose method:
@override
void dispose() {
  videoPlayerController.dispose();
  chewieController.dispose();
  super.dispose();
}

  7. Customize the options modal sheet

    master

    If the default showModalBottomSheet does not suit your design, you can override the UI using the optionsBuilder property in ChewieController. This function provides the current context and the list of defaultOptions (including your additionalOptions).

    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!(),
          ),
        ),
      );
    },
  );
},

  8. Add and customize subtitles

    master

    Chewie supports text overlays via the subtitle property. You can provide a list of Subtitle objects and use subtitleBuilder to define how they are rendered. Use showSubtitles: true to display them automatically on start.

    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: 'What\u2019s up? :)\
    ),
  ]),
  showSubtitles: true, // Automatically display subtitles
  subtitleBuilder: (context, subtitle) => Container(
    padding: const EdgeInsets.all(10.0),
    child: Text(
      subtitle,
      style: const TextStyle(color: Colors.white),
    ),
  ),
);

  9. Add additional options to the video player

    master

    Chewie provides default options like Playback speed and Subtitles in a modal sheet. You can add custom items using the additionalOptions property in ChewieController. Each OptionItem requires an onTap callback, an iconData, and a title.

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

  10. Translate Chewie option buttons

    master

    Use the optionsTranslation property in ChewieController to provide localized strings for the default option buttons using the OptionsTranslation class.

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

  11. Configure Full-Screen behavior and System UI

    master

    You can control how the device behaves when entering and exiting full-screen mode via ChewieController:

    • systemOverlaysOnEnterFullScreen: Defines which SystemUiOverlays are visible when entering full-screen.
    • deviceOrientationsOnEnterFullScreen: Defines the allowed DeviceOrientations when entering full-screen.
    • systemOverlaysAfterFullScreen: Defines which SystemUiOverlays are restored after exiting full-screen.
    • deviceOrientationsAfterFullScreen: Defines the allowed DeviceOrientations after exiting full-screen.
    • allowedScreenSleep: If false, uses wakelock_plus to prevent the screen from sleeping while in full-screen.
    • useRootNavigator: If true, uses the root navigator to push the full-screen view, ensuring it covers all other UI elements.