Create a video call app with Flutter with ZEGOCLOUD UIKit SDK

Introduction

Video calls are an essential feature in today’s digital world. Let it be a business meeting, call with a friend, or an online doctor’s appointment.

This seemingly important feature could sometimes be a very difficult task to manage properly. Things can very easily get out of hands with mounting conferencing costs and technical overhead.

Zegocloud offers an easy to use yet highly customizable SDK to build your next video call application without much hassle.

Today we are going to learn how to integrate this in our Flutter application with ZegoUIKitPrebuiltCall UI kit.

Set up Zegocloud account

Sign up using the link below to get 10,000 free minutes

Sign up for 10,000 free mins: http://bit.ly/3G49XHE

Find out more about ZEGOCLOUD: http://bit.ly/3JYsUwA

How to make video call app with flutter: https://bit.ly/434bWFV

1. Visit console.zegolocloud.com and create your account

2. Click create a new project

3. Choose video and voice call from the types of projects menu

4. Choose Android as your application type

Now you should have your Zegocloud project set up with an AppId and App Signature

Set up Flutter project with Zegocloud SDK

1. Create a new Flutter project. In VS Code use Control + Shift + P > Flutter new project option to do so.

2. Install the zegocloud package

flutter pub add zego_uikit_prebuilt_call

3. Set your compileSdkVersion to 33, in your your_project/android/app/build.gradle file.

4. From the same file modify minSdkVersion to 21

5. Modify the kotlin version to >= 1.8.0 and the gradle classpath version to 7.3.0 in the your_project/android/app/build.gradle file

6. Make the gradle version >= 7.0: In the your_project/android/gradle/wrapper/gradle-wrapper.properties file, modify the distributionUrl to https://services.gradle.org/distributions/gradle-7.4-all.zip

7. Add the following permissions:

Open the file your_project/app/src/main/AndroidManifest.xml, and add the following code:

 <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
 <uses-permission android:name="android.permission.RECORD_AUDIO" />
 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 <uses-permission android:name="android.permission.CAMERA" />
 <uses-permission android:name="android.permission.BLUETOOTH" />
 <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

 <uses-permission android:name="android.permission.READ_PHONE_STATE" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.WAKE_LOCK" />

7. Prevent code obfuscation:

In your project’s your_project > android > app folder, create a proguard-rules.pro file with the following content as shown below:

-keep class **.zego.** { *; }

Add the following config code to the release part of the your_project/android/app/build.gradle file.

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

Writing Flutter code

Use this as your initial code in main.dart file

import 'package:flutter/material.dart';
import 'package:flutter_vc_zegocloud/keys.dart';
import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final _formKey = GlobalKey<FormState>();
  final _nameController = TextEditingController(text: 'Name');
  final _idController = TextEditingController(text: 'ID');
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Video Call App'),
      ),
      body: Form(
        key: _formKey,
        child: Padding(
          padding: const EdgeInsets.all(15.0),
          child: Column(
            children: [
              TextFormField(controller: _nameController),
              SizedBox(
                height: 20,
              ),
              TextFormField(controller: _idController),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Text('Call'),
        onPressed: () {
          Navigator.of(context).push(MaterialPageRoute(
            builder: (context) => CallPage(
                callID: _idController.text.toString(),
                uName: _nameController.text.toString()),
          ));
        },
      ),
    );
  }
}

class CallPage extends StatelessWidget {
  const CallPage({Key? key, required this.callID, required this.uName})
      : super(key: key);
  final String callID;
  final String uName;

  @override
  Widget build(BuildContext context) {
    return ZegoUIKitPrebuiltCall(
      appID:
          APP_ID, // Fill in the appID that you get from ZEGOCLOUD Admin Console.
      appSign: APP_SIGN,
      userID: uName + '123',
      userName: uName,
      callID: callID,
      // You can also use groupVideo/groupVoice/oneOnOneVoice to make more types of calls.
      config: ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall()
        ..onOnlySelfInRoom = (_) => Navigator.of(context).pop(),
    );
  }
}

Conclusion

This is how the UI will look like before initiating the call

This is the UI from Zegocloud’sUI kit during a call

Flutter video call application demo

If you require more explanation or details you can also refer to this video.