Introduction

In Flutter, adding a video player to your app allows you to incorporate multimedia content and provide a rich user experience. With the help of the video_player package, you can easily integrate a video player and play videos seamlessly within your app. This tutorial will guide you through the process of adding a video player in Flutter.

Content:

To add a video player in Flutter, follow these steps:

Step 1. Add Dependencies:

Include the video_player package in your pubspec.yaml file. Open the file and add the following dependency:

Copy Code


dependencies:
  video_player: ^2.2.0

Read more"Explore Flutter Widgets to Create Cross-Platform Apps"

Save the file and run flutter pub get to fetch the package.

Step 2. Import Packages:

Import the required packages in your Dart file:

Copy Code


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

Step 3. Create VideoPlayerController:

Declare a VideoPlayerController variable to control the video playback. This controller manages the video source and playback state.

Copy Code


VideoPlayerController _controller;

Step 4. Initialize VideoPlayerController:

Initialize the VideoPlayerController with the video source. This can be a local or network video file.

Copy Code


_controller = VideoPlayerController.asset('assets/videos/sample_video.mp4');

Make sure to update the video source as per your requirement.

Step 5. Initialize Controller:

Initialize the controller by calling the initialize() method. This ensures that the video is ready for playback.

Copy Code


_controller.initialize().then((_) {
  // Update the UI when the video is initialized
  setState(() {});
});

Step 6. Build Video Player Widget:

Use the VideoPlayer widget to display the video player on the screen. Pass the initialized controller to the widget.

Copy Code


Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Video Player'),
    ),
    body: Center(
      child: _controller.value.isInitialized
          ? AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: VideoPlayer(_controller),
            )
          : CircularProgressIndicator(),
    ),
  );
}

The CircularProgressIndicator is shown while the video is being initialized.

Step 7. Control Video Playback:

To control the video playback, add controls such as play, pause, seek, etc. You can use built-in Flutter widgets or custom controls to manage video playback.

Step8. Dispose VideoPlayerController::

To free up resources, dispose of the VideoPlayerController when it’s no longer needed. Call the dispose() method in the dispose() lifecycle method of your widget.

Copy Code


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

Sample Code:

Copy Code


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

void main() => runApp(const VideoApp());

/// Stateful widget to fetch and then display video content.
class VideoApp extends StatefulWidget {
  const VideoApp({super.key});

  @override
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<VideoApp> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4')
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: _controller.value.isInitialized
                  ? Container(
                      height: 200,
                      width: 350,
                      decoration: BoxDecoration(
                          // color: Colors.black,
                          borderRadius: BorderRadius.circular(30)),
                      child: ClipRRect(
                          borderRadius: BorderRadius.all(Radius.circular(10)),
                          child: VideoPlayer(_controller)),
                    )
                  : Container(
                      child: Text("Something Wrong"),
                    ),
            ),
            SizedBox(
              height: 20,
            ),
            SizedBox(
              width: 320,
              height: 50,
              child: TextButton(
                style: TextButton.styleFrom(
                  backgroundColor: Color.fromARGB(234, 255, 237, 41),
                  primary: Color.fromARGB(255, 0, 0, 0),
                  textStyle: TextStyle(
                    fontWeight: FontWeight.w700,
                    color: Colors.black,
                    fontSize: 20,
                  ),
                ),
                child: _controller.value.isPlaying
                    ? Text("click to stop")
                    : Text("click to play"),
                onPressed: () {
                  setState(() {
                    _controller.value.isPlaying
                        ? _controller.pause()
                        : _controller.play();
                  });
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

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

Output:

Conclusion:

By following these steps, you can easily add a video player in Flutter using the video_player package. Incorporate multimedia content and enhance the user experience of your app by seamlessly playing videos within your Flutter application.

Post Views: 1,554