Video is worth a thousand pictures…

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

Flutter and YouTube…
Flutter and 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 :

GCP key…
GCP key…

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

Flutter and YouTube…
Flutter and YouTube…

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://medium.com/flutter-community/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)
Flutter and YouTube…
Flutter and YouTube…

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

Not familiar with Google Maps in Flutter, must-read

https://medium.com/flutterpub/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 intoInkWellfor listening to the click/tap events…

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

Flutter and YouTube..

Leave a Reply

Your email address will not be published. Required fields are marked *