YouTube API

Open console.cloud.google.com and sign in. Select or create a project using the dropdown at the top of the page. In the left sidebar, navigate to APIs & Services → Library. Search for 'YouTube Data API v3' and click Enable. Once enabled, go to APIs & Services → Credentials. Click Create Credentials at the top → choose API key. Google generates an API key immediately — copy it to a safe place. Now restrict the key so it can only be used for YouTube calls from your app. Click the pencil (edit) icon next to the new key. Under Application restrictions, choose 'Android apps' or 'iOS apps' and enter your app's package name and SHA-1 certificate fingerprint (for mobile builds). If you're also building a web version, add 'HTTP referrers' with your app's domain. Under API restrictions, select 'Restrict key' and choose 'YouTube Data API v3' from the dropdown. Click Save. Note your YouTube channel ID if you plan to show channel-specific data. Go to studio.youtube.com → Settings → Channel → Advanced Settings and copy the Channel ID (it looks like UCxxxxxxxxxxxxxxxxxxxx). The API key is used as a query parameter: `?key=YOUR_API_KEY` appended to every YouTube API Call URL in FlutterFlow. This key is safe for client-side use in FlutterFlow API Calls because it is scoped to YouTube only and restricted to your app's identifier — it is the equivalent of a publishable key. Your daily free quota is 10,000 units; check current consumption at Cloud Console → APIs & Services → Dashboard → YouTube Data API v3.

In FlutterFlow, click Custom Code in the left navigation panel. Click + Add → Widget. Name it YouTubePlayerWidget. In the Dependencies field at the top of the code editor, type youtube_player_flutter and add the latest stable version (check pub.dev for the current version number — it is typically 9.x at time of writing). This widget wraps YouTube's official IFrame player, which is the only ToS-compliant way to play YouTube videos inside an app. Paste the Dart code below into the widget editor. The widget accepts a single parameter — videoId (String) — which is the 11-character YouTube video ID extracted from any YouTube URL (for example, in https://www.youtube.com/watch?v=dQw4w9WgXcQ, the ID is dQw4w9WgXcQ). Define the widget parameters in the Settings panel on the right: add a parameter named videoId of type String with no default value. Set the widget's default width to double.infinity and height to 220.0. IMPORTANT: Custom Widgets do not render in FlutterFlow's web Test Mode canvas. The preview will show a placeholder box. To test actual video playback, use Run Mode on a connected Android or iOS device, or create a build (APK/IPA). This is a Flutter platform limitation, not a bug in your code. Once saved, the widget appears in your widget palette. Place it on any page by going to the Widget tab → Custom Widgets → YouTubePlayerWidget. Bind the videoId parameter to the video ID you store in your Data Type from the YouTube API Call in Step 3.

1import 'package:flutter/material.dart';
2import 'package:youtube_player_flutter/youtube_player_flutter.dart';
3
4class YouTubePlayerWidget extends StatefulWidget {
5  final String videoId;
6  final double width;
7  final double height;
8
9  const YouTubePlayerWidget({
10    Key? key,
11    required this.videoId,
12    this.width = double.infinity,
13    this.height = 220.0,
14  }) : super(key: key);
15
16  @override
17  State<YouTubePlayerWidget> createState() => _YouTubePlayerWidgetState();
18}
19
20class _YouTubePlayerWidgetState extends State<YouTubePlayerWidget> {
21  late YoutubePlayerController _controller;
22
23  @override
24  void initState() {
25    super.initState();
26    _controller = YoutubePlayerController(
27      initialVideoId: widget.videoId,
28      flags: const YoutubePlayerFlags(
29        autoPlay: false,
30        mute: false,
31        enableCaption: true,
32      ),
33    );
34  }
35
36  @override
37  void dispose() {
38    _controller.dispose();
39    super.dispose();
40  }
41
42  @override
43  Widget build(BuildContext context) {
44    return SizedBox(
45      width: widget.width,
46      height: widget.height,
47      child: YoutubePlayer(
48        controller: _controller,
49        showVideoProgressIndicator: true,
50        progressIndicatorColor: Colors.red,
51      ),
52    );
53  }
54}

