One-to-one video calls with Flutter and Agora
Published: 2023-07-26 00:40:29

by [Emmanuel Uchechukwu](https://blog.openreplay.com/authors/emmanuel-uchechukwu)

<blockquote><em>In our modern world, video calling has revolutionized how we communicate with others. This has helped users communicate face-to-face, closing the gap between distant individuals and fostering presence. Video calls have become an important part of our lives for personal use, professional use, remote work, virtual classrooms, etc.. This article will show how to implement video chat functionality in our application using Flutter and Agora.</em>
</blockquote>

Before diving into the code, we need to know what [Agora](https://www.agora.io/en/) is. The Agora video SDK is a Real-Time Engagement platform that enables developers to add live video and voice call functionality using its APIs. According To [Crunchbase](crunchbase.com/organization/agora-io), Agora is the most widely adopted API for real-time live streaming communications worldwide, installed on over 500 million devices and rapidly growing. You can also use it in your web app, but we'll produce a mobile application here.

## Creating An Agora Account
We first need to set up an account to begin using the Agora Flutter SDK. [Click here to be redirected to Agora’s homepage](https://www.agora.io/en/).

![-](https://blog.openreplay.com/images/one-to-one-video-calls-with-flutter-and-agora/images/image01.png)

Click on the Get Started button to begin creating our account
![-](https://blog.openreplay.com/images/one-to-one-video-calls-with-flutter-and-agora/images/image02.png)

Fill in the required fields and then click the Create Account button. You can also choose to sign up using Google or GitHub. When you are done creating your account, you will be redirected to your console, where we can start creating our Agora project.

## Creating A New Agora Project
![-](https://blog.openreplay.com/images/one-to-one-video-calls-with-flutter-and-agora/images/image03.png)
Click Create a Project, and a new project will be created for you; then click on Configure so we can configure our project.

![-](https://blog.openreplay.com/images/one-to-one-video-calls-with-flutter-and-agora/images/image04.png)
Add a project name of your choice and a use case for your project.

![-](https://blog.openreplay.com/images/one-to-one-video-calls-with-flutter-and-agora/images/image05.png)
For the security section, enable primary and secondary certification so that we can generate and use a temporary token.

![-](https://blog.openreplay.com/images/one-to-one-video-calls-with-flutter-and-agora/images/image06.png)
Click on **Generate temp RTC Token** to generate our temporary token.

![-](https://blog.openreplay.com/images/one-to-one-video-calls-with-flutter-and-agora/images/image07.png)
Enter a Channel Name of your choice and click the generate button. A temporary token will be generated on the fly; you can copy and paste it somewhere on your PC, as it will be needed when building our Flutter app. Also, copy the App ID as it will also be needed.

## Creating Our Flutter Project
Now we are done setting up our Agora account and project, let us create our Flutter Project. On your terminal, run the code below:
```bash
flutter create <project-name>
```

## Adding Dependencies
On your terminal, run the command below:
```bash
flutter pub add agora_uikit
```
This package will provide the building blocks to add real-time voice and video streaming communication.

## Adding Permissions
To make this work, we must add mobile app permissions to our `AndroidManifest.xml` file for Android and our `info.plist` file for iOS.

On your project panel, go to the `android > app > src > main` and open the `AndroidManifest.xml` file and enter the code below; each line adds one device permission:
```xml
<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" /> 
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 
```
Next, let's add device permissions to our iOS app. On your project panel, go to the `ios > Runner` and open the `info.plist` file and add the code below:


```plist
<key>NSMicrophoneUsageDescription</key>
<string>Talk To Others</string>
<key>NSCameraUsageDescription</key>
<string>Video Call With Others</string>
```
This will give us access to microphone and camera usage for IOS devices.

## Building The User Interface
On your lib folder, create a new file called `home_screen.dart` and copy and paste the code below:
```dart
import 'package:flutter/material.dart';
import 'video_call_screen.dart';

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

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Center(
       child: ElevatedButton.icon(
         icon: const Icon(Icons.video_call),
         label: const Text('JOIN CALL CHANNEL'),
         onPressed: () {
           Navigator.push(
             context,
             MaterialPageRoute(
               builder: (context) => const VideoCallScreen(),
             ),
           );
         },
       ),
     ),
   );
 }
}
```
In the code above, we created a `StatelessWidget`, which displays an `ElevatedButton`. The ElevatedButton will be used to navigate to the `VideoCallScreen` where the functionality of our app will begin.

On your lib folder, create a new file called `video_call_screen.dart` and add the code as seen below:
```dart
import 'package:agora_uikit/agora_uikit.dart';
import 'package:flutter/material.dart';

class VideoCallScreen extends StatefulWidget {
 const VideoCallScreen({super.key});

 @override
 State<VideoCallScreen> createState() => _VideoCallScreenState();
}

class _VideoCallScreenState extends State<VideoCallScreen> {
 final _client = AgoraClient(
   agoraConnectionData: AgoraConnectionData(
     appId: '',
     channelName: '',
     tempToken: '',
   ),
 );
 @override
 Widget build(BuildContext context) {
   return WillPopScope(
     onWillPop: () async => false,
     child: Scaffold(
       body: SafeArea(
         child: Stack(
           children: [
             AgoraVideoViewer(
               client: _client,
               showNumberOfUsers: true,
             ),
             AgoraVideoButtons(client: _client)
           ],
         ),
       ),
     ),
   );
 }
}
``` 
As the code above shows, we imported the `agora_uikit` package. We then created a `StatefulWidget` and an instance of the `AgoraClient` called `_client`. The `AgoraClient` has a required parameter which is the `agoraConnectionData` as seen in line 13; this, in turn, requires three parameters which include our `appId`, `channelName`, and `tempToken`, which we already have from our Agora console. The `agora_uikit` provides us an easy way to implement our UI by providing us with two classes which are the `AgoraVideoViewer`, which is a UI class that handles how the video layout should look, and the `AgoraVideoButtons`, which handles all the callbacks or event handler for the Agora RTM client class both of which takes in the `_client` parameter.

Lastly, add our AppID, Channel Name, and Temporary Token.

```dart
final _client = AgoraClient(
 agoraConnectionData: AgoraConnectionData(
   appId: 'adecb4f3dd7a452b99ea0c9f482f648f',
   channelName: 'testChannel',
   tempToken:'007eJxTYBB+Wbr8ueSdL7Xxl+8U31KSnxw9Wfv1LT89G7M5XL13/qkrMCSmpCYnmaQZp6SYJ5qYGiVZWqYmGiRbpplYGKWZmVikmfBPTWkIZGSos/dgZGSAQBCfm6EktbjEOSMxLy81h4EBAKkKItI=',
 ),
);

Future<void> _initializeAgora() async {
 await _client.initialize();
}

@override
void initState() {
 _initializeAgora();
 super.initState();
}
```
We added the required parameters: ' appId`, `channelName`, and `tempToken`. We then created an asynchronous function called `_initializeAgora()`, where we initialized our client by calling the `initialize()` method. Lastly, we called `initState(){}`, passing the asynchronous function that we initially created.



<div style="background-color:#efefef; border-radius:8px; padding:10px; display:block;">
<hr/>
<h3><em>Session Replay for Developers</em></h3> 
<p><em>Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data.</em></p>
<img alt="OpenReplay" style="margin-top:5px; margin-bottom:5px;" width="768" height="400" src="https://raw.githubusercontent.com/openreplay/openreplay/main/static/openreplay-git-hero.svg" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<p><em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em><p>
<hr/>
</div>


## Testing The App
On your terminal, run the command below to start the development server:
```bash
flutter run
```
At first, the home screen will be presented to you, which displays a button with the text **JOIN CALL CHANNEL**
![-](https://blog.openreplay.com/images/one-to-one-video-calls-with-flutter-and-agora/images/image08.png)

When the button is clicked, we then have to accept the microphone and camera permissions
![-](https://blog.openreplay.com/images/one-to-one-video-calls-with-flutter-and-agora/images/image09.png)

When all that is done, you should be redirected to the video call screen
![-](https://blog.openreplay.com/images/one-to-one-video-calls-with-flutter-and-agora/images/image10.png)


## Conclusion
Agora offers a robust and scalable solution supporting various platforms and devices. In this article, we learned about the Agora SDK and how we can use its API in a Flutter application. Here is the [link to the GitHub Source Code.](https://github.com/UcFlutter/flutter-agora) Happy coding!