How to access and get the Youtube data through API in Flutter

Hello everyone, in this article let's learn how to access and gather Youtube data like videos, channels, playlist, and much more through Youtube Data API v3 in Flutter.

Let's build the UI first before going to the core part, so the UI which we are building will be similar to the image attached below :-).

Assuming that you have already created a new Flutter project, let's begin to code.

Let's create one Home page which calls the youtube API and renders the data on the screen.

We need the following packages to make use of API and building rich UI, so add these following packages to pubspec.yaml file

youtube_api: ^0.8.0 //package for querying Youtube videos/channels
flutter_feather_icons: ^1.0.3 //Icon library
sleek_circular_slider: ^1.1.0 //package for displaying loading icon
url_launcher: ^5.7.5 //package to navigate from our app to browser

Import the above packages to the Home screen and make the Home class extend the stateful widget as we need to maintain states here to call and receive the results from API.

Setting up API for our application

Awesome! So let's register our application with Google API’s to call our Youtube data API v3.

1. Go to google’s developer console and sign in with your Gmail account if not already signed.
2. You will prompted with the below window select your country and agree with the terms and condition and click on AGREE AND CONTINUE.

3. Click on CREATE PROJECT on the dashboard screen and fill the form details with Project name and Organisation if any and click on create.

4. Now you will be redirected to the dashboard screen. On dashboard screen click on ENABLE APIS AND SERVICE OPTION.

You will be directed to the API libraries page,now select Youtube Data API v3 as in the imagebelow

After clicking on Youtube Data API you will be directed to the home of Youtube Data API, there click on ENABLE button to enable the API.

5. After Enabling API the next step is to create credentials for our API. Click on CREATE CREDENTIALS button in the dashboard.

Now enter the following details in the form,

Api name — YouTube API V3

Calling from — Android(If you are using IOS or other select it)

Type of Data — Public

Click on What credentials do I need button, that’s it you will be provided with the API key, please make note of your API key do not share it with anyone. If you want to restrict the key usage then you can click on Restrict key option. You can always go to the Credential tab in developer console to get API key.

Okay, That was some serious steps we went through and now let’s use the API to get the data. Now if you want to directly explore the code yourself then you can go to this GitHub repository.

In your Home Screen widget, we will copy the API key in a static constant variable as the API key is constant. After storing we will call the API through initState function such that API gets called whenever the screen is initialized, below snippet will show you how to do it.

So, from where did we get the method and properties to search videos?it’s from the youtube_api package which is providing these methods and properties, there are different methods that you can use to gather data from API based on the needs.

Methods of the youtube_api package

YoutubeAPI yt = YoutubeAPI(api_key, maxResults: 6, type: "video");
yt.search("video you want to search for") //search video
yt.getTrends(regionCode:"Your country's apha2 region code" ) //get trending videos
yt.nextPage() //get the results of next page
yt.previousPage() //get the results of previous page
yt.video(["videoId1","videoId2"]) //get the video data based on list given in parameter
yt.channel(["channelid1","channelid2"]) //get channel data based on list provided 

Data which is returned from search query of API looks like this

[
  {
    "kind": "video",
    "id": "9vzd289Eedk",
    "channelTitle": "Java",
    "title": "WEBINAR - Programmatic Trading in Indian Markets using Python with Kite Connect API",
    "description": "For traders today, Python is the most preferred programming language for trading, as it provides great flexibility in terms of building and executing strategies.",
    "publishedAt": "2016-10-18T14:41:14.000Z",
    "channelId": "UC8kXgHG13XdgsigIPRmrIyA",
    "thumbnails": {
      "default": {
        "url": "https://i.ytimg.com/vi/9vzd289Eedk/default.jpg",
        "width": 120,
        "height": 90
      },
      "medium": {
        "url": "https://i.ytimg.com/vi/9vzd289Eedk/mqdefault.jpg",
        "width": 320,
        "height": 180
      },
      "high": {
        "url": "https://i.ytimg.com/vi/9vzd289Eedk/hqdefault.jpg",
        "width": 480,
        "height": 360
      }
    },
    "channelurl": "https://www.youtube.com/channel/UC8kXgHG13XdgsigIPRmrIyA",
    "url": "https://www.youtube.com/watch?v=9vzd289Eedk"
  },
  {
    "kind": "video"
    // Data for your next result in a similar way
  },
  {
    // Data for your next result in a similar way
    "url": "https://www.youtube.com/watch?v=9vzd289Eedk"
  }
]

Now that we have received data from API we will make use of data to represent in our Flutter UI, let’s make ListView which renders a List of cards as shown in the UI image at the introduction and we will get the data like thumbnail, video title and video duration. Onclick of each card let’s direct the user to the respective Youtube Video.

Now if we save and run the App you will get the youtube data from the search method where we have populated data in beautiful cards.If you want to get trending videos just change the method from .search() to .getTrends()

If you want the complete app folder here is a GitHub repository you can fork with.

Conclusion

Awesome! Now we have learnt how we can access youtube API and make use of it in our Flutter app, I hope this article has helped you :-)

Thank you