YouTube with Flutter

Hasan Çavdar
Flutter Students Club
3 min readApr 27, 2022

Hey guys, today I’m gonna show you how can you implement the YouTube player to Flutter.

I used this package: https://pub.dev/packages/youtube_player_iframe

When I code, I had a problem with playing YouTube videos on my project. Due to this reason, I was looking for a solution to it and I found this package (Link is on the top).

Let’s look at the how can we do this!

Photo by Szabo Viktor on Unsplash

The first time that I create a project with IDE or terminal. I was using Visual Studio Code for Flutter because it is light or in other words memory friendly and has powerful extensions. Now we are starting to code.

Creating new Flutter project after open command palette. CMD(Ctrl) + Shift + P

Visual Studio Code has a command palette, the keyboard shortcut is below the image. The first step for the project :)

Select the Application.
Set name for project.
This is our main.dart file.

Okay, Okay I hear you say “those parts are too easy” but please be patient because this article is intended for all Flutter Developers.

Now the turn is on coding a YouTube player yes this is what you are looking for.

Create YoutubePlayerController

We have a YoutubePlayerController and it is equal to _controller value. After creating a _controller select properties as we have.

initialVideoId:

This property keeps YouTube embedded code. Because this package is using embedded code from YouTube. You can use List for dynamic.

params:

This property has a YoutubePlayerParams — >

startAt:

Set starting time with Duration().

showControls:

Default YouTube control interface set visibility as true or false.

showFullScreenButton:

Default full-screen button on the bottom right.

Note: If phone supports PiP can use that.

OK! Player is ready to use.

Let’s go to play video on screen.

We can use player in UI code like this.

You can use player anywhere in UI code.

Yes, this package is very easy to use and has so much more properties. If you want see all properties you should look to docs. This is the way how I solved my problems for my project.

Hey, if you saw this sentence, I would like to share my secret with you. This is my first article and maybe it has so many problems but I am open to any feedback about it. Because your feedback helps to improve myself day by day. Thank you.

Sources:

All links I have

See you soon thank you for all…

--

--

Hasan Çavdar
Flutter Students Club

Founder OMNIA SOFTWARE IOS Android and Flutter Developer I’m learning all now.