Building a Scalable UI for Your Flutter Application Using Agora

One of the biggest challenges facing any developer is building applications that can scale. With a video-conferencing application using Agora, the main scaling issue is the bandwidth of your local device, especially if there are many incoming video streams. And as the number of participants rises, it becomes increasingly difficult to make sure that your application can keep up.

In this tutorial, you will see how to use Agora to build an application that can scale to up to 17 users by optimizing the bandwidth usage of the incoming video streams.

Prerequisites

• An Agora developer account (see How to Get Started with Agora)
• Flutter SDK
• Editor of your choice
• Android or iOS device for testing

Project Setup

1. In your project directory, open a terminal window and create a Flutter project by running this command:
   flutter create agora_scalable_ui
2. Open the newly created project in the editor of your choice.
3. Navigate to pubspec.yaml and add the latest version of the Agora Flutter SDK as a dependency.
4. Add relevant permission in your AndroidManifest.xml file (Android) or Info.plist file (iOS):

• Android (in your AndroidManifest.xml):

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

• iOS (in your info.plist): Add both NSCameraUsageDescription and NSMicrophoneUsageDescription to Info.plist along with text descriptions. See here for more information on these, along with code samples of how to request and get authorization states.

All done! Let’s start building the app.

Build

We will stick with a very simple grid view. Our goal is to scale this application as the user joins. To do this, we will optimize our bandwidth usage to ensure all the streams work concurrently without any difficulty.

Building a Home Page

Our home page is responsible for prompting the user for the name of the channel they want to join and requesting camera and microphone permission.

To request user permission, we are using a plug-in called permission handler.

Building the Video Call Page

1. Adding all the required variables

2. Initializing the Agora methods:

In the above code snippet, we set up the Agora engine with dual-stream mode enabled. Dual-stream is an Agora feature that allows a client to publish two streams at the same time. One stream is for a higher resolution and bitrate, and the other stream is for a lower resolution and bitrate. With this dual-stream setup, when a remote client subscribes to your stream, they can switch to a lower stream based on their bandwidth requirements.

3. Initializing the Agora SDK:

The _initAgoraRtcEngine function creates an object of the AgoraRtcEngine, which we use to refer all the methods provided in the Agora SDK.

4. Adding Agora event handlers:

In the userJoined callback, we are doing the following:

• Adding the UID of the remote video to a list of UIDs (_users) that we use as the dataset for all the users’ UIDs present in the channel
• Checking if the number of remote users has grown to five to know whether to switch to using the lower stream in dual-stream mode

In the userOffline callback, we are doing the following:

• Removing the UID from the _users list
• Switching back to the higher stream in the dual-stream mode if the number of remote users shrinks to three

5. Creating the grid view for local and remote user video

Here, we simply pass the UID present in the _users list to generate a list of views. These views are then used to generate a grid that scales automatically as the user joins.

Cleaning Up

Finally, it is time to write the dispose method. We clean up all the resources relevant to Agora here:

Testing

To test the application, you will need five or more users such that when they join the channel the video quality optimizes automatically in order to provide the best video calling experience.

To run the app, enter this command in your terminal:

flutter run

Conclusion

You now have a video chat application that can scale to up to 17 users by optimizing settings for incoming streams.

You can find a complete application using all of the above code on GitHub:

Other Resources

To learn more about the Agora Flutter SDK and other use cases, see the developer guide here.

You can also have a look at the complete documentation for the functions discussed above and many more here. And I invite you to join the Agora Developer Slack Community.