In this Quick Tutorial, you will how to play a video from a URL in a flutter with example code and All the steps in detail.
In this blog, we will discuss how we can play video files on our flutter app. Playing videos on a flutter app is not that hard; it can be achieved with the help of the video player plugin that we will be looking at in this article.
Sometimes it’s very necessary for the app to play video whether you are creating a video player app or just a simple app.
Suppose you are creating an app like tik tok then you have to implement some kind of functionality to play video. Or suppose you are creating an app like youtube where it is necessary to play videos.
We will create an app that will play a video from the internet. You can use video from your phone storage. But in this post, we will be focusing on playing videos from URL.
Now lets get started:
Step1: Creating Project
First, create a flutter project. In order to create a flutter project, you can use this command
flutter create video_player_example
Inside your terminal or command prompt
Step2: Add Dependencies
In your projects pubspec.yaml file add these lines inside dependencies
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
video_player: ^2.4.7Or you can add a plugin via terminal and paste these commands
flutter pub add video_player
We are going to use video from the internet so we have to do some settings to access the internet. For that go to inside you
android > app > source > main > res > Androidmanifest.xml file.
And paste this line.
<uses-permission android:name="android.permission.INTERNET"/>
Step3: Creating Video player File
Now create a file and name it video_player_example.dart. This file will be our home page for the app. Now create a stateful class and name it VideoPlayerExample because the needs to update the UI while playing the video file. Don’t forget to import the material package
import 'package:flutter/material.dart';
class VideoPlayerExample extends StatefulWidget {
const VideoPlayerExample({ Key? key }) : super(key: key);
@override
State<VideoPlayerExample> createState() => _VideoPlayerExampleState();
}
class _VideoPlayerExampleState extends State<VideoPlayerExample> {
@override
Widget build(BuildContext context) {
return Container(
);
}
}
Our app will play a video as soon as it started. First, we import the video_palyer plugin
First create a controller for playing videos this controller will give us some functionality like play, push, seek, etc.
late VideoPlayerController _controller;Now define the URL for the video file
String videoUrl = 'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4';Inside the init state we will initialize our controller and give it the URL so it can download the file and play the video on the phone. After giving the URL we will add a listener to our controller so that it can start playing video as soon as the app is loaded. We can do more things with the controller besides just playing that we will see in a while.
@override
void initState() {
super.initState();
controller = VideoPlayerController.network(videoUrl);
controller.addListener(() {
setState(() {});
});
controller.setLooping(true);
controller.initialize().then((_) => setState(() {}));
controller.play();
}
Whenever we define any kind of controller in our app we have to dispose of it so it will stop eating up our phone’s memory
@override
void dispose() {
controller.dispose();
super.dispose();
}
Step4: Showing The Video
For showing the video we will use the AspectRation widget because it takes an aspect ratio for rendering the content and our video file will have an aspect ratio.
So for that create a center widget inside your scaffold and for a child of center, the widget takes an aspect ratio widget.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: AspectRatio(
aspectRatio: controller.value.aspectRatio,
),
),
);
}
Our work is all most finished but waits how are we going to play video, so for playing the video the package gives us a widget that will play the video and that is VideoPlayer. So this will us as a child of aspect ratio widget.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: VideoPlayer(controller),
),
),
);
}
It will continuously play the video because we set looping to true in our initstate.
You may be wondering how we will stop or pause the video for that we will use an inkwell widget on the aspect ratio so whenever you touch on the video it will stop and when you again touch it will play the video.
Now wrap your aspect ratio to the inkwell
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: InkWell(
child: AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: VideoPlayer(controller),
),
),
),
);
}
Inkwell has onTap property which we will you to play/pause our video.
Now again run your app and touch on the video it will pause the video and vice versa.
Now our app is completed and I hope you understand every step. You can apply what you have learned here to your own app to play and pause videos.
Remember one thing for playing video files your app should support multidex. So for that
Use a text editor, and open your “app-level build.Gradle file” which exists at [your project]\android\app\build.gradle.
There is a line that begins with “minSdkVersion.”
Change it from:
defaultConfig {
// …
minSdkVersion [whatever it says here, even if it is not a number]
// …
}
To:
defaultConfig {
// ...
minSdkVersion 21
// ..
.
}
If you have any doubts regarding the coding you can comment and we will definitely answer it as soon as possible.
Full Code:
For main.dart file
import 'package:flutter/material.dart';
import 'package:notification_example_app/video_palyer_example.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const VideoPlayerExample(),
);
}
}
For video_player_example.dart file
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
class VideoPlayerExample extends StatefulWidget {
const VideoPlayerExample({Key? key}) : super(key: key);
@override
State<VideoPlayerExample> createState() => _VideoPlayerExampleState();
}
class _VideoPlayerExampleState extends State<VideoPlayerExample> {
late VideoPlayerController controller;
String videoUrl =
'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4';
@override
void initState() {
super.initState();
controller = VideoPlayerController.network(videoUrl);
controller.addListener(() {
setState(() {});
});
controller.setLooping(true);
controller.initialize().then((_) => setState(() {}));
controller.play();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: InkWell(
onTap: () {
if (controller.value.isPlaying) {
controller.pause();
} else {
controller.play();
}
},
child: AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: VideoPlayer(controller),
),
),
),
);
}
}
Plugin Link (https://pub.dev/packages/video_player).
For more Flutter tutorials, Tips, Tricks, Free code, Questions, and Error Solving.
Remember FlutterDecode.com
so much fantastic info on here, : D.
Thank you