How to Use FlutterFlow to Develop a Custom Video Conferencing App

Create a rooms collection with fields: roomId (String, short joinable code), createdBy (Reference to users), participants (Array of user References), status (String: waiting/active/ended), createdAt (Timestamp). Deploy a Cloud Function generateAgoraToken(channelName, uid) that uses the Agora RTC Token Builder with your App Certificate to generate a temporary token valid for 1 hour. Store the App Certificate only in the Cloud Function environment config, never expose it to the client. The function returns the token and the Agora App ID.

Create a Custom Widget named VideoCallView with parameters: agoraAppId (String), agoraToken (String), channelName (String), localUid (Int). Add the agora_rtc_engine package as a dependency. In initState, create an RtcEngine instance, enable video, set channel profile to communication, and join the channel with the token. Use onUserJoined and onUserOffline callbacks to maintain a local list of remote UIDs. Render the local video with AgoraVideoView(controller: VideoViewController) and each remote video with AgoraVideoView(controller: VideoViewController.remote(uid)). Arrange them in a layout that switches between full-screen for one participant and a GridView for multiple.

On the Create Room page, generate a 6-character alphanumeric room code. On tap, create a Firestore room doc with the code, createdBy as the current user, participants array containing the current user, and status waiting. Then call the generateAgoraToken Cloud Function with the room code as channelName. Navigate to the Call page passing the token, appId, and channelName. On the Join Room page, provide a TextField for entering the room code. On tap, query rooms where roomId equals the entered code and status is not ended. If found, add the current user to the participants array, call generateAgoraToken, and navigate to the Call page.

On the Call page, place the VideoCallView Custom Widget in the center. At the bottom, add a Row of circular IconButtons: microphone (toggle mute), camera (toggle video), camera switch (front/back), and red phone (end call). Create Page State booleans: isMuted and isVideoOff. On microphone tap, toggle isMuted and call the Custom Widget's muteLocalAudioStream method. On camera tap, toggle isVideoOff and call enableLocalVideo. On camera switch, call switchCamera. On end call, leave the Agora channel, remove the current user from the Firestore room participants array, and navigate back. If participants array is empty after removal, update room status to ended.

Inside the VideoCallView Custom Widget, implement adaptive layout logic. For 1 remote participant: local video as small overlay in top-right corner (Positioned inside a Stack), remote video full-screen. For 2 remote participants: Column with two equal-height video views plus local overlay. For 3 or more: GridView with crossAxisCount of 2, each cell containing a remote video, with the local video occupying one cell. Display participant display names by querying Firestore user docs by UID. Show a subtle name label at the bottom of each video tile. Add a participant count badge in the AppBar.