Flutter Packages Weekly #14: chewie

4 min readAug 5, 2024

“Elevate Your Video Playback Experience with chewie”

Are you looking to add sleek, customizable video playback to your Flutter app? Look no further than Chewie! In this week’s Flutter Package Weekly, we’re diving into Chewie, a powerful package that wraps the video_player plugin to deliver a feature-rich, customizable video player for your Flutter applications.

What is Chewie?

Chewie is a Flutter package that provides a customizable video player with a beautiful material design. It builds upon the functionality of the video_player plugin, adding a layer of UI controls and customization options to create a polished video playback experience.

Why Use Chewie?

Flutter developers, here’s why Chewie should be your go-to package for video playback:

Ready-to-use UI: Chewie provides a sleek, material design video player out of the box.
Customizability: Easily customize the player’s appearance and behavior to match your app’s design.
Support for Multiple Video Sources: Play videos from assets, files, or network URLs with ease.
Full-screen Support: Seamlessly switch between normal and full-screen modes.
Playback Controls: Intuitive controls for play/pause, seeking, and volume adjustment.

Key Features of Chewie

Material design video player controls
Customizable play/pause, seek, and volume controls
Full-screen support
Autoplay and looping options
Placeholder support for thumbnail display
Subtitles support
Playback speed control

Installation Guide

Let’s get Chewie up and running in your Flutter project:

Add Chewie and video_player to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  chewie: ^latest
  video_player: ^latest

Example Use Cases

Let’s dive into some practical examples to showcase Chewie’s capabilities!

Example 1: Basic Video Player

Here’s a simple implementation of a video player using Chewie:

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

class BasicVideoPlayer extends StatefulWidget {
  @override
  _BasicVideoPlayerState createState() => _BasicVideoPlayerState();
}

class _BasicVideoPlayerState extends State<BasicVideoPlayer> {
  late VideoPlayerController _videoPlayerController;
  ChewieController? _chewieController;

  @override
  void initState() {
    super.initState();
    _initializePlayer();
  }

  Future<void> _initializePlayer() async {
    _videoPlayerController = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4'
    );
    await _videoPlayerController.initialize();
    _chewieController = ChewieController(
      videoPlayerController: _videoPlayerController,
      autoPlay: true,
      looping: true,
    );
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Basic Video Player')),
      body: Center(
        child: _chewieController != null &&
                _chewieController!.videoPlayerController.value.isInitialized
            ? Chewie(controller: _chewieController!)
            : CircularProgressIndicator(),
      ),
    );
  }

  @override
  void dispose() {
    _videoPlayerController.dispose();
    _chewieController?.dispose();
    super.dispose();
  }
}

This example demonstrates how to set up a basic video player with Chewie, including initialization, autoplay, and looping.

Example 2: Customized Video Player

Let’s create a more customized video player with a custom controls builder:

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

class CustomizedVideoPlayer extends StatefulWidget {
  @override
  _CustomizedVideoPlayerState createState() => _CustomizedVideoPlayerState();
}

class _CustomizedVideoPlayerState extends State<CustomizedVideoPlayer> {
  late VideoPlayerController _videoPlayerController;
  ChewieController? _chewieController;

  @override
  void initState() {
    super.initState();
    _initializePlayer();
  }

  Future<void> _initializePlayer() async {
    _videoPlayerController = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4'
    );
    await _videoPlayerController.initialize();
    _chewieController = ChewieController(
      videoPlayerController: _videoPlayerController,
      autoPlay: false,
      looping: false,
      placeholder: Container(
        color: Colors.grey,
        child: Center(child: CircularProgressIndicator()),
      ),
      materialProgressColors: ChewieProgressColors(
        playedColor: Colors.red,
        handleColor: Colors.blue,
        backgroundColor: Colors.grey,
        bufferedColor: Colors.lightGreen,
      ),
      customControls: CustomControls(),
    );
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Customized Video Player')),
      body: Center(
        child: _chewieController != null &&
                _chewieController!.videoPlayerController.value.isInitialized
            ? Chewie(controller: _chewieController!)
            : CircularProgressIndicator(),
      ),
    );
  }

  @override
  void dispose() {
    _videoPlayerController.dispose();
    _chewieController?.dispose();
    super.dispose();
  }
}

class CustomControls extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black.withOpacity(0.5),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          IconButton(
            icon: Icon(Icons.replay_10, color: Colors.white),
            onPressed: () => ChewieController.of(context).seekTo(
              Duration(seconds: ChewieController.of(context).videoPlayerController.value.position.inSeconds - 10),
            ),
          ),
          IconButton(
            icon: Icon(
              ChewieController.of(context).isPlaying
                  ? Icons.pause
                  : Icons.play_arrow,
              color: Colors.white,
            ),
            onPressed: () => ChewieController.of(context).togglePause(),
          ),
          IconButton(
            icon: Icon(Icons.forward_10, color: Colors.white),
            onPressed: () => ChewieController.of(context).seekTo(
              Duration(seconds: ChewieController.of(context).videoPlayerController.value.position.inSeconds + 10),
            ),
          ),
        ],
      ),
    );
  }
}

This example showcases:

Custom placeholder while the video is loading
Custom progress bar colors
Custom controls with skip forward/backward buttons

Example 3: Video Player with Subtitles

Here’s how to add subtitles to your Chewie video player:

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

class SubtitledVideoPlayer extends StatefulWidget {
  @override
  _SubtitledVideoPlayerState createState() => _SubtitledVideoPlayerState();
}

class _SubtitledVideoPlayerState extends State<SubtitledVideoPlayer> {
  late VideoPlayerController _videoPlayerController;
  ChewieController? _chewieController;

  @override
  void initState() {
    super.initState();
    _initializePlayer();
  }

  Future<void> _initializePlayer() async {
    _videoPlayerController = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4'
    );
    await _videoPlayerController.initialize();
    _chewieController = ChewieController(
      videoPlayerController: _videoPlayerController,
      autoPlay: true,
      looping: true,
      subtitle: Subtitles([
        Subtitle(
          index: 0,
          start: Duration.zero,
          end: Duration(seconds: 10),
          text: 'Flutter is awesome!',
        ),
        Subtitle(
          index: 1,
          start: Duration(seconds: 10),
          end: Duration(seconds: 20),
          text: 'Chewie makes video playback easy!',
        ),
      ]),
      subtitleBuilder: (context, subtitle) => Container(
        padding: EdgeInsets.all(10.0),
        child: Text(
          subtitle,
          style: TextStyle(color: Colors.white, fontSize: 16.0),
        ),
      ),
    );
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Video Player with Subtitles')),
      body: Center(
        child: _chewieController != null &&
                _chewieController!.videoPlayerController.value.isInitialized
            ? Chewie(controller: _chewieController!)
            : CircularProgressIndicator(),
      ),
    );
  }

  @override
  void dispose() {
    _videoPlayerController.dispose();
    _chewieController?.dispose();
    super.dispose();
  }
}

This example demonstrates how to add hardcoded subtitles to your video and customize their appearance.

Conclusion

Chewie is more than just a video player package — it’s a powerful tool that can significantly enhance the video playback experience in your Flutter applications. By providing a customizable, feature-rich wrapper around the video_player plugin, Chewie empowers you to create stunning video interfaces with minimal effort.

Have you used Chewie in your projects? Share your experiences or any cool customizations you’ve made in the comments below! And don’t forget to tune in next week for another exciting Flutter Package Spotlight. Happy coding, Flutter enthusiasts!