Playing videos inside mobile apps has become an essential feature for modern user interfaces, whether it"s tutorials, product demos, or entertainment content. In Flutter, building a smooth and responsive video playback experience requires the use of the VideoPlayer widget.

As a result, it helps developers to handle video streaming, play and pause controls, and buffering with minimal effort. Understanding how you can implement it properly will ensure better media handling, user engagement, and overall app performance.

Required Tools

To build this app, you need the following items installed on your machine:

  • Visual Studio Code / Android Studio
  • Android Emulator / iOS Simulator / Physical Device.
  • Flutter Installed
  • Flutter plugin for VS Code / Android Studio.

Step-by-Step Implementations

Let"s now shift the focus from understanding the VideoPlayer widget to actually wiring it into a working Flutter app. Each step gradually connects the tools, packages, and code needed so the video can load, display, and respond smoothly to user actions.

Step 1: Create a new Flutter Application

Create a new Flutter application using the command prompt. To create a new app, write the following command and run it.

code
flutter create app_name

Step 2: Add the Required Dependency

Add the below dependency to your pubspec.yaml file.

dependencies:

code
dependencies:
flutter:
sdk: flutter
video_player: ^2.10.0

Step 3: Import the Package

First of all, import material.dart file.

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

Step 4: Execute the main Method

Call the runApp() method in the main() method to start the app.

code
void main() {
runApp(MyApp());
}
Streaming Video

Step 5: Create MyApp Class

In this class, we are going to implement the MaterialApp, Here, we are also setting the Theme of our App.

code
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('Video Player'),
),
body: Center(
child: VideoPlayerApp(),
),
),
);
}
}

Step 6: Create VideoPlayerApp Class

In this class, we are going to implement the VideoPlayer that helps to play a video in a Flutter app.

code
class VideoPlayerApp extends StatefulWidget {
@override
_VideoPlayerAppState createState() => _VideoPlayerAppState();
}

class _VideoPlayerAppState extends State<VideoPlayerApp> {
VideoPlayerController? _controller;

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

// Create a VideoPlayerController for the video you want to play.
// ignore: deprecated_member_use
_controller = VideoPlayerController.network(
'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
);

// Initialize the VideoPlayerController.
_controller!.initialize();

// Play the video.
_controller!.play();
}

@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: _controller!.value.aspectRatio,
child: VideoPlayer(_controller!),
);
}

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

// Dispose of the VideoPlayerController.
_controller!.dispose();
}
}

Complete Source Code

main.dart:

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

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: Text('Video Player')),
body: Center(child: VideoPlayerApp()),
),
);
}
}

class VideoPlayerApp extends StatefulWidget {
@override
_VideoPlayerAppState createState() => _VideoPlayerAppState();
}

class _VideoPlayerAppState extends State<VideoPlayerApp> {
VideoPlayerController? _controller;

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

// Create a VideoPlayerController for the video you want to play.
// ignore: deprecated_member_use
_controller = VideoPlayerController.network(
'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
);

// Initialize the VideoPlayerController.
_controller!.initialize();

// Play the video.
_controller!.play();
}

@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: _controller!.value.aspectRatio,
child: VideoPlayer(_controller!),
);
}

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

// Dispose of the VideoPlayerController.
_controller!.dispose();
}
}

Output:

Cincopa Preview