How to Use ZegoCloud in Flutter?

In Flutter there are many prebuild Audio_Room_kit For Example – Agora, ZegoClooud LiveKit etc., but In this article, we are going to use ZegoCloud Live Audio Room Kit, use this SDK to add real-time video, audio and data features to your Flutter app. Connecting to a self- or cloud-hosted ZegoCloud server lets you quickly build applications like interactive live streaming or video calls with just a few lines of code. A sample video is given below to get an idea about what we are going to do in this article.

Prerequisites:

• Go to ZEGOCLOUD Admin Console to create a UI-Kit project.
• Get the AppID and AppSign of the project.

Note: If you don’t have a ZegoCloud Account Create a New ZegoCloud

Step By Step Implementation

Step 1: Add ZegoUIKitPrebuiltLiveAudioRoom as dependencies

Run the following code in your project’s root directory:

flutter pub add zego_uikit_prebuilt_live_audio_room

Step 2: Make Some Changes in the Android File

1. modify the compileSdkVersion

Open the project_name/android/app/build.gradle file, and modify the compileSdkVersion to 33.

Refer 27 [ CompileSdkVersion 33 ]

2. And in the Same file, edit the minSdkVersion and add multiDexEnabled

minSdkVersion 21
multiDexEnabled true

refer 48 and 52

3. Add app permission

Open the file your_project/app/src/main/AndroidManifest.xml, and add the following:

<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" />

4. Prevent code obfuscation

To prevent obfuscation of the SDK public class names, do the following:

In your project’s your_project > android > app folder, create a proguard-rules.pro file with the following content as shown below:

-keep class **.zego.** { *; }
-keep class **.**.zego_zpns.** { *; }

refer 1 and 2

Add the following config code to the release part of the your_project/android/app/build.gradle file.

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

Refer 61

Step 3: Import the SDK [Create new File in Lib]

Now in your Dart code, import the Live Audio Room Kit SDK.

import 'package:zego_uikit_prebuilt_live_audio_room/zego_uikit_prebuilt_live_audio_room.dart';

Using the Live Audio Room Kit:

• Specify the userID and userName for connecting the Live Audio Room Kit service.
• roomID represents the live audio room you want to create or join

For below Constant.appId use your appId and Constant.appSign use your appSign

import 'package:flutter/material.dart';
import 'package:zego_uikit_prebuilt_live_audio_room/zego_uikit_prebuilt_live_audio_room.dart';

class LivePage extends StatefulWidget {
  final String profilePhoto;   // getUser Profile Photo 

  const LivePage(
      {Key? key,
      required this.profilePhoto})
      : super(key: key);

  @override
  State<LivePage> createState() => _LivePageState();
}

class _LivePageState extends State<LivePage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ZegoUIKitPrebuiltLiveAudioRoom(
       //  Use Your AppId 
        appID: Constant.appId, 
        appSign: Constant.appSign,  // Use Your appSign 
        userID: 500,  // User User Id For Example We Give 500 
        userName: ABCD,   // User User Name For Example We Give ABCD
        roomID: 6020,  // Use RoomId what You Want to Give For Example We Give 6020 
        config: widget.isHost
            ? (ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
            : ZegoUIKitPrebuiltLiveAudioRoomConfig.audience()
          ..userAvatarUrl = widget.profilePhoto,
      ),
    );
  }
}

Step 4: Run & Test

Now you can simply click the Run or Debug button to run and test your App on the device.

Output: