04
May

Flutter Youtube Player

0

Flutter Youtube Player:

In this tutorial, we are going to learn to create a youtube player in Flutter app without an API key. with a Qualities of these ranges(144p, 240p, 360p, 480p, 720p and 1080p).

Please Note:

This  Youtube Player plugin supports for Android only we will come off with IOS app later on. this Youtube Player was developed on  Official Iframe API.

Salient Features of Youtube Player In Flutter App:

  • Supports HD and Full HD quality
  • Playable through <video id> or <link>
  • No need for API Key and no Limitations
  • Supports Live Stream Videos
  • Inline playback
  • Thumbnail Support
  • Youtube-like controls
  • Customizable Controls

New features added in this Youtube Player are given below:

  • Change video quality on-the-fly.
  • Share the video with other apps.
  • Fast Forward and Rewind with a double tap.
  • Tap-and-hold to enter and exit fullscreen.
  • Auto resize as per the video’s aspect rat

Creating Youtube Player App In Flutter:

Add the dependency package to pubspec.yaml file:

Use the below code to add the dependency package to pubspec.yaml file.

 

dependencies:
youtube_player: ^3.4.1

After adding the package to pubspec.yaml file run the get package method to import all the required file for the app.

 

We can also install the package from the command line using the below code.

 

$ flutter packages get

 

Import the package into dart file:

Use the below code to import the package into the dart file.

import 'package:youtube_player/youtube_player.dart';

Using Youtube Player:

In below code, you will find source it may a youtube link or publisher video Id and we also define the quality that selects the quality as an HD here. as shown.

YoutubePlayer(
context: context,
source: "nPt8bK2gbaU",
quality: YoutubeQuality.HD,
// callbackController is (optional).
// use it to control player on your own.
callbackController: (controller) {
_videoController = controller;
},
),

 Livestream Videos Playing:

In below code to play live video set “isLive: true"

YoutubePlayer(
context: context,
source: "ddFvjfvPnqk",
quality: YoutubeQuality.HD,
**isLive: true,**
),

Pause the video:

If we want to next page then we have to pause the video otherwise the video plays in the background.  To pause the video when button pressed to use the below code.  

RaisedButton(
child: Text("Next Page"),
onPressed: () {
_videoController.pause();
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => NextPage()),
);
},
),

Custom Controling:

If you want to create a custom control then select player mode to NO_CONTROLS

and then create your own custom controls using the controller obtained from the callbackController property as shown in below code.

 

YoutubePlayer(
context: context,
source: "ddFvjfvPnqk",
playerMode: YoutubePlayerMode.NO_CONTROLS,
callbackController: (controller) {
_videoController = controller;
},
),

Complete code for Flutter Youtube Player: 

place the code in lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:youtube_player/youtube_player.dart';

import 'video_detail.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.red,
),
home: MyHomePage(title: 'Youtube Player Demo'),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
static const platform = const MethodChannel("np.com.sarbagyastha.example");
TextEditingController _idController = TextEditingController();
TextEditingController _seekToController = TextEditingController();
double _volume = 1.0;
VideoPlayerController _videoController;
String position = "Get Current Position";
String status = "Get Player Status";
String videoDuration = "Get Video Duration";
String _source = "7QUtEmBT_-w";
bool isMute = false;

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

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
centerTitle: true,
),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
YoutubePlayer(
context: context,
source: _source,
quality: YoutubeQuality.HD,
aspectRatio: 16 / 9,
autoPlay: true,
loop: false,
reactToOrientationChange: true,
startFullScreen: false,
controlsActiveBackgroundOverlay: true,
controlsTimeOut: Duration(seconds: 4),
playerMode: YoutubePlayerMode.DEFAULT,
callbackController: (controller) {
_videoController = controller;
},
onError: (error) {
print(error);
},
onVideoEnded: () => _showThankYouDialog(),
),
SizedBox(
height: 10.0,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextFormField(
controller: _idController,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: "Enter youtube

void _showThankYouDialog() {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("Video Ended"),
content: Text("Thank you for trying the plugin!"),
);
},
);
}

getSharedVideoUrl() async {
try {
var sharedData = await platform.invokeMethod("getSharedYoutubeVideoUrl");
if (sharedData != null && mounted) {
setState(() {
_source = sharedData;
print(_source);
});
}
} on PlatformException catch (e) {
print(e.message);
}
}
}

Youtube Player Video Details Dart file:

Place the dart file in the same location i.e lib/video_details.dart.

import 'package:flutter/material.dart';
import 'package:youtube_player/youtube_player.dart';

class VideoDetail extends StatefulWidget {
@override
_VideoDetailState createState() => _VideoDetailState();
}

class _VideoDetailState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Video Detail"),
),
body: YoutubePlayer(
context: context,
source: "7QUtEmBT_-w",
quality: YoutubeQuality.HD,
aspectRatio: 16 / 9,
),
);
}
}

Congratulation You Have Learned Creating Youtube Player in Flutter App ….!!!

If It Is Helpful Share It With Your Friends….!!!

Leave a Reply

Categories