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
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 :
- Collect Data
- Display Data
- Integrate YouTube… (below)
Starting with integrating YouTube
Steps…
- 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,
UI can be divided into 2 sections,
- Top section (Wonder Image)
- 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://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…:)