Step By Step Implementations
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2 : Add the Required Dependency
Add the below dependency to your pubspec.yaml file.
dependencies:
flutter:
sdk: flutter
video_player: ^2.2.15
Step 3: Import the Package
First of all import material.dart file.
import 'package:video_player/video_player.dart';
import 'package:flutter/material.dart';
Step 4: Execute the main Method
Here the execution of our app starts.
Dart
void main() { runApp(MyApp()); } |
Step 5: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
Dart
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 help to play a video in a flutter app. Comments are added for better understanding.
Dart
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. _controller = VideoPlayerController.network( 'https://media.w3wiki.org/wp-content/uploads/20230924220731/video.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(); } } |
Here is the full Code of main.dart file
Dart
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. _controller = VideoPlayerController.network( 'https://media.w3wiki.org/wp-content/uploads/20230924220731/video.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:
Flutter – Implement a Simple VideoPlayer
To implement a simple video player in Flutter, you can use the video_player package, which allows you to play videos from various sources. In this article, we are going to see a step-by-step procedure to implement a VideoPlayer in a Flutter App. A sample video is given below to get an idea about what we are going to do in this article.