ZEGOCLOUD
First of all, a big thanks to the Flutter community and the ZEGOCLOUD team for making real-time communication so easy for developers. Building video calling features used to be complex, but with tools like ZEGOCLOUD UI Kits, it has become surprisingly simple and developer-friendly.
What is ZEGOCLOUD
ZEGOCLOUD is a real-time communication (RTC) platform that helps developers easily add features like video calling, audio calling, live streaming, and in-app chat into their applications. Instead of building complex communication systems from scratch, ZEGOCLOUD provides ready-made SDKs and UI Kits that work on multiple platforms, including Flutter, Android, iOS, and Web. It handles all the heavy tasks such as media streaming, signaling, and call management, allowing developers to focus on building their app’s core features. With flexible pricing and a free testing tier, ZEGOCLOUD is a practical and developer-friendly solution for real-time communication needs.
WHY I CHOOSE FLUTTER
I chose Flutter because it allows me to build high-quality, cross-platform applications using a single codebase. Instead of maintaining separate apps for Android, iOS, web, or desktop, Flutter lets me develop everything from one codebase, which saves time and reduces complexity. It offers excellent performance, a fast development cycle with hot reload, and a rich set of customizable UI widgets that help create smooth and modern user experiences. Flutter also has a strong community and growing ecosystem, making it easier to find support, packages, and best practices while building scalable applications.
UI KITS
A UI Kit is a set of ready-made user interface components that developers can easily plug into their apps. It helps save development time by providing prebuilt screens and UI elements, allowing complex features to be added quickly without building everything from scratch.
Project Configuration
1:Integrating SDK
First you have to download the package of zego uikit prebuilt call
If your project is built using Flutter 2.x.x, you need to update the Android SDK configuration. Open the your_project/android/app/build.gradle file and set the compileSdkVersion to 33 to ensure compatibility with the latest Android features and ZEGOCLOUD SDK requirements.
and in the same file build.gradle located in your_app_name/android/build.gradle you have to change min sdk version to 21
To allow video calling features like camera and microphone access, open the file your_project/android/app/src/main/AndroidManifest.xml. Add the required permissions to ensure the app can access the internet, camera, and audio during a call.
After that , Inside your project folder, go to your_project/android/app and create a file named proguard-rules.pro.
Add this line to that file:
-keep class **.zego.** { *; }
This ensures all Zego classes are kept intact during code shrinking/obfuscation.
Next, open your_project/android/app/build.gradle and in the release section, make sure the ProGuard configuration includes your new rules file like this:
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
now lets come to our main code
The Home Screen has two fields: Call ID and Username. When the user taps the login button, they are taken to the Video Call screen to start a call with another person. The User ID is automatically generated
*Home Screen *
import 'package:flutter/material.dart';
import 'package:video_app/call_page.dart';
import 'dart:math';
import 'package:permission_handler/permission_handler.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
// Controllers
final TextEditingController _nameController = TextEditingController();
final TextEditingController _callIDController = TextEditingController();
@override
void dispose() {
_nameController.dispose();
_callIDController.dispose();
super.dispose();
}
Future<bool> requestPermissions() async {
Map<Permission, PermissionStatus> statuses = await [
Permission.camera,
Permission.microphone,
].request();
bool cameraGranted = statuses[Permission.camera] == PermissionStatus.granted;
bool micGranted = statuses[Permission.microphone] == PermissionStatus.granted;
return cameraGranted && micGranted;
}
void _joinCall() async {
// 1. Permissions Request
if (!await requestPermissions()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text(
"Camera and Microphone permission required for video call.")),
);
return;
}
String userName = _nameController.text.trim();
String callID = _callIDController.text.trim();
if (userName.isEmpty) {
userName = "GuestUser";
}
if (callID.isEmpty) {
callID = "call_${Random().nextInt(100000)}";
}
String userID = "user_${Random().nextInt(10000)}";
// Navigate
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => CallPage(
callID: callID,
userID: userID, // Randomly generated unique userID
userName: userName,
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Zego Video Call Home")),
body: Padding(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: _nameController,
decoration: const InputDecoration(
labelText: "Your Name",
border: OutlineInputBorder(),
),
),
const SizedBox(height: 20),
TextField(
controller: _callIDController,
decoration: const InputDecoration(
labelText: "Call ID ",
border: OutlineInputBorder(),
),
),
const SizedBox(height: 30),
// Button
ElevatedButton(
onPressed: _joinCall,
child: const Text("Start Call"),
)
],
),
),
);
}
}
The CallPage method uses ZEGOCLOUD UIKit for video calling and requires the following parameters: AppId, AppSign, CallId, UserId, and UserName.
AppId: Obtain this from your app’s dashboard.
AppSign: This key is also available on the dashboard for the same app. Ensure that AppId and AppSign belong to the same project.
CallId: A unique numeric ID that acts like a room identifier. Other users can join the call if they know this CallId.
The CallPage method is triggered from the Home Screen when the user enters a CallId and click join.
If the CallId is already associated with an existing channel/room, the user will automatically join that ongoing video call.
import 'package:flutter/material.dart';
import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';
class CallPage extends StatelessWidget {
final String callID;
final String userID;
final String userName;
const CallPage({
Key? key,
required this.callID,
required this.userID,
required this.userName,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return ZegoUIKitPrebuiltCall(
appID: **********, // Fill in the appID that you get from ZEGOCLOUD Admin Console.
appSign: "*********************************", // Fill in the appSign that you get from ZEGOCLOUD Admin Console.
userID: userID,
userName: userName,
callID: callID,
config: ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall()
..turnOnCameraWhenJoining = true
..turnOnMicrophoneWhenJoining = true
..useFrontCameraWhenJoining = true
..useSpeakerWhenJoining = true,
);
}
}
HOME SCREEN
VIDEO CALL
This includes all the code provided so far, but make sure to explore additional SDKs and services offered by ZEGOCLOUD to unlock more features. You can find detailed information and documentation on their official website
to help you get started and extend your app’s capabilities.
zego cloud flutter ui kit tutorial:
ZegoCloud UI Kit
zego cloud website:
ZegoCloud website
call page image:
Top comments (0)