In this tutorial, we’ll learn how to play video in Flutter app with the help of an easy Flutter code example.
Introduction: Play Video In Flutter App
In this post, we’ll just learn how to play/resume video in Flutter app. If you are interested in how to properly import Flutter video player and initialize it then I’ve written a detailed blog on it as well. Click here to navigate to it.
Now let’s jump into our main topic in which we’ll see how to play video in Flutter app. We’ll be going through a detailed practical example code so you can have a better idea of how to implement it.
But before that, I’d highly encourage you to read the above mentioned article on how to import and initialize video player in Flutter app.
Step By Step Guide: Play Video In Flutter App
Follow the below step in order to practically understand how to play video in Flutter app.
Step 1
late VideoPlayerController _controller;
@override
void dispose() {
_controller.dispose();
super.dispose();
}Create a Flutter video player controller and also dispose it, so whenever the work is done then this controller will get disposed automatically to avoid memory leaks.
Step 2
@override
void initState() {
super.initState();
_controller = VideoPlayerController.network(
'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4')
..initialize().then((_) {
setState(() {});
});
}The controller is initialized in the above code. We’ve passed it a sample network video path. Use it in initState of your app’s screen page so whenever the page loads, then with it the video player will also get initialized with the required data.
Step 3
Center( child: _controller.value.isInitialized? AspectRatio( aspectRatio: _controller.value.aspectRatio, child: VideoPlayer(_controller), ) : CircularProgressIndicator())
It’ll check it the controller is initialized. If yes, then it’ll show the video. If not, then it’ll just show the Flutter circular progress indicator widget.
Step 4 (Play Video)
Now comes the main part in which we’ll play the video. For that, we’ve to use the play method of video player controller. See below code:
_controller.play()
We can use it in the initState code, if we want to automatically play the video after its initialized. Or we can play the video by clicking on a specific button. Let’s use both these methods:
Method 1 (Play Automatically)
@override
void initState() {
super.initState();
_controller = VideoPlayerController.network(
'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4')
..initialize().then((_) {
_controller.play(); // play the video
setState(() {});
});
}This method is used to automatically play the video after its initialized.
Method 2 (Play Using Button)
For that, we’ll use a Flutter container widget with a background color and we’ll pass a Flutter icon widget as a child to it. This is just for decoration so the button looks good.
After that, we’ll wrap this container with Flutter inkwell widget to make it clickable and will pass the required code in its onTap function. See below code:
InkWell(
onTap: () {
setState(() {
_controller.play(); // play the video
});
},
child: Container(
height: 40,
width: 40,
alignment: Alignment.center,
decoration: BoxDecoration(
shape: BoxShape.circle, color: Colors.blue.shade500),
child: Icon(Icons.play_arrow, color: Colors.white),
),
),Just make sure to remove the _controller.play() from initState block so the video does not play automatically. Implement it in your code and click the button. You’ll see that video will start playing after the button is clicked.
So this is how we can easily play video in Flutter app. Hope you like this post.
Click here if you want to learn how to pause video in Flutter app.
The complete source code of play video in Flutter app with button is given in the below section.
Play Video In Flutter App With Button Complete Source Code
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
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((_) {
setState(() {});
});
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: _controller.value.isInitialized
? AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
)
: CircularProgressIndicator()),
SizedBox(
height: 24,
),
InkWell(
onTap: () {
setState(() {
_controller.play();
});
},
child: Container(
height: 40,
width: 40,
alignment: Alignment.center,
decoration: BoxDecoration(
shape: BoxShape.circle, color: Colors.blue.shade500),
child: Icon(Icons.play_arrow, color: Colors.white),
),
)
],
)));
}
}Conclusion
To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to play video in Flutter app. I’d love to have your feedback on this post.
I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.