How to Implement a Video Call and Messaging System in FlutterFlow

1# pubspec.yaml additions
2dependencies:
3  agora_rtc_engine: ^6.3.2
4  permission_handler: ^11.3.1
5
6# ios/Runner/Info.plist additions:
7# <key>NSCameraUsageDescription</key>
8# <string>Video calling requires camera access</string>
9# <key>NSMicrophoneUsageDescription</key>
10# <string>Video calling requires microphone access</string>
11
12# android/app/src/main/AndroidManifest.xml additions:
13# <uses-permission android:name="android.permission.CAMERA" />
14# <uses-permission android:name="android.permission.RECORD_AUDIO" />
15# <uses-permission android:name="android.permission.INTERNET" />
16# <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

1// functions/getAgoraToken.js
2const functions = require('firebase-functions');
3const { RtcTokenBuilder, RtcRole } = require('agora-access-token');
4
5exports.getAgoraToken = functions.https.onCall(async (data, context) => {
6  if (!context.auth) {
7    throw new functions.https.HttpsError('unauthenticated', 'Must be signed in');
8  }
9  const { channel_name } = data;
10  if (!channel_name) {
11    throw new functions.https.HttpsError('invalid-argument', 'channel_name required');
12  }
13  const appId = functions.config().agora.app_id;
14  const appCertificate = functions.config().agora.app_certificate;
15  const uid = 0; // 0 = auto-assign UID
16  const role = RtcRole.PUBLISHER;
17  const expireTimeSeconds = 3600; // 1 hour
18  const currentTime = Math.floor(Date.now() / 1000);
19  const privilegeExpireTime = currentTime + expireTimeSeconds;
20  const token = RtcTokenBuilder.buildTokenWithUid(
21    appId, appCertificate, channel_name, uid, role, privilegeExpireTime
22  );
23  return { token, channel_name, app_id: appId };
24});

1// lib/custom_widgets/agora_video_call_widget.dart (partial)
2import 'package:agora_rtc_engine/agora_rtc_engine.dart';
3import 'package:flutter/material.dart';
4import 'package:permission_handler/permission_handler.dart';
5
6class AgoraVideoCallWidget extends StatefulWidget {
7  final String appId;
8  final String token;
9  final String channelName;
10  final VoidCallback onCallEnded;
11
12  const AgoraVideoCallWidget({
13    super.key, required this.appId, required this.token,
14    required this.channelName, required this.onCallEnded,
15  });
16
17  @override State<AgoraVideoCallWidget> createState() => _AgoraVideoCallWidgetState();
18}
19
20class _AgoraVideoCallWidgetState extends State<AgoraVideoCallWidget> {
21  late RtcEngine _engine;
22  int? _remoteUid;
23  bool _muted = false;
24  bool _cameraOff = false;
25
26  @override void initState() {
27    super.initState();
28    _initAgora();
29  }
30
31  Future<void> _initAgora() async {
32    await [Permission.camera, Permission.microphone].request();
33    _engine = createAgoraRtcEngine();
34    await _engine.initialize(RtcEngineContext(appId: widget.appId,
35        channelProfile: ChannelProfileType.channelProfileCommunication));
36    _engine.registerEventHandler(RtcEngineEventHandler(
37      onUserJoined: (conn, remoteUid, elapsed) =>
38          setState(() => _remoteUid = remoteUid),
39      onUserOffline: (conn, remoteUid, reason) =>
40          setState(() => _remoteUid = null),
41    ));
42    await _engine.enableVideo();
43    await _engine.startPreview();
44    await _engine.joinChannel(
45      token: widget.token, channelId: widget.channelName,
46      uid: 0, options: const ChannelMediaOptions());
47  }
48
49  @override void dispose() {
50    _engine.leaveChannel();
51    _engine.release();
52    super.dispose();
53  }
54
55  @override Widget build(BuildContext context) => _buildCallUI();
56
57  Widget _buildCallUI() => Stack(children: [
58    // Remote video fills the background
59    _remoteUid != null
60        ? AgoraVideoView(controller: VideoViewController.remote(
61            rtcEngine: _engine, canvas: VideoCanvas(uid: _remoteUid!),
62            connection: RtcConnection(channelId: widget.channelName)))
63        : const Center(child: Text('Waiting for other participant...',
64            style: TextStyle(color: Colors.white))),
65    // Local preview in top-right corner
66    Positioned(top: 20, right: 20, width: 100, height: 140,
67        child: AgoraVideoView(controller: VideoViewController(
68            rtcEngine: _engine, canvas: const VideoCanvas(uid: 0)))),
69    // Call controls
70    Positioned(bottom: 40, left: 0, right: 0,
71        child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
72          IconButton(icon: Icon(_muted ? Icons.mic_off : Icons.mic, color: Colors.white),
73              onPressed: () { setState(() => _muted = !_muted); _engine.muteLocalAudioStream(_muted); }),
74          FloatingActionButton(backgroundColor: Colors.red,
75              onPressed: () async { await _engine.leaveChannel(); widget.onCallEnded(); },
76              child: const Icon(Icons.call_end)),
77          IconButton(icon: Icon(_cameraOff ? Icons.videocam_off : Icons.videocam, color: Colors.white),
78              onPressed: () { setState(() => _cameraOff = !_cameraOff); _engine.muteLocalVideoStream(_cameraOff); }),
79        ])),
80  ]);
81}