Seryas It Solutions had a chance to install the Agora Video SDK tool on one of our Flutter projects. So, we just wanted to write down the steps on how to set up Agora Video SDK into a Flutter project.

Agora’s Video SDK is a tool that makes it easier to incorporate real-time video chat into native, mobile, and web applications. Moreover, doesn’t need to have a deep understanding of video codecs, network protocols, or signal processing, it gives developers a complete set of APIs and tools to add video-calling capabilities to their apps. Hence by enabling real-time video communication, developers can improve the user experience of their apps by integrating the Agora Video SDK.

Step 1:

Create an Agora account to get an App ID;

How to install Agora Video SDK into a Flutter project

Step 2.

Set up a Flutter environment for a Video Calling project.

In the terminal, run the following command:

flutter doctor

Step 3.

Create a Flutter app and Add Video SDK to the project.

Add the following lines to pubspec.yaml under dependencies.

agora_rtc_engine: ^x.y.z

permission_handler: ^9.2.0

Step 4.

Also use the Flutter framework to download dependencies to your app

flutter pub get

Step 5:

Create .env file and paste the app id

AGORA_APP_ID=agora app id

Step 6:

Implement a client for Video Calling

1. Import the required Agora and Flutter libraries in /lib/main.dart

import ‘dart:async’;

import ‘package:flutter/material.dart’;

import ‘package:permission_handler/permission_handler.dart’;

import ‘package:agora_rtc_engine/agora_rtc_engine.dart’;

2. Set up the app framework

To set up a Flutter app framework.

• Create a stateful widget
• Declare the connection variables including the appId,channelName, and token.
• Add a method to display information to the user

const String appId = "<--Insert app ID here-->";
void main() => runApp(const MaterialApp(home: MyApp()));
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State {
    String channelName = "<--Insert channel name here-->";
    String token = "<--Insert authentication token here-->";
    
    int uid = 0; // uid of the local user
    int? _remoteUid; // uid of the remote user
    bool _isJoined = false; // Indicates if the local user has joined the channel
    late RtcEngine agoraEngine; // Agora engine instance
    final GlobalKey scaffoldMessengerKey
    = GlobalKey(); // Global key to access the scaffold
    showMessage(String message) {
        scaffoldMessengerKey.currentState?.showSnackBar(SnackBar(
        content: Text(message),
        ));
    }
}

Implement the user interface

To implement the user interface, you create the following UI elements:

• An AgoraVideoViewwidget to display the local video preview.
• An AgoraVideoView widget to render the remote video.
• A button to Join a channel.
• A button to Leave the channel.

db.createUser(
// Build UI
@override
Widget build(BuildContext context) {
    return MaterialApp(
    scaffoldMessengerKey: scaffoldMessengerKey,
    home: Scaffold(
        appBar: AppBar(
            title: const Text('Get started with Video Calling'),
        ),
        body: ListView(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
            children: [
            // Container for the local video
            Container(
                height: 240,
                decoration: BoxDecoration(border: Border.all()),
                child: Center(child: _localPreview()),
            ),
            const SizedBox(height: 10),
            //Container for the Remote video
            Container(
                height: 240,
                decoration: BoxDecoration(border: Border.all()),
                child: Center(child: _remoteVideo()),
            ),
            // Button Row
            Row(
                children: [
                Expanded(
                    child: ElevatedButton(
                        onPressed: _isJoined ? null : () => {join()},
                        child: const Text("Join"),
                    ),
                ),
                const SizedBox(width: 10),
                Expanded(
                    child: ElevatedButton(
                        onPressed: _isJoined ? () => {leave()} : null,
                        child: const Text("Leave"),
                    ),
                ),
                ],
            ),
            // Button Row ends
            ],
        )),
    );
}

// Display local video preview
Widget _localPreview() {
    if (_isJoined) {
    return AgoraVideoView(
        controller: VideoViewController(
        rtcEngine: agoraEngine,
        canvas: VideoCanvas(uid: 0),
        ),
    );
    } else {
    return const Text(
        'Join a channel',
        textAlign: TextAlign.center,
    );
    }
}

// Display remote user's video
Widget _remoteVideo() {
    if (_remoteUid != null) {
    return AgoraVideoView(
        controller: VideoViewController.remote(
        rtcEngine: agoraEngine,
        canvas: VideoCanvas(uid: _remoteUid),
        connection: RtcConnection(channelId: channelName),
        ),
    );
    } else {
        String msg = '';
        if (_isJoined) msg = 'Waiting for a remote user to join';
        return Text(
        msg,
        textAlign: TextAlign.center,
    );
    }
}