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 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 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 provides ready-made buttons and UI components for this type of functionality, eliminating the need for designing these elements from scratch:

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:

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

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:

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

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:

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 plugin contains the UiKit with the interface already created to be able to implement our audio conference room. We'll also use the 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:

<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:

<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:

# [...]

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:

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 for more information.