Click API Calls in the left nav panel. Click + Add → Create API Group. Name it YouTube and set the Base URL to https://www.googleapis.com/youtube/v3. In the Headers section of the API Group, add a default header: Accept = application/json. Leave the Authorization header empty — API key authentication in YouTube goes as a URL query parameter, not a header. Now add your first API Call inside the group. Click + Add → Create API Call inside the YouTube group. Name it Get Playlist Videos. Set the Method to GET and the Endpoint to /playlistItems. In the Query Parameters section, add four parameters: - key: click the {{ }} toggle and add a variable, name it apiKey — you'll supply this at call time from FlutterFlow's App State or App Values - playlistId: add a variable named playlistId - part: enter the static value snippet,contentDetails - maxResults: enter 50 Add a second API Call named Get Video Stats. Method GET, endpoint /videos. Query parameters: key (variable apiKey), id (variable videoIds — this will be a comma-separated list of up to 50 video IDs), part (static: snippet,statistics,contentDetails). Add a third API Call named Get Channel Info. Method GET, endpoint /channels. Query parameters: key (variable apiKey), id (variable channelId), part (static: snippet,statistics,contentDetails). For each call, click Response & Test. In the Variables section, fill in your actual API key and a real playlist or channel ID, then click Test. Review the JSON response. Click Generate JSON Paths — FlutterFlow will offer to create response fields. Select the fields you need: for Get Playlist Videos, select items[].snippet.title, items[].snippet.thumbnails.medium.url, items[].contentDetails.videoId, items[].snippet.publishedAt. Click Save to create a Data Type from these paths. For Get Video Stats, select items[].id, items[].statistics.viewCount, items[].statistics.likeCount, items[].statistics.commentCount. For Get Channel Info, select items[].snippet.title, items[].statistics.subscriberCount, items[].statistics.viewCount, items[].statistics.videoCount.

1// API Call config (reference — FlutterFlow generates this visually)
2// GET https://www.googleapis.com/youtube/v3/playlistItems
3// Query params:
4//   key: {{ apiKey }}
5//   playlistId: {{ playlistId }}
6//   part: snippet,contentDetails
7//   maxResults: 50
8//   pageToken: {{ pageToken }}  (optional, for pagination)
9
10// GET https://www.googleapis.com/youtube/v3/videos
11// Query params:
12//   key: {{ apiKey }}
13//   id: {{ videoIds }}   (comma-separated, up to 50)
14//   part: snippet,statistics,contentDetails
15
16// JSON Path examples for parsing playlistItems response:
17// Video ID:    $.items[*].contentDetails.videoId
18// Title:       $.items[*].snippet.title
19// Thumbnail:   $.items[*].snippet.thumbnails.medium.url
20// Published:   $.items[*].snippet.publishedAt
21
22// JSON Path examples for videos response:
23// View count:  $.items[*].statistics.viewCount
24// Like count:  $.items[*].statistics.likeCount
25// Duration:    $.items[*].contentDetails.duration  (ISO-8601, e.g. PT4M13S)
26// Note: duration needs parsing — PT4M13S = 4 minutes 13 seconds

