Flutter and YouTube

Flutter and YouTube

All in one Flutter resource: https://flatteredwithflutter.com/how-to-use-youtube-in-flutter/

What if the videos on YouTube app, can be viewed on Flutter….Hmmmm

Begin…

Flutterers, (term coined by me), as we can see are growing,

According to LinkedIn, Flutter, is among the fastest growing skills for software engineers

https://www.xda-developers.com/flutter-android-design-angular-material-fastest-growing-skills-software-engineers/

So, are the packages for the dart….One such package that caught my attention was flutter_youtube…

And yes it supports both

• Android
• iOS

The app which we demonstrate below is showing seven wonders of the world. It can be broken down into :

1. Collect Data
2. Display Data
3. Integrate YouTube… (below)

Starting with integrating YouTube

Steps…

1. Install the plugin as,

flutter_youtube: "^1.1.6"

2. Import the package as

import 'package:flutter_youtube/flutter_youtube.dart';

3. Specify your apiKey,

apiKey -> is the google credentials key for your project (GCP project)

You can find your api key under :

4. Use the following to play a video:

FlutterYoutube.playYoutubeVideoByUrl(
  apiKey: "YOUR API KEY",
  videoUrl: "URL TO PLAY",
);

Required parameters

apiKey : From step 3

videoUrl : as per your choice

Optional Parameters:

fullScreen: false,

autoPlay: false,

If all went successful, you will see video opening as below screenshot

Collecting / Retrieving Data…

For the collection of data, we are using Firestore. For retrieval of data, we are using a package called cloud_firestore.

Display Data…

Parent widget is enclosed using a PageView Builder…

If you are not familiar with PageView builder, must-read,

https://readmedium.com/a-deep-dive-into-pageview-in-flutter-with-custom-transitions-581d9ea6dded

UI can be divided into 2 sections,

1. Top section (Wonder Image)
2. Bottom section (Wonder Name and Wonder Location)

Bottom section, uses the Google Maps for showing the location of the current wonder.

Not familiar with Google Maps in Flutter, must-read

https://readmedium.com/flutter-and-google-maps-2b4e332e24ec

Sample Source code in the link for Google Maps….

For setting the location for the wonder, we are using

mapController.animateCamera(
  CameraUpdate.newLatLng(
    LatLng(
      //Latitude of the wonder,
      //Longitude of the wonder,
    ),
  ),
);

Top section, uses the CachedNetworkImage for requesting the image of the wonder….

CachedNetworkImage(
        imageUrl: "YOUR URL",
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
),

The image widget is then wrapped into InkWell for listening to the click/tap events…

and on this tap event, we are eventually calling the YouTube Player…:)

Articles related to Flutter:

Phew…..!