# Step-by-Step Guide to Building a Live Audio Room with Flutter

In this tutorial, I will show you how to [create an audio conference room](https://docs.zegocloud.com/article/15072) within your Flutter application. This type of conference allows participants to communicate with each other using only audio and is often used for team meetings in work environments or for calls with friends and family.

If you are familiar with the requirements for implementing this type of functionality, you'll know that the main challenge is maintaining an expensive media server. These servers can be difficult to set up and maintain and require low-level technologies to ensure seamless audio transfer.

Fortunately, there are companies that offer simple solutions to these challenges, eliminating the need for you to worry about infrastructure or technological details. [ZEGOCLOUD](https://www.zegocloud.com/) is one such company that provides cloud-based streaming services, enabling you to implement your solution quickly and easily.

This article is sponsored by ZEGOCLOUD, who have demonstrated the effectiveness of their product and how it can speed up the development of these types of applications. Additionally, their [UIKits](https://www.zegocloud.com/uikits) provides ready-made buttons and UI components for this type of functionality, eliminating the need for designing these elements from scratch:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678784527473/c0e5cb06-7631-406c-b657-3407175e4fe4.gif align="center")

## How to create a live audio room in Flutter

The first thing we must do is go to the ZEGOCLOUD website and register. We can register and create our application without paying anything or entering any credit card or bank information, which allows us to carry out and test the implementation completely **free of charge**.

Once you are in the Dashboard, click on the button **Create your project**:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678784883980/e8667fba-f8e9-4ccf-9cbf-bf51d7d92f56.png align="center")

ZEGOCLOUD will ask you for the use case you want to address. For our case we chose **Live Audio Room**:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678784901666/34ef9664-d110-4513-a5e6-5d9dc25de154.png align="center")

At this point, we can choose between implementing their SDK ourselves or using a UIKit. Since we want to build everything as quickly as possible, we chose to start with **UIKits**:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678784929443/bd9d4fef-592a-43c5-9537-27e3c3744e3c.png align="center")

On the next screen, it asks us for which platform we are going to implement, we choose **For Flutter**:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678784944442/997533e4-40ed-4e55-bf65-f2b337e1d392.png align="center")

Everything is ready, we just need to click on the button at the bottom right labeled **Save & Start to integrate** to start creating our live audio room application:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678784962770/c81d8948-f407-48c7-aaa6-e7fbd0dce2de.png align="center")

Your project is now created. Now you will see two values on the screen: the *AppId* and the *AppSign*, these are the values that you will need later to connect your application with the project that you just created in the dashboard.

## Implement a live audio room in Flutter with the UiKit

Now we are going to create the Flutter application and add the UiKit to our conference room.

The first step will be to create a new application:

`flutter create --platforms android,ios flutter_live_audio_room`

We will install the following dependencies:

`flutter pub add zego_uikit_prebuilt_live_audio_room uuid`

The [zego\_uikit\_prebuilt\_live\_audio\_room](https://pub.dev/packages/zego_uikit_prebuilt_live_audio_room) plugin contains the UiKit with the interface already created to be able to implement our audio conference room. We'll also use the [uuid](https://pub.dev/packages/uuid) package to be able to quickly create identifiers.

Now open `android/app/build.gradle` and make sure that the following fields have the following values indicated:

* `compileSdkVersion 33`
    
* `minSdkVersion 22`
    
* `targetSdkVersion 33`
    

Add the following permissions in `android/app/main/AndroidManifest.xml` just before the `application` tag:

```xml
<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.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" />
```

Also, set the permissions for iOS in `ios/Runner/Info.plist`:

```plaintext
<key>NSMicrophoneUsageDescription</key>
<string>We require microphone access to connect to a live</string>
```

You should also alter the last block in `ios/Podfile` with the following:

```plaintext
# [...]

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)

    # Add the following block:
    target.build_configurations.each do |config|
      config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
        '$(inherited)',
        'PERMISSION_MICROPHONE=1',
      ]
    end
    # End of the block to add.
  end
end
```

Replace the contents of `lib/main.dart` with the following, making sure to add your *appID* and your *appSign* that you got earlier in the dashboard when you created the project:

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

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Live Audio Room',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MainScreen(),
    );
  }
}

class MainScreen extends StatefulWidget {
  const MainScreen({Key? key}) : super(key: key);

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  late final String roomId;
  // We'll use this var for now to indicate if the user is the host.
  final bool isHost = true;
  late final String userId;

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

    // We are going to set a temporary ID for now, in your app, you
    // should manage your room and its ID from your backend service.
    roomId = 'my_room_id';
    // Generate a random ID for the user. In your real app, you should
    // use the identifier that you use for your users.
    userId = const Uuid().v4().substring(0, 8);
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ZegoUIKitPrebuiltLiveAudioRoom(
        // Fill in the appID that you get from ZEGOCLOUD Admin Console.
        appID: your_app_id,
        // Fill in the appSign that you get from ZEGOCLOUD Admin Console.
        appSign:
            'your_app_sign',
        userID: userId,
        userName: 'user_$userId',
        roomID: roomId,
        config: isHost
            ? ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
            : ZegoUIKitPrebuiltLiveAudioRoomConfig.audience(),
      ),
    );
  }
}
```

As you can see in this example, we are first defining the following variables:

* `roomId`: An identifier for our room. In your application you should carry out room management in your backend, and from there assign your own identifier.
    
* `isHost`: We use this for now to set whether a user is the host or not, you should manage who is the host and who is the guest in your backend.
    
* `userId`: We must set an identifier per user, for this example we create a random one, but I recommend that you use the identifier that you are already using to identify users in your system.
    

Once we have these variables we simply add `ZegoUIKitPrebuiltLiveAudioRoom` in our `build()` method with the *appID* and *appSign* that we have assigned in the dashboard.

Now try running the project you created on a device. This first user should automatically be added as the room host. Now set the `isHost` variable to `false` and run the app on another device. Once open, select a seat to sit on. The host will receive a notification to allow or disallow that user to join.

## Conclusion

We have successfully created a live audio room system for our application. As you can see, with ZEGOCLOUD, you can free yourself from the hassle of managing the media server and even creating the UI for this feature.

Don't forget to visit the [ZEGOCLOUD website](https://www.zegocloud.com/) for more information.

I hope you found this article useful and interesting. See you in the next one. Goodbye!