Create a new page for your video feed. Go to Pages → + Add Page → Blank. Name it VideoFeed. In the Action Flow Editor for the page's On Load event, add a Backend/API Call action pointing to Get Playlist Videos. Pass the playlistId as a constant (your specific playlist ID) and the apiKey from App State. Store the response in a Page State variable named playlistResponse. Drag a ListView widget onto the page from the widget panel. In the ListView's Generate Children section, bind the source to your Data Type for playlist items populated from the API response. Inside the list item template, add: - A CachedNetworkImage (or the standard Image widget) bound to items[].snippet.thumbnails.medium.url for the thumbnail - A Text widget bound to items[].snippet.title for the video title - A Text widget bound to items[].snippet.publishedAt (you can format this in FlutterFlow's string formatting options) Set each list item as a GestureDetector or add a tap action. On tap, navigate to a VideoDetail page and pass the contentDetails.videoId and snippet.title as page parameters. On the VideoDetail page, place your YouTubePlayerWidget Custom Widget at the top. Bind its videoId parameter to the videoId page parameter received from navigation. Below the player, add Text widgets for the video title and any other details. To add view counts and statistics, you need a second API call. In the VideoDetail page's On Load action flow, add a Backend/API Call for Get Video Stats, passing the videoId. Store the result and bind the view count, like count, and comment count to Text widgets on the page. Note on the ISO-8601 duration format: the contentDetails.duration field returns strings like PT4M13S (4 minutes, 13 seconds) or PT1H2M30S. FlutterFlow doesn't natively parse this — either display it raw or convert it in a Custom Function: parse out hours (H), minutes (M), and seconds (S) using string operations and format as '4:13' for display.

1// Custom Function: parse ISO-8601 duration to readable format
2// Add in Custom Code → Functions
3String parseYouTubeDuration(String iso8601) {
4  final regex = RegExp(
5    r'PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?',
6  );
7  final match = regex.firstMatch(iso8601);
8  if (match == null) return iso8601;
9  final hours = int.tryParse(match.group(1) ?? '0') ?? 0;
10  final minutes = int.tryParse(match.group(2) ?? '0') ?? 0;
11  final seconds = int.tryParse(match.group(3) ?? '0') ?? 0;
12  if (hours > 0) {
13    return '$hours:${minutes.toString().padLeft(2, '0')}:${seconds.toString().padLeft(2, '0')}';
14  }
15  return '$minutes:${seconds.toString().padLeft(2, '0')}';
16}

The single most important performance decision in a YouTube-connected FlutterFlow app is: never call search.list on user input events. A search.list call costs 100 quota units — with a 10,000-unit daily budget, your app can make only ~100 searches per day before hitting a 403 quotaExceeded error. Here is how to design around that ceiling. For browsing content you control (your own channel's videos), use the uploads playlist approach instead of search. In Get Channel Info, the response includes contentDetails.relatedPlaylists.uploads — this is a playlist ID for all of a channel's uploads. Fetch this playlist with Get Playlist Videos (1 unit per 50 videos) instead of search.list. Cache this playlist data in Firestore or Supabase so repeated app loads by different users all share a single API draw rather than each triggering a new call. If you do need keyword search (search.list), trigger it ONLY when the user explicitly taps a Search button — never on TextField onChange. Add a debounce of at least 1 second if you want type-ahead, and make the Search button the primary interaction. Store recent search results in Firestore (or Supabase) keyed by the search query string. Before calling the YouTube API, check if a cached result exists and is less than 1 hour old; if so, return the cached result instead. To implement caching in FlutterFlow: create a Firestore collection named youtube_cache with fields: query (String), results (JSON), cached_at (Timestamp). In your search action flow, first run a Firestore query checking for a matching entry less than 1 hour old (using a date comparison condition). If found, use the cached results. If not found, call the YouTube API, then write the results to youtube_cache. This pattern can stretch a 10,000-unit budget across hundreds of users. For teams building YouTube-integrated apps as a product feature, RapidDev's engineers have built quota management architectures like this for multiple FlutterFlow clients — you can book a free scoping call at rapidevelopers.com/contact to discuss your specific quota and caching needs.

1// Firebase Cloud Function proxy for OAuth private data
2// (Only needed for private channel management / analytics)
3// Deploy to: Firebase Console → Functions
4const functions = require('firebase-functions');
5const admin = require('firebase-admin');
6const { google } = require('googleapis');
7
8admin.initializeApp();
9
10exports.youtubePrivateData = functions.https.onRequest(async (req, res) => {
11  res.set('Access-Control-Allow-Origin', '*');
12  if (req.method === 'OPTIONS') {
13    res.set('Access-Control-Allow-Methods', 'GET');
14    res.set('Access-Control-Allow-Headers', 'Content-Type,Authorization');
15    return res.status(204).send('');
16  }
17  // Verify Firebase Auth token from FlutterFlow
18  const authHeader = req.headers.authorization || '';
19  const idToken = authHeader.replace('Bearer ', '');
20  try {
21    await admin.auth().verifyIdToken(idToken);
22  } catch (e) {
23    return res.status(401).json({ error: 'Unauthorized' });
24  }
25  // Use server-side OAuth credentials (stored in Cloud Functions config)
26  const oauth2Client = new google.auth.OAuth2(
27    process.env.YOUTUBE_CLIENT_ID,
28    process.env.YOUTUBE_CLIENT_SECRET,
29    process.env.YOUTUBE_REDIRECT_URI
30  );
31  oauth2Client.setCredentials({
32    refresh_token: process.env.YOUTUBE_REFRESH_TOKEN
33  });
34  const youtube = google.youtube({ version: 'v3', auth: oauth2Client });
35  const { endpoint, params } = req.query;
36  // Route to the requested YouTube endpoint
37  const response = await youtube.channels.list({
38    part: ['snippet', 'statistics'],
39    mine: true,
40  });
41  return res.json(response.data);
42});

If your app needs to access private YouTube data — such as your own channel's unlisted videos, comment moderation, or YouTube Analytics time-series metrics — you must use Google OAuth 2.0. The OAuth client secret cannot be placed in FlutterFlow's API Call group (it would ship in the compiled app), so this step walks through the Firebase Cloud Function proxy pattern. In Google Cloud Console, go to APIs & Services → Credentials → Create Credentials → OAuth 2.0 Client ID. Select Web application (not Android/iOS — the web type is needed for server-to-server use). Set the redirect URI to your Cloud Function's URL. Download the client ID and secret. In Firebase Console, create a Cloud Function (use the code snippet in this step as your starting template). Store the client secret, client ID, and a long-lived refresh token as environment variables using firebase functions:config:set in the Firebase CLI (not shown inline — RapidDev sets this up as a deployment step for clients). The function receives requests from FlutterFlow, verifies the user's Firebase Auth token, uses the stored credentials to call YouTube on the server, and returns the result. In FlutterFlow, create a new API Group named YouTubePrivate with the base URL pointing to your Cloud Function's HTTPS endpoint (visible in Firebase Console → Functions after deployment). Add API Calls within this group for the private operations you need — for example, GET /myChannel for channel stats with the mine=true parameter (which requires OAuth and can only be served from the proxy). Because the proxy returns the same JSON structure as the YouTube API, you can reuse the same Data Types and JSON Path bindings you set up in Step 3. For most apps — particularly read-only video browsing, channel pages, and playlist feeds — this step is entirely optional. An API key is sufficient for all public data, and most FlutterFlow YouTube integrations never need the proxy.