Flutter Video call App:Flutter is a versatile tool that enables developers to create applications with a wide range of functionalities. It is capable of developing applications that can run on multiple platforms seamlessly. As video call becomes more and more popular since the covid-19, many developers are interested in making flutter call apps. No worry, keep going on! This tutorial shows us how to create a video/audio calling application utilizing the ZEGOCLOUD Flutter CallKit.

Introduction to ZEGOCLOUD UIKits – Flutter Callkit

ZEGOCLOUD UIKits is a collection of pre-designed user interface (UI) elements that can be used by developers to create visually appealing and intuitive applications with ease. It allows developers to build video communication applications with a seamless experience.

The UIKits come complete with a diverse range of design templates, including buttons, icons, frames, and other UI components, making it easier for developers to integrate video communication functionalities into their applications. These design templates can be used to create comprehensive UI designs for applications that are visually appealing and intuitive. It saves developers time and effort in designing UIs for their applications.

Through it, We can complete the development of video calls, live streaming, video conference, and other scenarios within 10 minutes.

Integrate the SDK

Add ZegoUIKitPrebuiltCall as dependencies

Run the following code in your project root directory :

flutter pub add zego_uikit_prebuilt_call

Import the SDK

Now in your Dart code, ​​​​​​​​​​​​​​​​​import the prebuilt Call Kit SDK.

​​​​​​​​​​​​​​​​import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';

Using the ZegoUIKitPrebuiltCall in your project

• Go to ZEGOCLOUD Admin Console , get the appID and appSign of your project.
• Specify the userID and userName for connecting the Call Kit service.
• Create a callID that represents the call you want to make.
• userID and callID can only contain numbers, letters, and underlines (_).
• Users that join the call with the same callID can talk to each other.

Configure your project

Android

1. Modify the compileSdkVersion to 33 in the your_project/android/app/build.gradle file.
2. Modify the minSdkVersion in the same file:
3. 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:
4. 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.
5. Add app permissions.
6. 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.WRITE_EXTERNAL_STORAGE" />
   <uses-permission android:name="android.permission.READ_PHONE_STATE" />
   <uses-permission android:name="android.permission.WAKE_LOCK" />

1. Prevent code obfuscation.
2. 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. { *; }

9.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'

HomePage

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:videocall/call.dart';
import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';

class HomePage extends StatefulWidget {
  HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final callIDTextCtrl = TextEditingController();
  final userIDTextCtrl = TextEditingController();
  final userNameTextCtrl = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 100),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Padding(
                padding: const EdgeInsets.all(10),
                child: Expanded(
                  child: TextFormField(
                    controller: userNameTextCtrl,
                    decoration: const InputDecoration(
                        labelText: "start a call by username"),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(10),
                child: Expanded(
                  child: TextFormField(
                    controller: userIDTextCtrl,
                    decoration: const InputDecoration(
                        labelText: "start a call by userid"),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Expanded(
                      child: TextFormField(
                        controller: callIDTextCtrl,
                        decoration: const InputDecoration(
                            labelText: "start a call by id"),
                      ),
                    ),
                    ElevatedButton(
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(builder: (context) {
                            return CallPage(
                              callID: callIDTextCtrl.text,
                              callUserId: userIDTextCtrl.text,
                              callUserName: userNameTextCtrl.text,
                            );
                          }),
                        );
                      },
                      child: const Text("call"),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Call page

import 'dart:math';

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

//String userID = Random().nextInt(10000).toString();

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

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

For more: To know Linkedin clone in Flutter