YouTube Player In Flutter

Flutter is Google’s UI tool stash for making astounding, natively compiled iOS and Android applications from a solitary codebase. To develop any application, we start with widgets — The constructing square of flutter applications. Widgets depict what their view should take after given their current plan and state. It consolidates a text widget, row widget, column widget, container widget, and some more.

As a mobile developer, playing videos is a common task in app development. From Social Media stories to application development courses, playing videos straightforwardly inside your application is getting increasingly required.

In this article, we will explore How to play YouTube videos from the playlist in Flutter Applications? We will also implement a demo program and use the package YouTube_Player_Iframe to play videos in the flutter project.

Table Of Contents::

Introduction

Setting up Project

Code Implementation

Conclusion

GitHub Link

Introduction:

Youtube_player_iframe can play YouTube videos from a network source. Its excellence is that you don’t have to write a ton of code to implement a Youtube player with gesture support. This package supports Live Stream videos, Playlist Support (Both custom and Youtube’s playlist), supports changing playback rate, and provides default youtube web player’s skin.

Supported Platforms:

• Android.
• IOS.
• Web.

Setting up Project:

Step 1: Package Used

youtube_player_iframe | Flutter Package
Flutter port of the official YouTube iFrame player API. Supports web & mobile platforms.pub.dev

Add youtube_player_iframe plugin in the dependencies in pubspec.yaml file. Then run $ flutter pub get command.

dependencies:
  youtube_player_iframe: 'latest version'

Step 2: Import the package as

import 'package:youtube_player_iframe/youtube_player_iframe.dart';

Step 3: Requirements

• Android: Set minSdkVersion 17 of your android/app/build.gradle file.
• IOS: --ios-language swift, Xcode version >= 11
• Web: None

For Android::
defaultConfig {
applicationId "com.example.youtubeplayer"
minSdkVersion 17
targetSdkVersion 30
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}

Code Implementation:

1. Create a new dart file called home_screen.dart inside the lib folder to design the user interface and make sure we need to create a StatefulWidget.

class YoutubePlayerDemo extends StatefulWidget { YoutubePlayerDemo({Key? key, required this.title}) : super(key: key);
final String title;

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

class _YoutubePlayerDemoState extends State<YoutubePlayerDemo> {
"Write your code here...."
}
}

2. We should provide a YouTube Player Controller to play various videos shown in a ListView; it will be ideal for putting the entirety of the video-playing-related things into its own widget.

late YoutubePlayerController _ytbPlayerController;

3. We will define “_ytbPlayerController” and ‘‘_setOrientation’’ method in initState(). YoutubePlayerController is the controller for the videos you want to play and DeviceOrientation defines the position of the device in its default orientation or in which orientation the hardware logos.

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

_setOrientation([
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);

WidgetsBinding.instance!.addPostFrameCallback((_) {
setState(() {
_ytbPlayerController = YoutubePlayerController(
initialVideoId: videosList[0].youtubeId,
params: YoutubePlayerParams(
showFullscreenButton: true,
autoPlay: false,
),
);
});
});
}

4. Add the YoutubePlayerIframe widget to display video in your Flutter application.

AspectRatio(
aspectRatio: 16 / 9,
child: _ytbPlayerController != null
? YoutubePlayerIFrame(controller: _ytbPlayerController)
: Center(child: CircularProgressIndicator()),
);

5. We will write the code to create PlayList in listview and on tap of the cards new video will render on the display screen.

ListView.builder(
itemCount: videosList.length,
physics: AlwaysScrollableScrollPhysics(),
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
final _newCode = videosList[index].youtubeId;
_ytbPlayerController.load(_newCode);
_ytbPlayerController.stop();
},
child: 'Create your card design'

When we run the application, we get the screen’s output video like this where user can play video by selecting from the playlist(ListView).

Conclusion:

In the article, I have explained the YouTube Video Player’s basic structure in a flutter; you can modify this code according to your choice and also use the package according to your requirement. This was a small introduction to Video Player On User Interaction from my side, and it’s working using Flutter.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

GitHub Link:

find the source code of the YouTube_Player :

GitHub – flutter-devs/YouTube_Player
A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…github.com

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.