How to Build an Online Tutoring Platform with Video Calls in FlutterFlow

Your Firestore structure needs four collections. The tutors collection extends users with fields: displayName, avatarUrl, subjects (Array of String), hourlyRate (Number), rating (Number), reviewCount (Number), bio (String), availableSlots (Array of Maps with startTime and endTime Timestamps), and stripeAccountId for payout routing. The sessions collection is the central booking record: studentId, tutorId, subjectId, scheduledAt (Timestamp), durationMinutes (Number), status (String: Pending / Confirmed / In Progress / Completed / Cancelled), agoraChannelName (String, unique per session), agoraToken (String, generated at booking time), paymentIntentId (String), amountCents (Number), and whiteboardId (String). Create a whiteboards subcollection under each session document for real-time stroke syncing. This schema keeps all session-critical data — including the unique video token — in one document.

Create a TutorBrowsePage with a search TextField bound to a Firestore query on the tutors collection filtered by subjects arrayContains the search term. Display results in a ListView with tutor avatar, name, subjects row, star rating, and hourly rate. Tapping a tutor opens TutorProfilePage showing their full bio, reviews from a reviews subcollection, and an availability calendar. The calendar is a horizontal scrollable list of date chips for the next 14 days. Selecting a date shows the available time slots for that day (filtered from the tutor's availableSlots array). Tapping a slot opens a booking confirmation dialog showing the total cost (durationMinutes / 60 * hourlyRate). Tapping 'Book and Pay' calls a Cloud Function that creates the session document, generates the Agora token, creates a Stripe Payment Intent, and returns the client secret for Stripe Checkout.

Create a Cloud Function called createTutoringSession. It accepts studentId, tutorId, scheduledAt, durationMinutes, and subjectId. Inside the function: generate a UUID for the channel name, use the Agora Access Token library (agora-access-token npm package) to generate a token with the channel name, your App ID, and App Certificate — set the token expiry to the session duration plus 30 minutes. Generate a Stripe Payment Intent for the session amount. Create the session document in Firestore with all fields including agoraChannelName, agoraToken (encrypted at rest by Firestore), paymentIntentId, and status: 'Pending'. Return the session document ID and Stripe client secret to the caller. The Agora App Certificate must be stored in Firebase Secret Manager — never in client code or plain function config.

1// functions/index.js
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const { RtcTokenBuilder, RtcRole } = require('agora-access-token');
5const Stripe = require('stripe');
6const { v4: uuidv4 } = require('uuid');
7admin.initializeApp();
8
9exports.createTutoringSession = functions.https.onCall(async (data, context) => {
10  if (!context.auth) throw new functions.https.HttpsError('unauthenticated', 'Login required');
11
12  const { tutorId, scheduledAt, durationMinutes, subjectId, amountCents } = data;
13  const studentId = context.auth.uid;
14
15  const appId = process.env.AGORA_APP_ID;
16  const appCertificate = process.env.AGORA_APP_CERTIFICATE;
17  const stripeSecretKey = process.env.STRIPE_SECRET_KEY;
18
19  // Generate unique channel name
20  const channelName = uuidv4().replace(/-/g, '');
21
22  // Generate per-session Agora token (expires at session end + 30 min buffer)
23  const expirySeconds = Math.floor(Date.now() / 1000) + (durationMinutes + 30) * 60;
24  const token = RtcTokenBuilder.buildTokenWithUid(
25    appId, appCertificate, channelName, 0, RtcRole.PUBLISHER, expirySeconds
26  );
27
28  // Create Stripe Payment Intent
29  const stripe = Stripe(stripeSecretKey);
30  const paymentIntent = await stripe.paymentIntents.create({
31    amount: amountCents,
32    currency: 'usd',
33    metadata: { studentId, tutorId, channelName },
34  });
35
36  // Create session document
37  const sessionRef = await admin.firestore().collection('sessions').add({
38    studentId,
39    tutorId,
40    subjectId,
41    scheduledAt: new Date(scheduledAt),
42    durationMinutes,
43    status: 'Pending',
44    agoraChannelName: channelName,
45    agoraToken: token,
46    paymentIntentId: paymentIntent.id,
47    amountCents,
48    createdAt: admin.firestore.FieldValue.serverTimestamp(),
49  });
50
51  return {
52    sessionId: sessionRef.id,
53    clientSecret: paymentIntent.client_secret,
54  };
55});

Add agora_rtc_engine: ^6.3.2 to your pubspec dependencies. Create a Custom Widget called AgoraVideoCallWidget. In initState, initialize RtcEngine with your Agora App ID. Read the agoraChannelName and agoraToken from the session document passed as parameters. Call engine.joinChannelWithUserAccount() with the token, channel name, and current user UID. Add two RtcLocalView and RtcRemoteView widgets inside a Stack — the remote view fills the screen, and the local view appears as a small picture-in-picture in the corner. Add floating action buttons for mute audio, toggle camera, flip camera, and end call. When end call is tapped, call engine.leaveChannel() and update the session status to 'Completed' in Firestore. The video widget reads the token from Firestore — never from a client-side constant.

Create a WhiteboardWidget Custom Widget. Use Flutter's GestureDetector to capture pan gestures as drawing strokes. Each stroke is a list of Offset points. When the user lifts their finger, save the stroke as a new document in sessions/{sessionId}/whiteboards/{strokeId} with fields: userId, color (hex), strokeWidth (double), points (Array of Maps with x and y doubles), and timestamp. Subscribe to the whiteboards subcollection with a Firestore real-time listener. On each new document, add the stroke to a local list and repaint using a CustomPainter. Both tutor and student see strokes appear in real time as each other draws. Add a 'Clear All' button that deletes all stroke documents in a batch. Add color and brush-size selection at the top of the widget.