Vimeo

Log in to developer.vimeo.com with your Vimeo Pro (or higher) account. Click 'Create an app' and fill in the app name, description, and app URL. Under 'What API scopes do you need?', select the scopes your integration requires: 'Public' for public video data, 'Private' to access unlisted or private videos, 'Video Files' if you need direct file URLs, 'Interact' for likes and comments, and 'Edit' or 'Upload' if you'll be managing or uploading videos. After creating the app, go to the 'Authentication' section and click 'Generate an Access Token.' Choose 'Authenticated (you)' for a personal token that accesses your account's videos, or 'OAuth 2.0' for a flow where your app's users can authorize with their own Vimeo accounts. Copy the generated personal access token immediately — it's only shown once in full and you'll need to regenerate if you miss it. Store it in your password manager. This token is your Vimeo API credential and goes into Firebase Secrets in the next step — it must never be placed in a FlutterFlow API Call header or in your app's source code. Also note your Vimeo user ID (the numeric ID visible in your profile URL or via the /me endpoint) — you'll use it to construct API endpoints for listing your videos.

The Vimeo player embed is the fastest path to video playback in FlutterFlow and requires no API credentials. The embed URL format is https://player.vimeo.com/video/{videoId}?autoplay=0&loop=0&color=ffffff — you can customize color (your brand hex), autoplay behavior, and loop via URL parameters. In FlutterFlow, go to Custom Code in the left nav → + Add → Widget. Name it 'VimeoPlayerWidget'. In the Dependencies field, add webview_flutter (check pub.dev for the current stable version). The widget takes two String parameters: videoId (the numeric Vimeo video ID) and optionally playerColor (hex string without #, e.g., '1ab7ea'). Paste the Dart code below. The widget builds the embed URL, loads it in a WebView, and sizes responsively to the parent container. After creating the widget, add it to your video detail screen. Set the videoId parameter from your video list item — either hardcoded for a single video or dynamically from your Vimeo API response. Set the height to approximately 56% of the screen width (16:9 aspect ratio) — use a Container with fixed height and set VimeoPlayerWidget to fill it. Custom Widgets do not render in FlutterFlow's web Test Mode — you must use Run mode or test on a real device to see the embedded player. Always test on the target platform (iOS and Android behave slightly differently with WebView content).

1import 'package:flutter/material.dart';
2import 'package:webview_flutter/webview_flutter.dart';
3
4class VimeoPlayerWidget extends StatefulWidget {
5  const VimeoPlayerWidget({
6    super.key,
7    required this.videoId,
8    this.playerColor = '1ab7ea',
9    this.width,
10    this.height,
11  });
12
13  final String videoId;
14  final String playerColor;
15  final double? width;
16  final double? height;
17
18  @override
19  State<VimeoPlayerWidget> createState() => _VimeoPlayerWidgetState();
20}
21
22class _VimeoPlayerWidgetState extends State<VimeoPlayerWidget> {
23  late final WebViewController _controller;
24
25  @override
26  void initState() {
27    super.initState();
28    final embedUrl =
29        'https://player.vimeo.com/video/${widget.videoId}'
30        '?autoplay=0&loop=0&color=${widget.playerColor}&byline=0&portrait=0';
31
32    _controller = WebViewController()
33      ..setJavaScriptMode(JavaScriptMode.unrestricted)
34      ..loadRequest(Uri.parse(embedUrl));
35  }
36
37  @override
38  Widget build(BuildContext context) {
39    return SizedBox(
40      width: widget.width ?? double.infinity,
41      height: widget.height ?? 220,
42      child: WebViewWidget(controller: _controller),
43    );
44  }
45}

For library management — listing your videos, reading view counts and privacy settings, or updating metadata — you need authenticated calls to the Vimeo REST API. These calls use your personal access token as a Bearer header and must be made from a server-side proxy, not from FlutterFlow directly. Store your Vimeo token as a Firebase Secret: firebase functions:secrets:set VIMEO_ACCESS_TOKEN. Deploy a Cloud Function (see the code snippet) that accepts a POST request from FlutterFlow with the Vimeo API endpoint path and optional query parameters, attaches the Authorization: bearer {token} header (note Vimeo uses lowercase 'bearer'), and forwards the request to https://api.vimeo.com. It returns the Vimeo API response directly to FlutterFlow. For library-heavy apps, also add a Firestore caching layer: the proxy can write video lists to Firestore after fetching them, and your FlutterFlow app reads the cached data for list screens. Use a scheduled Cloud Function to refresh the cache every few hours. This is also where video upload handling should live — Vimeo uses a resumable tus upload protocol that is complex for a mobile client. If your app needs video uploads, the Firebase proxy should handle the tus negotiation and upload entirely server-side. If this proxy setup feels like a lot to build, RapidDev's team implements FlutterFlow integrations with services like Vimeo every week — schedule a free scoping call at rapidevelopers.com/contact.

