Building a Scalable UI for Your Flutter Application Using Agora
Tags: agora, flutter, dart, programming
Published: 2021-10-12 15:48:13

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.

## Pre-requisites
- An Agora developer account (see [How to Get Started with Agora](https://www.agora.io/en/blog/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.
Navigate to `pubspec.yaml` and add the latest version of the Agora Flutter SDK as a dependency.

3. 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`](https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/plist/info/NSCameraUsageDescription) and [`NSMicrophoneUsageDescription`](https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW25) to `Info.plist` along with text descriptions. See [here](https://developer.apple.com/documentation/avfoundation/cameras_and_media_capture/requesting_authorization_for_media_capture_on_ios) 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.

{% gist https://gist.github.com/Meherdeep/994a3a672aadb65038259597a17a6b09 %}

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

### Building the video call page

1. Adding all the required variables:

{% gist https://gist.github.com/Meherdeep/d8500e85694c94ef465897de130f4141 %}

2. Initializing the Agora methods:

{% gist https://gist.github.com/Meherdeep/7a63ff2c1e82594ec65b3defd972815f %}

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:

{% gist https://gist.github.com/Meherdeep/a8d49cb6b58734ed53eb92b2b82f28ce %}

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

4. Adding Agora event handlers:

{% gist https://gist.github.com/Meherdeep/371a1e816ecb00db5923b98e567853b7 %}

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

{% gist https://gist.github.com/Meherdeep/c4b6b72e6d97e6c48764e7d8a1a1c104 %}

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:

{% gist https://gist.github.com/Meherdeep/f9db752aa48c31133ef1e91fcceda0cf %}

## 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.

![Demo Image](https://cdn-images-1.medium.com/max/1600/1*hRKFFDc4tj1HPiCFUpymkw.png)

You can find a complete application using all of the above code on [GitHub](https://github.com/Meherdeep/Agora-Flutter-Scalable-UI)

## Other Resources

To learn more about the Agora Flutter SDK and other use cases, see the developer guide [here](https://docs.agora.io/en).
You can also have a look at the complete documentation for the functions discussed above and many more [here](https://docs.agora.io/en/Video/API%20Reference/flutter/index.html).
And I invite you to join the [Agora.io Developer Slack Community](https://agoraio.slack.com/).