How To Faster Build Live Audio Room App Using Flutter and ZEGOCLOUD SDK

Saiful Bahri — Mon, 04 Mar 2024 02:47:02 +0000

Who here hasn't heard of ZegoCloud yet? ZegoCloud is an SDK & API service for building applications such as chatting, live streaming, live audio, and more. I've provided more detailed explanations in my other content on Medium. This time, I want to assist friends in how to create an account and start a project on ZegoCloud. Let's dive in together, shall we?

Product ZegoCloud information:

Product: https://www.zegocloud.com/uikits
Help resource: https://docs.zegocloud.com/article/15073 (flutter)
Get ZEGOCLOUD UIKits for 10,000 free mins: https://bit.ly/42f7qnC
Take advantage of ZEGOCLOUD: https://bit.ly/48KnwbD
How to build a live audio room: https://bit.ly/3vLANSG

What is ZegoCloud?

ZegoCloud is a platform/service provider of SDKs and APIs for building applications such as Chat, Live Streaming, Video Call, Live Audio Room, Voice Call, and more. You can find it at the link provided above.

ZegoCloud also provides UIKits to utilize its offered features more easily, making implementation quicker, typically within minutes. It's user-friendly and offers many features to maximize its services.

Additionally, you are given the opportunity to try it out for free. By registering an account with ZegoCloud, you will receive 10,000 minutes to experiment with your application.

So, how to register for a ZegoCloud account?

Open the following link: UI Kits for Mobile and Web apps - ZEGOCLOUD

Next, click the Start Building button. Then you will be directed to the SignUp page as follows:

Next, fill in all the required data. Then, click the Start your free trial button. You will be redirected to the ZegoCloud console page.

Complete the requested information, as shown below.

Press the Go to dashboard button, and you will receive 10,000 free minutes.

Below is the initial view of your dashboard.

Finally, you have a ZegoCloud account and have 10,000 minutes for the trial.

Next, let's create a ZegoCloud project. For example, this time I will create a Live Audio Room project, one of the exciting features of ZegoCloud.

First, you can click the add button at the top left corner to create your project. Alternatively, you can navigate to the ZegoCloud sidebar by selecting the Project tab -> Project Management.

When you navigate to the create page, a page like the following will appear.

Many features are offered, and you can create all projects here. For this time, I will choose Live Audio Room. After selecting it, press the Next button. You will be directed to the next page.

Fill in the project name, then choose one to get started.
You can select UI kits for easier use of Zego because Zego has prepared UI kits to make it even easier to use.
You can also choose SDKs if you want to customize.

For this time, I will choose Start with UI Kits.

Next, the ZegoCloud system will start creating the project. Please wait until it's finished.

After it's done, the following page will appear.

Choose one to integrate Live Audio Room into your application project. This time, I will use this feature for Flutter, so I choose Flutter.

Next, you will be directed to the UI Configuration page as follows.

Next, simply press the Save & Start to Integrate button.

Then, you will be directed to the Obtain Configuration page. You will receive an AppID and AppSign that will be used in building your Flutter application later.

If you want to navigate to the console, you can press the Go to Admin Console button.

Finally, creating a ZegoCloud account and creating a live audio room project in ZegoCloud is completed and successful.

How to build a ZegoCloud Live Audio Room application with Flutter. You can read about it below.

Okay, I will assist you in creating a Live Audio Room application in Flutter by utilizing the features provided by ZegoCloud.
I assume that you have already created an account and set up a ZegoCloud project by following the tutorial above.

Creating a Flutter Project for Live Audio Room with ZegoCloud

First, create a Flutter project either through the terminal or VSCode. I hope you are already familiar with and proficient in creating Flutter projects.

After that, you open the ZegoCloud documentation to implement the live audio room in Flutter. You can visit it through the following link: Flutter Dart Live Audio Room Kit SDK Quick start | ZEGOCLOUD Documentation.
Follow the steps inside.
On the sidebar, select Quick Start.

The first requirement is to go to the ZegoCloud admin console to obtain the AppId and AppSign. I hope you already know where it is. As I mentioned in the previous content, I have provided the link earlier.
After that, integrate the SDK from ZegoCloud's live audio room by adding the following dependency.

flutter pub add zego_uikit_prebuilt_live_audio_room

You can add the above command through the terminal console or using the Pubspec Assist library in VS Code.

If successfully added, it will appear in the pubspec.yaml.

After that, create a Dart file to store the AppId and AppSign from ZegoCloud.
Create it with the name constant_zego.dart and fill in the following code.

class ConstantZegoCloud {
  static int appId = AppId_anda;
  static String appSign ='AppSign_anda';
}

The AppId and AppSign can be seen as in the following image.

Next, create live_page.dart to display the live page. Insert the following code into it.

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

import 'package:flutter_live_audio_room_zego_cloud/constant_zego.dart';

class LivePage extends StatelessWidget {
  final String roomID;
  final bool isHost;
  final String userName;
  final String userId;

  const LivePage({
    Key? key,
    required this.roomID,
    required this.isHost,
    required this.userName,
    required this.userId,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ZegoUIKitPrebuiltLiveAudioRoom(
          appID: ConstantZegoCloud
              .appId, // Fill in the appID that you get from ZEGOCLOUD Admin Console.
          appSign: ConstantZegoCloud
              .appSign, // Fill in the appSign that you get from ZEGOCLOUD Admin Console.
          userID: userId,
          userName: userName,
          roomID: roomID,
          config: (isHost
              ? ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
              : ZegoUIKitPrebuiltLiveAudioRoomConfig.audience())
            ..background = background()
            ..userAvatarUrl = 'https://robohash.org/$userId.png'),
    );
  }