1// Firebase Cloud Function — Vimeo REST API proxy (Node.js)
2const { onRequest } = require('firebase-functions/v2/https');
3const { defineSecret } = require('firebase-functions/params');
4const fetch = require('node-fetch');
5
6const VIMEO_TOKEN = defineSecret('VIMEO_ACCESS_TOKEN');
7
8exports.vimeoProxy = onRequest(
9  { secrets: [VIMEO_TOKEN] },
10  async (req, res) => {
11    res.set('Access-Control-Allow-Origin', '*');
12    if (req.method === 'OPTIONS') {
13      res.set('Access-Control-Allow-Methods', 'POST');
14      res.set('Access-Control-Allow-Headers', 'Content-Type');
15      return res.status(204).send('');
16    }
17
18    const { endpoint, queryParams, method, body } = req.body;
19    const url = new URL(`https://api.vimeo.com${endpoint}`);
20
21    if (queryParams) {
22      Object.entries(queryParams).forEach(([k, v]) =>
23        url.searchParams.set(k, v)
24      );
25    }
26
27    const vimeoRes = await fetch(url.toString(), {
28      method: method || 'GET',
29      headers: {
30        Authorization: `bearer ${VIMEO_TOKEN.value()}`,
31        Accept: 'application/vnd.vimeo.*+json;version=3.4',
32        'Content-Type': 'application/json',
33      },
34      body: body ? JSON.stringify(body) : undefined,
35    });
36
37    const data = await vimeoRes.json();
38    return res.status(vimeoRes.status).json(data);
39  }
40);

In FlutterFlow, click API Calls in the left nav → + Add → Create API Group. Name it 'VimeoProxy' and set the Base URL to your Firebase Cloud Function URL. Add two primary API Calls: 1. 'List Videos' — POST with JSON body { endpoint: '/me/videos', queryParams: { per_page: '20', fields: 'uri,name,description,duration,pictures,stats,privacy' } }. The fields parameter limits the response to only the data you need, improving performance. In the Response & Test tab, paste a sample Vimeo /me/videos response and auto-generate JSON paths. Key paths: $.data[*].uri (full URI like /videos/123456), $.data[*].name, $.data[*].duration (seconds), $.data[*].pictures.sizes[0].link (thumbnail URL — use a larger size index like [3] or [4] for higher quality), $.data[*].stats.plays (view count), $.data[*].privacy.view (privacy setting string). Create a 'VimeoVideo' Data Type with these fields. 2. 'Get Video Detail' — POST with JSON body { endpoint: '/videos/{videoId}' (pass as a variable in the body or endpoint path) }. Parse the full video response including description, tags, and current privacy settings. For the video ID: extract it from the uri field by taking the last segment (e.g., /videos/123456 → 123456). Use a Custom Function in FlutterFlow to perform the string split: uri.split('/').last. Pass the extracted ID to your VimeoPlayerWidget as the videoId parameter.

1{
2  "Group Name": "VimeoProxy",
3  "Base URL": "https://us-central1-your-project.cloudfunctions.net/vimeoProxy",
4  "Calls": [
5    {
6      "Name": "List Videos",
7      "Method": "POST",
8      "Body": {
9        "endpoint": "/me/videos",
10        "queryParams": {
11          "per_page": "20",
12          "fields": "uri,name,description,duration,pictures,stats,privacy"
13        }
14      },
15      "JSON Paths": {
16        "uri": "$.data[*].uri",
17        "name": "$.data[*].name",
18        "duration": "$.data[*].duration",
19        "thumbnailUrl": "$.data[*].pictures.sizes[3].link",
20        "viewCount": "$.data[*].stats.plays",
21        "privacyView": "$.data[*].privacy.view"
22      }
23    },
24    {
25      "Name": "Get Video Detail",
26      "Method": "POST",
27      "Body": {
28        "endpoint": "/videos/[variable:videoId]"
29      },
30      "JSON Paths": {
31        "name": "$.name",
32        "description": "$.description",
33        "duration": "$.duration",
34        "privacyView": "$.privacy.view",
35        "privacyDomain": "$.privacy.domains"
36      }
37    }
38  ]
39}

With the API Calls configured and the VimeoPlayerWidget ready, build the complete video library experience in FlutterFlow. Add a screen called 'Video Library' with a ListView that loads videos on page load using the 'List Videos' API Call. Store the result in a Page State variable videoList (list of VimeoVideo Data Type). For each ListView item, add a Card containing: a Network Image widget bound to VimeoVideo.thumbnailUrl; a duration badge (convert seconds to MM:SS using a Custom Function: '${(dur ~/ 60).toString().padLeft(2, '0')}:${(dur % 60).toString().padLeft(2, '0')}'); the video name in a bold Text widget; and a Text chip showing the privacy view setting (e.g., 'anybody', 'unlisted', 'password') so admins can see content access at a glance. On tap, navigate to a 'Video Player' screen. Pass the video ID (extracted from the uri field) and the video name as navigation parameters. On the Video Player screen, add the VimeoPlayerWidget at the top with the videoId parameter bound to the navigation-passed ID. Below it, show title, description, and view count (fetched on-screen-open via 'Get Video Detail'). Add a Pull to Refresh on the library screen that re-calls 'List Videos' and updates the page state. Note: the VimeoPlayerWidget requires testing in Run mode on a real device — it will appear as a grey box in web Test Mode preview.