DEV Community

Cover image for Creating an Audio Call App with ZEGOClOUD SDK and Flutter: Step-by-Step Guide
CodingWithZohaib
CodingWithZohaib

Posted on • Updated on

Creating an Audio Call App with ZEGOClOUD SDK and Flutter: Step-by-Step Guide

ZEGOCLOUD is a cloud-based totally platform that gives builders with the tools they want to build real-time audio and video verbal exchange applications. The platform gives a selection of capabilities, including SDKs, APIs, and documentation, that make it clean to create audio and video applications. ZEGOCLOUD is used by a selection of groups and groups, which includes video conferencing corporations, stay streaming systems, and online schooling providers.
ZEGOCLOUD uses the modern day generation to deliver audio and video calling.
ZEGOCLOUD affords a numerous selection of development kits for software program introduction, appropriate for numerous programming languages.The Flutter SDK has been tailor-made to beautify the improvement of audio and video communique packages on mobile devices, delivering a comprehensive and dependable collection of tools to assist builders.
ZEGOCLOUD
With the ZEGOCLOUD Flutter SDK, developers have a powerful set of equipment to create audio calling apps learn how to create an audio call app with Flutter right here. on this tutorial, we are able to guide you through the method of building an audio call app the usage of the ZEGOCLOUD Flutter SDK.
Voice call

audio Call SDK
To increase an audio call utility with ZEGOCLOUD Flutter SDK, you need to first gather App ID and App Sign from the ZEGOCLOUD Console. those identifiers are essential on your app to set up a reference to the ZEGOCLOUD platform and access its audio and video communication functionalities.
Follow these steps to obtain App ID and an App Sign:
1.get entry to the ZEGOCLOUD Console internet site Console.

2.sign up for an account with the aid of offering your personal info.

3.After registering, you may be precipitated to create a new venture. click at the "Create" button to begin.

Create project

4.supply your task a call and select an appropriate area. Then, click at the "Create" button to continue.

5.As soon as your undertaking is created, you will be taken to the task dashboard

Note: The App Sign is a confidential value that should not be disclosed to others. Ensure it is kept safe and secure.

Constructing the Flutter App

Now allow create the Flutter utility:

To create the project, use the command "flutter create flutter_AudioCall".

After creating the project, we need to install the zego_uikit_prebuilt_call
using the command flutter pub add zego_uikit_prebuilt_call.
Launch your preferred IDE and make necessary adjustments to ensure the smooth functioning of the project. Access android/app/build.gradle and modify the below-listed values:

  1. compileSdkVersion 33
  2. minSdkVersion 22

3.targetSdkVersion 33

build.gradle
it is necessary to specify the permissions that the application would require. this can be executed with the aid of adding the permission declarations in the occur tag within the AndroidManifest.xmlfile:

 <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" />
    <!-- only invitation -->
    <uses-permission android:name="android.permission.VIBRATE"/>
Enter fullscreen mode Exit fullscreen mode

Permission
To enable the required functionality on IOS, please ensure that the following permissions have been added to your Info.plist file:

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) camera use</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) microphone use</string>
Enter fullscreen mode Exit fullscreen mode

Now that we've completed the essential configurations, we can begin writing our Dart code. To begin, you may substitute the code within the lib/main.dart file with the code provided below:

import 'package:flutter/material.dart';
import'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';
import 'dart:math' as math;
final String userID=math.Random().nextInt(1000).toString();
void main() {

  runApp(const MyApp());
}
class MyApp extends StatelessWidget{
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:  Audiocalling(),
    );
  }
}
class Audiocalling extends StatefulWidget {
  @override
  State<Audiocalling> createState() => _AudiocallingState();
}
class _AudiocallingState extends State<Audiocalling> {
final _controller=TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("ZEGOCLOUD Audio Calling"),
          centerTitle: true,
        ),
        body:Column(
          children: [
            TextFormField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: "Enter UId"
              ),

            ),
            ElevatedButton(onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (builder)=>cllingId(CallingId: _controller.text.toString())));
            }, child: Text("Join")),
          ],
        )
    );
  }
}
class cllingId extends StatelessWidget {
  final String CallingId;
  const cllingId({required this.CallingId});
  @override
  Widget build(BuildContext context) {
    return SafeArea(child: ZegoUIKitPrebuiltCall(appID: appID,
      appSign: appsign,
      callID: CallingId,
      userID: userID,
      userName:"user_$userID" ,
      config: ZegoUIKitPrebuiltCallConfig.oneOnOneVoiceCall()..onOnlySelfInRoom=(context){
      Navigator.pop(context);
      },

    ));
  }
}
Enter fullscreen mode Exit fullscreen mode

Once you have got configured the required settings efficiently, you must be able to begin a Audio name using the software. to start, update the code in the lib/important.dart record with the code snippet provided.

Conclusion

To summarize, we have comprehended the manner of growing an audio name software making use of the ZEGOCLOUD Flutter SDK. The technique entailed acquiring an App id and App sign from the ZegoCloud Console, granting us access to the ZegoCloud platform and its audio and video conversation features. We then designed a Flutter application and integrated the necessary dependencies. in the long run, we carried out Audio call functionality via Dart code, which concerned initializing the SDK, joining a room, and publishing or subscribing to a stream.
Sign up for 10,000 free mins

Find out more about ZEGOCLOUD

Top comments (0)