How to Integrate Video Chat Features in FlutterFlow Using Agora

Sign in to console.agora.io → Create a new project. Choose Testing mode initially (no token required) for development, then switch to Secured mode for production. Copy the App ID from the project dashboard — this is safe to use in client code. Copy the App Certificate — this must NEVER be in client code. In FlutterFlow, go to Custom Code → Pubspec Dependencies → Add Dependency. Add agora_rtc_engine with the latest stable version (check pub.dev for current version: as of Q1 2026, version 6.3.x is stable). Also add permission_handler for requesting camera/microphone permissions at runtime. Click Compile Code to verify the dependencies resolve.

Deploy a Cloud Function named generateAgoraToken. Install the Agora token library: npm install agora-access-token in your functions directory. The function accepts channelName and userId as parameters. It imports AgoraAccessToken, creates a RtcTokenBuilder, and builds a token with role Publisher, expiry of 3600 seconds (1 hour), and the App Certificate stored in Cloud Function environment: firebase functions:config:set agora.app_id='YOUR_APP_ID' agora.app_certificate='YOUR_CERTIFICATE'. Return the token and appId to the caller. FlutterFlow will call this function before joining any channel, ensuring tokens are always fresh.

1const functions = require('firebase-functions');
2const { RtcTokenBuilder, RtcRole } = require('agora-access-token');
3
4const APP_ID = functions.config().agora.app_id;
5const APP_CERTIFICATE = functions.config().agora.app_certificate;
6
7exports.generateAgoraToken = functions.https.onRequest((req, res) => {
8  res.set('Access-Control-Allow-Origin', '*');
9  if (req.method === 'OPTIONS') return res.status(204).send('');
10
11  const { channelName, userId } = req.query;
12  if (!channelName || !userId) {
13    return res.status(400).json({ error: 'channelName and userId required' });
14  }
15
16  const expirationTimeInSeconds = 3600;
17  const currentTimestamp = Math.floor(Date.now() / 1000);
18  const privilegeExpiredTs = currentTimestamp + expirationTimeInSeconds;
19
20  const token = RtcTokenBuilder.buildTokenWithUid(
21    APP_ID,
22    APP_CERTIFICATE,
23    channelName,
24    parseInt(userId) || 0,
25    RtcRole.PUBLISHER,
26    privilegeExpiredTs
27  );
28
29  res.json({ token, appId: APP_ID, channelName });
30});

In FlutterFlow → Custom Code → Custom Widgets → Add Widget. Name it VideoCallWidget. Add parameters: channelName (String), token (String), appId (String), userId (Integer), isHost (Boolean). The widget builds using StatefulWidget. In initState, request camera and microphone permissions using permission_handler. Create the RtcEngine: await RtcEngine.createWithContext(RtcEngineContext(appId)). Enable video: await _engine.enableVideo(). Join the channel: await _engine.joinChannel(token: token, channelId: channelName, info: null, uid: userId). In the build method, return a Stack containing: a full-screen AgoraVideoView for the remote video, and a small AgoraVideoView in the bottom-right corner for the local video preview using RtcLocalView.SurfaceView(). Add event handlers for onUserJoined, onUserOffline, and onTokenPrivilegeWillExpire (to refresh the token from the Cloud Function).

In the VideoCallWidget, add a Positioned widget at the bottom of the Stack containing a Row of control buttons. Each button is a CircleAvatar with an IconButton. Controls needed: (1) Mute audio toggle — calls _engine.muteLocalAudioStream(isMuted). Change microphone icon to mic_off when muted. (2) Toggle camera on/off — calls _engine.muteLocalVideoStream(isCameraOff). Replace local video with a grey placeholder when off. (3) Switch front/back camera — calls _engine.switchCamera(). (4) End call — calls _engine.leaveChannel(), disposes the engine, and calls the onCallEnded callback parameter to navigate back in FlutterFlow. Track state of each toggle using setState so button icons update visually.

Create a VideoCallPage with Page Parameters: channelName (String) and targetUserId (String). Add an On Page Load Action Flow: (1) Call the generateAgoraToken Cloud Function API passing channelName and current user UID. (2) Store the returned token in Page State tokenValue. (3) Store appId in Page State appIdValue. Once Page State is populated, show the VideoCallWidget bound to these values. Create a call-initiation Action Flow on your chat screen: generate a unique channelName (e.g., Firebase push ID), write a callNotification to Firestore with channelName and targetUserId, then navigate to VideoCallPage passing the channelName. On the other user's device, a real-time Backend Query on callNotifications detects the incoming call and shows an incoming call Bottom Sheet with Accept (navigate to VideoCallPage) and Decline buttons.