A Ultimate Guide to Agora UI Kit Integration in Flutter App

Introduction

Flutter, a versatile and flexible framework, has become a popular choice among developers for creating visually stunning and interactive mobile applications. With the Agora UI Kit for Flutter, the process of integrating real-time audio and video communication into your apps has never been smoother. In this blog post, we will walk you through the installation steps and provide valuable insights on how to enhance your Flutter applications with seamless audio and video communication capabilities.

Prerequisites

Before we dive into the world of the Agora UI Kit in Flutter, let’s ensure you have the following essentials:

1. A basic understanding of Flutter development.
2. Flutter SDK installed on your system.
3. A code editor of your choice (such as VS Code or Android Studio).
4. An Agora developer account. If you don’t have one, you can easily sign up at Agora’s Developer Portal.
5. With these prerequisites in place, we’re all set to get started.

InStallation

Step 1: Creating a Flutter Project

If you haven’t already set up a Flutter project, you can create one with a simple command:

flutter create AgoraChatApp

Feel free to replace “AgoraChatApp” with your preferred project name.

Step 2: Installing the Agora UI Kit

To seamlessly integrate the Agora UI Kit into your Flutter project, add it as a dependency in your pubspec.yaml file as follows:

Dependencies : 
 Agora_uikit: ^1.3.7

After this, run:

flutter pub get

Step 3: Setting Up Your Agora Account

To use the Agora UI Kit, you’ll need an App ID from the Agora Developer Portal. If you don’t have one, sign in or sign up and create a new Agora application. Retrieve your App ID from the https://console.agora.io
Now, let’s take care of a few device permissions:

Android

In your Android level build.gradle add this at the end of the repositories:

allprojects {
 repositories {
  ...
  maven { url 'https://jitpack.io' }
 }
}

Open your AndroidManifest.xml file and add the required device permissions:

<manifest>
...
<uses-permission  android:name="android.permission.READ_PHONE_STATE"/>
<uses-permission  android:name="android.permission.INTERNET"  />
<uses-permission  android:name="android.permission.RECORD_AUDIO"  />
<uses-permission  android:name="android.permission.CAMERA"  />
<uses-permission  android:name="android.permission.MODIFY_AUDIO_SETTINGS"  />
<uses-permission  android:name="android.permission.ACCESS_NETWORK_STATE"  />
<!-- The Agora SDK requires Bluetooth permissions in case users are using Bluetooth devices.-->
<uses-permission  android:name="android.permission.BLUETOOTH"  />
...
</manifest>

iOS

In your info.plist, add the following:

Privacy – Microphone Usage Description (with a meaningful note).

Privacy – Camera Usage Description (with a meaningful note).

If you want your application to continue voice calls in the background, enable background modes in Xcode by selecting your app target, clicking the Capabilities tab, and checking Audio, AirPlay, and Picture in Picture.

Example

To give you a head start, here’s an example of how to use the Agora UI Kit in your Flutter app:

// Instantiate the client
final AgoraClient client = AgoraClient(
  agoraConnectionData: AgoraConnectionData(
    appId: "<--Add Your App Id Here-->",
    channelName: "test",
Token:"<--Add Your token Here-->",

  ),
);

// Initialize the Agora Engine
@override
void initState() {
  super.initState();
  initAgora();
}

void initAgora() async {
  await client.initialize();
}

// Build your layout
@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            AgoraVideoViewer(client: client), 
            AgoraVideoButtons(client: client),
          ],
        ),
      ),
    ),
  );
}

Conclusion

Integrating the Agora UI Kit into your Flutter app project is like opening a treasure chest of opportunities for creating real-time, engaging audio and video communication applications. By following the steps in this blog post, you will get to set a solid foundation. But remember, this is just the beginning. The Agora UI Kit offers a wide array of features and customization options to match the unique needs of your application.

As you journey further into your Flutter project, you can explore features like real-time chat, interactive video streaming, and more. Whether you’re building a video conferencing app, a live streaming platform, or enhancing an existing application with real-time communication, the Agora UI Kit equips you with the tools to make it happen.