  Widget background() {
    /// For background live page
    return Stack(
      children: [
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              fit: BoxFit.fill,
              image: Image.asset('assets/images/bg.jpeg').image,
            ),
          ),
        ),
        const Positioned(
            top: 10,
            left: 10,
            child: Text(
              'Live Audio Room',
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                color: Color(0xff1B1B1B),
                fontSize: 20,
                fontWeight: FontWeight.w800,
              ),
            )),
        Positioned(
          top: 10 + 20,
          left: 10,
          child: Text(
            'ID: $roomID',
            overflow: TextOverflow.ellipsis,
            style: const TextStyle(
              color: Color(0xff606060),
              fontSize: 16,
              fontWeight: FontWeight.w500,
            ),
          ),
        )
      ],
    );
  }
}

In the above code, the ZegoUIKitPrebuiltLiveAudioRoom widget is a UI kit widget from ZegoCloud used to display the Live Audio Room.
Then, the background() widget function is used to change the background of the live page. Meanwhile, userAvatarUrl is used to change the user's avatar when logged in and entering the live room.
The next step is to create login_page.dart because we will log in first before conducting live audio. Insert the following code into login_page.dart.

import 'package:flutter/material.dart';
import 'package:flutter_live_audio_room_zego_cloud/live_page.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final usernameController = TextEditingController();
  final roomIdController = TextEditingController();
  bool isHost = false;

  @override
  void dispose() {
    usernameController.dispose();
    roomIdController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Join Live Audio Room',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
        centerTitle: true,
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset(
                'assets/images/live.png',
                width: 150,
                height: 150,
              ),
              const SizedBox(
                height: 15,
              ),
              const Center(
                child: Text(
                  'Podcast With Friends',
                  style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                    fontSize: 20,
                  ),
                ),
              ),
              const SizedBox(
                height: 30,
              ),
              TextField(
                controller: usernameController,
                decoration: const InputDecoration(labelText: 'Username'),
              ),
              const SizedBox(
                height: 8,
              ),
              TextField(
                controller: roomIdController,
                decoration: const InputDecoration(labelText: 'RoomID'),
              ),
              const SizedBox(
                height: 8,
              ),
              Row(
                children: [
                  const Text('Host ?'),
                  const SizedBox(
                    width: 4,
                  ),
                  Switch(
                      value: isHost,
                      onChanged: (val) {
                        setState(() {
                          isHost = val;
                        });
                      }),
                ],
              ),
              const SizedBox(
                height: 16,
              ),
              ElevatedButton(
                onPressed: () {
                  Navigator.push(context, MaterialPageRoute(builder: (context) {
                    return LivePage(
                        roomID: roomIdController.text,
                        isHost: isHost,
                        userName: usernameController.text,
                        userId:
                            usernameController.text.replaceAll(' ', '').trim());
                  }));
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.green.shade300,
                  foregroundColor: Colors.green.shade300,
                  fixedSize: const Size(400, 50),
                ),
                child: const Text(
                  'Join Room',
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Next, go to the main.dart file and insert the code exactly as follows.

import 'package:flutter/material.dart';
import 'package:flutter_live_audio_room_zego_cloud/login_page.dart';

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(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.green.shade400),
        useMaterial3: true,
        appBarTheme: AppBarTheme(
          color: Colors.green.shade400,
          elevation: 0,
          titleTextStyle: const TextStyle(
            color: Colors.white,
            fontSize: 16.0,
            fontWeight: FontWeight.w500,
          ),
          iconTheme: IconThemeData(
            color: Colors.green.shade400,
          ),
        ),
      ),
      home: const LoginPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

At this point, you have created all the necessary pages and files. Next, we need to configure for Android and iOS. For this tutorial, I will demonstrate the configuration on Android. For iOS configuration, you can refer to the ZegoCloud documentation for Live Audio Room.

Android Configuration
Modify the compileSdkVersion to 33 and minSdkVersion to 21 in the build.gradle file in Android. You can find it at your_project/android/app/build.gradle.

After that, add permissions to the AndroidManifest.xml file, located here: your_project/app/src/main/AndroidManifest.xml. Copy the following permissions into it.

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

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

In the folder your_project > android > app, create a file named proguard-rules.pro with the following code as shown below:

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

Add the following configuration code to the release section of your_project/android/app/build.gradle file.

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

The Android configuration has been completed. Next, you can proceed with running to try out the results of your coding.

The result will be like the following video.

How To Faster Build Live Audio Room App Using Flutter and ZEGOCLOUD SDK - YouTube

* Get ZEGOCLOUD UIKits for 10,000 free mins: https://bit.ly/42f7qnC* Take advantage of ZEGOCLOUD: https://bit.ly/48KnwbD* How to build a live audio room: htt...

youtube.com

Finally, you have successfully created a real-time Live Audio Room and Chatting Room application using ZEGOCLOUD.

That's all from me, hopefully, it's useful and can help you find solutions.

Github sample project: Sourcecode

Thank you.

DEV Community: Saiful Bahri

How To Faster Build Live Audio Room App Using Flutter and ZEGOCLOUD SDK

Creating a Flutter Project for Live Audio Room with ZegoCloud

How To Faster Build Live Audio Room App Using Flutter and ZEGOCLOUD SDK - YouTube