Have you ever thought or had to integrate communication features in you application and the complexity almost turned you off? or even many times wouldn't just work.
In this technical write-up, I will be showing you a seamless solution to achieve many communication features within your app in Flutter using Zegocloud without having to reinvent the wheel. Zegocloud is a global communication service provider which provides powerful communication SDKs & APIs for app development (chat messaging, video and voice calls, video conference and live-streaming) with developer-friendly environment and features like:
- Ready-to-use 1-on-1/group calls
- Customizable UI styles
- Real-time sound waves display
- Device management
- Switch views during a 1-on-1 call
- Extendable menu bar
- Participant list
- Call invitation/Offline call invitation
- Custom call ringtones
- Screen sharing
Throughout this write-up, we will go step-by-step on how to set up a new Flutter project, configure your flutter project, and integrate Zegocloud into our app. I will include code snippets and images to help you follow along and build your own video call app with Zegocloud using Flutter.
Prerequisites:
Basic knowledge of Flutter and Dart
Step 1: Set up a Zegocloud Account:
Go to https://console.zegocloud.com/account/signup to Sign Up
Bonus:
Once, your account is setup... your console should look like this:
Step 2: Set up a new Flutter project
Open Android Studio/VS Code and create a new Flutter project.
or run
flutter create zego_call
Once your project is setup, we need to add the ZegoCloud UIKit Dependency for 1-on-1 calls
.
run
flutter pub add zego_uikit_prebuilt_call
Your pubspec.yaml should be updated as shown:
Step 3: Create a Zegocloud Project from your console
Click on Create your project from the console and you will be redirected to the screen shown below:
There are varieties to choose from, but for the sake of this tutorial we will be using the Voice & Video Call, click NEXT and enter preferred project name.
Then click Start with UIKits
Wait for the console to create your project and you will be redirected to your project page with all your project info.
Step 4: Implement Zegocloud dependency in your project
Now that we have created a project on the console, we need to create our screens:
In your main.dart file, add the following code:
import 'package:flutter/material.dart';
import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyApp(),
);
}
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SizedBox(
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Text(
'ZegoCloud\nVideo Call Kit',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
),
const SizedBox(
height: 100,
),
SizedBox(
width: 300,
height: 52,
child: ElevatedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: ((context) =>
const CallPage(callID: 'ifeoluwa'))));
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
const Color.fromRGBO(95, 51, 255, 1))),
child: const Text('Start Call'),
)),
]),
),
);
}
}
Create a stateless callpage below the main.dart file and add the code, this is where we consume the prebuilt UI kit by zegocloud and pass in the appID and appSign which can be gotten from the project console
class CallPage extends StatelessWidget {
const CallPage({Key? key, required this.callID}) : super(key: key);
final String callID;
@override
Widget build(BuildContext context) {
return ZegoUIKitPrebuiltCall(
appID:
1873850625, // Fill in the appID that you get from ZEGOCLOUD Admin Console.
appSign:
"9adffd105b8fd9925f617746797f340e5f9a10c5ba36738b0edda8de3bcb16f7", // Fill in the appSign that you get from ZEGOCLOUD Admin Console.
userID: 'usos2345dhdoee',
userName: 'popop',
callID: callID,
// You can also use groupVideo/groupVoice/oneOnOneVoice to make more types of calls.
config: ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall()
// ..onOnlySelfInRoom = () => Navigator.of(context).pop(),
);
}
}
Our Screen should be like this:
Step 5: Configure your flutter project
For your app to perform properly you need to require some permissions on the device.
Android:
- Open the project_directory/android/app/build.gradle file, and modify the compileSdkVersion to 33
.
.
.
android {
compileSdkVersion 33
ndkVersion flutter.ndkVersion
.
.
.
defaultConfig {
minSdkVersion 21
}
.
.
.
- Open the file project_directory/app/src/main/AndroidManifest.xml add the following code just before the application tag.
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
- Open the project_directory/android/app folder, create a file named proguard-rules.pro and add the code below:
-keep class **.zego.** { *; }
then save.
- Open the project_directory/android/app/build.gradle file again, then add the code below under buildTypes:
.
.
.
buildTypes {
release {
// TODO: Add your own signing config for the release build.
// Signing with the debug keys for now, so `flutter run --release` works.
signingConfig signingConfigs.debug
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
.
.
.
iOS:
Open the project_directory/ios/Runner/Info.plist file, then add the following code:
.
.
.
<key>NSCameraUsageDescription</key>
<string>We require camera access to connect to a call</string>
<key>NSMicrophoneUsageDescription</key>
<string>We require microphone access to connect to a call</string>
.
.
.
Awesome! Our Video call App implementation is ready, you can now run your app and when you click the Start Call button, you should get the view below with all call features enabled.
You can find the sourcecode here: sourcecode
Or watch my Video Tutorial Here: CREATE A FLUTTER VIDEO CALL APP WITH ZEGOCLOUD
Beyond the Video call, Zegocloud provides a host of other communication SDKs and APIs which can be useful for you now or in your future developments and projects especially with its high scalability rate, hence be sure to explore and try new things with it and you may be on your way to building another Fortune 500 with less stress as Zegocloud handles all communications whilst you focus on your core.
Top comments (0)