How To Create Live Audio Room App in Flutter Using ZEGOCLOUD UIKits

Flutter is an open-source mobile app development framework used to build high-performance applications for iOS, Android, and other platforms. Flutter has gained massive popularity in recent times due to its high-quality user interface and development tools. In this article, we will be discussing how to create a live audio room app using Flutter and ZEGOCLOUD.

ZEGOCLOUD UIKits is a prebuilt UI library that provides developers with the necessary components to build a live audio room app. It is a collection of ready-made components that can be easily integrated into any Flutter project. The Zego_uikit_prebuilt_live_audio_room package is a part of the ZEGOCLOUD UIKits library and contains all the necessary components to create a live audio room app.

To get started, we need to set up our development environment. We will require Flutter SDK, an integrated development environment (IDE), and the Zego_uikit_prebuilt_live_audio_room package. Once we have these tools set up, we can proceed to create our live audio room app.

Step 1: Create a new Flutter project

We can create a new Flutter project by running the following command in the terminal:

flutter create live_audio_room_app

This will create a new Flutter project with the name 'live_audio_room_app.'

Step 2: Add the Zego_uikit_prebuilt_live_audio_room package

We need to add the Zego_uikit_prebuilt_live_audio_room package to our project. To do this, we need to add the following dependency to our project's pubspec.yaml file:

dependencies:
  zego_uikit_prebuilt_live_audio_room: ^1.0.0

After adding the dependency, we can run the following command to install it:

flutter pub get

Step 3: Configure Permissions

Before we can use the Zego_uikit_prebuilt_live_audio_room package, we need to configure permissions for our app. We will require permission to access the microphone for our app to function correctly. We can do this by adding the following code to our project's AndroidManifest.xml file:

<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>

For iOS, we need to add the following lines to the Info.plist file:

<key>NSMicrophoneUsageDescription</key>
<string>This app requires microphone access to function correctly</string>

Step 4: Implement the Live Audio Room

Now that we have set up our project and added the necessary dependencies, we can start implementing the live audio room. We can do this by creating a new StatefulWidget and initializing the ZegoLiveAudioRoomController:

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

class LiveAudioRoomPage extends StatefulWidget {
  @override
  _LiveAudioRoomPageState createState() => _LiveAudioRoomPageState();
}

class _LiveAudioRoomPageState extends State<LiveAudioRoomPage> {
  ZegoLiveAudioRoomController _controller;

  @override
  void initState() {
    super.initState();
    _controller = ZegoLiveAudioRoomController();
    _controller.init();
  }

  @override
  void dispose() {
    _controller.destroy();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Live Audio Room'),
      ),
      body: ZegoLiveAudioRoomWidget(controller: _controller),
    );
  }
}

We can now navigate to the LiveAudioRoomPage from our app's main screen. The ZegoLiveAudioRoomWidget provides all the necessary components for creating a live audio room, such as the microphone and speaker controls, chat messages, and user list.

Step 5: Joining a Room

To join a live audio room, we need to call the joinRoom function of the ZegoLiveAudioRoomController. We can do this by passing the roomId and userId parameters to the function:

_controller.joinRoom(roomId: '12345', userId: 'user1');

Step 6: Sending Chat Messages

To send chat messages, we can call the sendRoomMessage function of the ZegoLiveAudioRoomController. We can do this by passing the message and messageType parameters to the function:

_controller.sendRoomMessage(message: 'Hello, everyone!', messageType: MessageType.Text);

Step 7: Leaving a Room

To leave a live audio room, we need to call the leaveRoom function of the ZegoLiveAudioRoomController:

_controller.leaveRoom();

Conclusion

In this article, we discussed how to create a live audio room app using Flutter and Zegocloud UIKits. We went through the steps required to set up our development environment, configure permissions, and implement the live audio room using the Zego_uikit_prebuilt_live_audio_room package. We also demonstrated how to join a room, send chat messages, and leave a room using the ZegoLiveAudioRoomController.

Flutter and Zegocloud UIKits make it easy for developers to create high-quality live audio room apps without the need for extensive coding knowledge. With the Zego_uikit_prebuilt_live_audio_room package, developers can leverage prebuilt UI components to create custom live audio room apps quickly. I hope this article has been helpful in guiding you through the process of creating a live audio room app using Flutter and Zegocloud UIKits.