How to Implement a Video Streaming Service in FlutterFlow

Open your Firebase console and create a top-level collection named videos. Each document should contain: title (String), description (String), thumbnailUrl (String — a regular image URL), hlsUrl (String — the .m3u8 playlist URL from Mux or Cloudflare Stream), isPremium (Boolean), durationSeconds (Integer), and createdAt (Timestamp). In FlutterFlow, go to Firestore tab → Add Collection → name it videos → add each field with the correct type. This schema gives you everything you need for the UI and access control without any extra Cloud Function calls.

Create a new page named VideoLibrary. Add a GridView widget to the page body. In the GridView settings, set Cross Axis Count to 2 and Child Aspect Ratio to 0.7 to give each card portrait proportions. Inside the GridView cell, build a Column containing: an Image widget bound to thumbnailUrl (set fit to Cover, height 150), a Text widget bound to title, and a small lock Icon widget with visibility conditional on isPremium being true AND the current user's subscription field being false. Set the GridView's data source to a Firestore Query on the videos collection, ordered by createdAt descending, with a page size of 20 for pagination.

Create a page named VideoPlayer that accepts a videoDoc parameter (type: Firestore Document → videos). Add a FlutterFlow VideoPlayer widget at the top, set URL source to the hlsUrl field from the passed document, and enable Auto Play and Show Controls. Below the player, add a Text widget for title and description. Before launching the player, check access: in the GridView tap action, add a Conditional Action — if isPremium is true AND the current user's isPremium app state field is false, navigate to a Paywall page instead of VideoPlayer. Otherwise, navigate to VideoPlayer passing the document reference.

To implement Continue Watching, create a watchHistory subcollection under each user document in Firestore (path: users/{userId}/watchHistory). Each document uses the videoId as its document ID and stores: videoId (String), title (String), thumbnailUrl (String), progressSeconds (Integer), and watchedAt (Timestamp). In the VideoPlayer page, add an On Page Dispose action that calls a Custom Action to write or update the watchHistory document with the current player position. On the VideoLibrary page, add a horizontal ListView at the top querying the current user's watchHistory ordered by watchedAt descending, limited to 10 items.

1// Custom Action: updateWatchHistory
2// Parameters: videoId (String), progressSeconds (int)
3import 'package:cloud_firestore/cloud_firestore.dart';
4import 'package:firebase_auth/firebase_auth.dart';
5
6Future updateWatchHistory(String videoId, int progressSeconds) async {
7  final uid = FirebaseAuth.instance.currentUser?.uid;
8  if (uid == null) return;
9  await FirebaseFirestore.instance
10      .collection('users')
11      .doc(uid)
12      .collection('watchHistory')
13      .doc(videoId)
14      .set({
15        'videoId': videoId,
16        'progressSeconds': progressSeconds,
17        'watchedAt': FieldValue.serverTimestamp(),
18      }, SetOptions(merge: true));
19}

In Firestore, add an isPremium Boolean field to your users collection documents (default false). When a user subscribes via Stripe or your payment provider, a Cloud Function updates this field to true. In FlutterFlow, create an App State variable isPremiumUser (Boolean, persisted). On app launch in your AuthState widget, query the current user document and set the isPremiumUser app state variable from the Firestore isPremium field. Update all premium content checks throughout the app to reference this app state variable. This avoids re-querying Firestore on every navigation and keeps the UI snappy.