DEV Community: Dear Programmer

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

Dear Programmer — Tue, 28 Mar 2023 18:51:43 +0000

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.

How To Create Basic Chat App in Flutter Using ZEGOCLOUD UIKITS

Dear Programmer — Tue, 28 Mar 2023 12:43:21 +0000

Flutter is a popular open-source UI toolkit that makes it easy to build high-performance mobile and web applications. With the help of the ZegoCloud, Flutter developers can build chat applications quickly and easily. In this article, we will discuss how to create a chat app in Flutter using the ZegoCloud UIKits package.

Before we get started, you need to have a basic understanding of Flutter and how it works. If you are new to Flutter, we recommend that you take some time to learn the basics before proceeding.

Setting up the environment

To get started, we need to install the Flutter SDK and set up the development environment. Once the Flutter SDK is installed, you can create a new Flutter project by running the following command in your terminal:

flutter create my_chat_app

Next, open the project in your preferred IDE (Integrated Development Environment) and add the following dependency to your pubspec.yaml file:

dependencies:
  zego_zimkit: ^2.0.0

This will allow us to use the ZegoCloud UIKits package in our application.

Creating the user interface

Now that we have set up our environment and installed the necessary dependencies, we can start creating the user interface for our chat application.

First, let's create a new file called chat_screen.dart and add the following code to it:

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

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  ZegoIMKit zegoIMKit = ZegoIMKit.instance;

  @override
  void initState() {
    super.initState();
    initZegoIMKit();
  }

  void initZegoIMKit() async {
    await zegoIMKit.initSDK(appID, appSign, userID, userName);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Chat App'),
      ),
      body: Container(),
    );
  }
}

In this code, we have imported the necessary packages and created a stateful widget called ChatScreen. We have also created an instance of the ZegoIMKit class and called the initSDK method in the initState method to initialize the ZegoCloud SDK.

Next, we will create the user interface for our chat application. We will add a text field for the user to enter their message and a send button to send the message. We will also display the chat messages in a list view. Add the following code to the build method in ChatScreen:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('My Chat App'),
    ),
    body: Column(
      children: [
        Expanded(
          child: ListView.builder(
            itemCount: 0,
            itemBuilder: (context, index) => Text('Chat message $index'),
          ),
        ),
        Row(
          children: [
            Expanded(
              child: TextField(
                decoration: InputDecoration(hintText: 'Enter a message'),
              ),
            ),
            IconButton(
              icon: Icon(Icons.send),
              onPressed: () {},
            ),
          ],
        ),
      ],
    ),
  );
}

In this code, we have added a column widget that contains a list view for displaying chat messages and a row widget that contains a text field for entering a message and a send button. We have also set the initial itemCount of the list view to zero.

Now that we have created the user interface for our chat application, let's move on to implementing the chat functionality using the ZegoCloud UIKits package.

Implementing the chat functionality

To implement the chat functionality, we need to use the ZegoCloud UIKits package. This package provides a set of APIs for sending and receiving messages in real-time.

First, we need to create a ZegoUser object that represents the current user. We can do this by adding the following code to the initState method:

ZegoUser user = ZegoUser(userID, userName);

Next, we need to join the chat room using the joinChatRoom method. We can do this by adding the following code to the initZegoIMKit method:

await zegoIMKit.joinChatRoom(roomID, user);

In this code, we have joined the chat room using the roomID and the current user object.

Next, we need to listen for incoming messages using the onRecvMessage method. We can do this by adding the following code to the initZegoIMKit method:

zegoIMKit.onRecvMessage = (message) {
  print('Received message: ${message.content}');
};

In this code, we have set the onRecvMessage callback to print the received message to the console.

Finally, we need to send messages using the sendChatMessage method. We can do this by adding the following code to the onPressed method of the send button:

void sendMessage(String content) async {
  ZegoChatMessage message = ZegoChatMessage(
    content: content,
    messageType: ZegoMessageType.text,
    sendTime: DateTime.now().millisecondsSinceEpoch,
    fromUser: user,
  );

  await zegoIMKit.sendChatMessage(roomID, message);
}

IconButton(
  icon: Icon(Icons.send),
  onPressed: () {
    sendMessage(_messageController.text);
    _messageController.clear();
  },
),

In this code, we have created a new ZegoChatMessage object with the message content, type, send time, and the current user object. We have then used the sendChatMessage method to send the message to the chat room.

Now that we have implemented the chat functionality using the ZegoCloud UIKits package, we can run the app and test it out.

Running the app

To run the app, connect your device or emulator and run the following command in your terminal:

flutter run

This will launch the app on your device or emulator. You can enter a message in the text field and tap the send button to send it to the chat room. You should see the message appear in the list view.

Conclusion

In this article, we have discussed how to create a chat app in Flutter using the ZegoCloud UIKits package. We have covered the necessary configuration and permissions settings, as well as the simple code required to implement the chat functionality. By following these steps, you can create a fully functional chat app using the ZegoCloud UIKits package in Flutter.