Video Player In Flutter
Video content passes more rapidly than some other arrangements such as text content. From Instagram or YouTube stories to app development courses, playing any video ingenious inside your mobile app is getting increasingly required.
How to play videos in Flutter?
From the Flutter group, there is a library straightforwardly just called video_player.
This library, nevertheless, is entirely no frills. In the interval it can play videos, it is entirely dependent upon you to simply add the video playback controls & style it. There is a loftier alternative that comes packaged with the User Interface, as you would expect both on iOS and Android and is Chewie.
In this blog, we are going to explore the Video Player In Flutter. We’ll also implement a demo program & use the chewie to play videos utilizing the chewie & video_player package in your Flutter mobile apps.
Introduction:
Video_player & Chewie can simply start playing videos from 3 sources — these sources are assets, files, & networks. Its brilliance is that you do not need to create a long list of code to alter the information source. To switch from an asset to a network video which involves just a couple of keystrokes.
Steps for Implementation:
Step 1: Add dependencies
Simply add the dependencies to pubspec — yaml file.
dependencies:
chewie: ^0.12.2
video_player: ^1.0.1Step 2: Add assets
Now, add the assets to pubspec — yaml file.
assets:
assets:
- assets/Step 3: Import
import 'package:chewie/chewie.dart';
import 'package:video_player/video_player.dart';Step 4: Run flutter packages
In the root directory of your app, run Flutter packages.
Step 5: Add the permission for internet
Add internet permission to your project root>/android/app/src/main/AndroidManifest.xml:
<uses-permission android:name="android.permission.INTERNET"/>Step 6: Enable AndriodX
Add AndriodX to your gradle.properties file:
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=trueHow to implement code in a dart file?
Firstly, create a dart file inside the lib folder called video_items.dart.
Now comes an opportunity to start playing the videos. For that, Chewie provides its own widget, which is simply a covering on top of the VideoPlayer, & it also comes straightforwardly from the Flutter group.
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Chewie(
controller: _chewieController,
),
);
}We must give a chewie controller. We are required to play multiple videos shown in a ListView. Because video player resources should be delivered, it will be ideal for putting the entirety of the video-playing-related things into its own widget.
Now we will create 3 constructors, their names are VideoPlayerController, looping, and autoplay.
final VideoPlayerController videoPlayerController;
final bool looping;
final bool autoplay;
VideoItems({
@required this.videoPlayerController,
this.looping, this.autoplay,
Key key,
}) : super(key: key);
In initState() we’ll add “_chewieController”. we’ll add videoPlayerController, in ChewieController,it means “the controller for the video you are willing to play,”
aspect ratio implies that “ the size of the video you want,”
autoInitialize implies that “initialize the Video on Startup.
This’ll simply prepare the video for playback”,
autoPlay implies that “play the video as soon as it’s displayed,”
looping implies “whether or not the video should loop,”
errorBuilder implies “You can simply create a custom error message, especially when the video playback runs into an error.”
@override
void initState() {
super.initState();
_chewieController = ChewieController(
videoPlayerController: widget.videoPlayerController,
aspectRatio:5/8,
autoInitialize: true,
autoPlay: widget.autoplay,
looping: widget.looping,
errorBuilder: (context, errorMessage) {
return Center(
child: Text(
errorMessage,
style: TextStyle(color: Colors.white),
),
);
},
);
}We are required to create a StatefulWidget to get a grasp of the dispose() method.
@override
void dispose() {
super.dispose();
_chewieController.dispose();
}Create another dart file inside the lib folder called home_screen.dart.
We’ll call VideoItems() in the home_screen file. We’ll add a video file from assets & also will add looping, and autoplay for the video.
VideoItems(
videoPlayerController: VideoPlayerController.asset(
'assets/video_6.mp4',
),
looping: true,
autoplay: true,
),From the network, we’ll add a video file, and also, at the moment the URL does not exist, it will display an error.
VideoItems(
videoPlayerController: VideoPlayerController.network(
'https://assets.mixkit.co/videos/preview/mixkit-a-girl-blowing-a-bubble-gum-at-an-amusement-park-1226-large.mp4'
),
looping: false,
autoplay: true,
),Code File:
import 'package:flutter/material.dart';
import 'package:flutter_video_player_demo/video_items.dart';
import 'package:video_player/video_player.dart';
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueGrey[100],
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text('Flutter Video Player Demo'),
centerTitle: true,
),
body: ListView(
children: <Widget>[
VideoItems(
videoPlayerController: VideoPlayerController.asset(
'assets/video_6.mp4',
),
looping: true,
autoplay: true,
),
VideoItems(
videoPlayerController: VideoPlayerController.network(
'https://assets.mixkit.co/videos/preview/mixkit-a-girl-blowing-a-bubble-gum-at-an-amusement-park-1226-large.mp4'
),
looping: false,
autoplay: true,
),
VideoItems(
videoPlayerController: VideoPlayerController.asset(
'assets/video_3.mp4',
),
looping: false,
autoplay: false,
),
VideoItems(
videoPlayerController: VideoPlayerController.asset(
'assets/video_2.mp4',
),
autoplay: true,
),
VideoItems(
videoPlayerController: VideoPlayerController.network(
"https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4"
),
looping: true,
autoplay: false,
),
],
),
);
}
}The Final Take:
In the article, We tried to explain the basic structure of a video player in Flutter. Though, you can make changes to this code as per your requirement and choice. So, from our side, this was the simplest as well as smallest introduction to Video Player On User Interaction, along with its working via utilizing Flutter.
We hope this above blog will assist you to collect sufficient details in Trying up the Video Player in your next Flutter projects. We’ll show you that Chewie is a Flutter package pointed toward simplifying the way toward playing videos. Instead of simply managing a start, pause, and stop button, and doing the overlay to show the advancement of video, Chewie does these things for you & makes a demo program for working video players in your Flutter applications, So please try it.
Why Hire Flutter App Developer From Ionicfirebase?
Well, the answer to why, can be easily obtained by viewing our website. You can find what makes us unique from other mobile app development companies. Ionicfirebase is a growing industry that has delivered so many mobile apps in multiple categories and is willing to deliver more. For that, they always stay updated with the latest technologies and keep focusing on building rich-quality, eye-catchy, and feature-rich mobile apps at a reasonable rate. The best part about Ionicfirebase’s development team is we never compromise with the quality of service and deliver what you are looking for. As Flutter is catching the eyes of entrepreneurs and developers similarly, Ionicfirebase is also catching the eyes of entrepreneurs to get the best mobile app.
They have a number of mobile app developers that are well-trained and skilled enough to provide high-quality apps on time. The main aim of their development team is to satisfy their valuable clients. And to achieve their goal they keep the focus on providing high-quality flutter mobile applications that match the requirements of their businesses. Want to get the readymade app or on-demand app for your next project? Feel free to connect with Ionicfirebase and get the best app in a short time period.
Being a leading flutter app development company, Ionicfirebase has won to earn its name in the list of top mobile app development agencies. Every single app developer of their development team follows the steps of the process of mobile app development. Choosing Ionicfirebase for your next project is surely a worthy choice you have ever made. Especially if you’re looking for an industry that can help out you with both ready-made and on-demand apps. Still, thinking? Just contact the support team of Ionicfirebase, book your appointment with their development team, and get the app at a reasonable price. Hire Flutter developers from Ionicfirebase, and get the flutter app development service right now.
Clap 👏 If you like this article
