Flutter Custom Video Player: Step-by-Step Guide For Beginners

In this blog post, we’ll guide you through creating a video player application in Flutter that incorporates custom controls. We’ll leverage the appino_video_player package to achieve this functionality.

If you prefer watching a video tutorial on creating a video player in Flutter here is a link to that.

Prerequisites

A basic understanding of Flutter development

Setting Up the Project

Create a new Flutter project:
Use the Flutter CLI to initialize a new project.
Install the appino_video_player package:
Add the following dependency to your pubspec.yaml file:

   dependencies:
     appino_video_player: ^1.3.0  # Replace with the latest version

Run flutter pub get to download and install the package.

The appino_video_player library can be downloaded from here.

Obtaining Video Assets

You can use videos from various sources for your application:

Assets:Store video files within your Flutter project’s assets folder.
Network: Load videos from URLs.

For this tutorial, we’ll use a video asset placed in the assets/videos directory.

Configuring Assets

Let Flutter know about your assets by adding the following lines to your pubspec.yaml file:

  assets:
    - assets/videos/

Creating the Video Player Page

1. Set up the stateful widget:

Create a new Dart file (e.g., video_player_page.dart) to house the stateful widget responsible for the video player page. This widget will manage the video player’s state and functionality.

enum Source { Asset, Network }

class VideoPlayerPage extends StatefulWidget {
  const VideoPlayerPage({super.key});

  @override
  State<VideoPlayerPage> createState() => _VideoPlayerPageState();
}

Initializing the Video Player

1. Create a video player controller:

Initialize a VideoPlayerController instance within the initState function of your video player page state class.
Specify the video source using either VideoPlayerController.asset for assets or VideoPlayerController.fromNetwork for URLs.

class _VideoPlayerPageState extends State<VideoPlayerPage> {
  late CustomVideoPlayerController _customVideoPlayerController;

  // ... other variables

  @override
  void initState() {
    super.initState();
    initializeVideoPlayer(currentSource);
  }

2. Specify Video Source

  void initializeVideoPlayer(Source source) {
    setState(() {
      isLoading = true;
    });
    VideoPlayerController _videoPlayerController;
    if (source == Source.Asset) {
      _videoPlayerController = VideoPlayerController.asset(assetVideoPath)
        ..initialize().then((value) {
          setState(() {
            isLoading = false;
          });
        });
    } else if (source == Source.Network) {
      _videoPlayerController = VideoPlayerController.networkUrl(videoUri)
        ..initialize().then((value) {
          setState(() {
            isLoading = false;
          });
        });
    } else {
      return;
    }
    _customVideoPlayerController = CustomVideoPlayerController(
        context: context, videoPlayerController: _videoPlayerController);
  }

The initializeVideoPlayer function takes the Source as input. It creates a VideoPlayerController based on the source:

For Source.Asset, it uses VideoPlayerController.asset(assetVideoPath).
For Source.Network, it uses VideoPlayerController.networkUrl(videoUri).

The initialize method is called on the controller to prepare it for playback. The then method is used to update the isLoading state to false after successful initialization.

3. Handle video initialization:

Call the initialize method on the video player controller to prepare it for playback.
Utilize the then method to perform actions after successful initialization (e.g., setting the video player state).

Customizing Playback Controls

The appino_video_player package offers a CustomVideoPlayerController widget that provides functionalities beyond basic playback:

Play and pause controls
Video scrubbing through the timeline
Playback speed adjustment

Adding a Loading Indicator (Optional)

As implemented in the code snippet below , a CircularProgressIndicator is used to visually represent video loading.
The isLoading boolean variable is used to conditionally display the indicator or the video player UI.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: isLoading
          ? const Center(
              child: CircularProgressIndicator(
                color: Colors.red,
              ),
            )
          : Column(
              // ...
            ),
    );
  }

Memory Management

In the dispose function of your video player page state class, dispose of the custom video player controller to avoid memory leaks.

 @override
  void dispose() {
    _customVideoPlayerController.dispose();
    super.dispose();
  }

Get Source Code for free:

Source Code

Conclusion

This tutorial has equipped you with the knowledge to create a video player in Flutter with custom controls using the appino_video_player package. You’ve learned how to: