Create a Flutter Video Call App with ZEGOCLOUD
Tags: zegocloud, videocall, flutter
Published: 2023-04-12 06:08:33

Have you ever thought or had to integrate communication features in you application and the complexity almost turned you off? or even many times wouldn't just work.

In this technical write-up, I will be showing you a seamless solution to achieve many communication features within your app in Flutter using [Zegocloud](https://www.zegocloud.com/) without having to reinvent the wheel. Zegocloud is a global communication service provider which provides [powerful communication SDKs & APIs](https://www.zegocloud.com/product/video-call) for app development (chat messaging, video and voice calls, video conference and live-streaming) with developer-friendly environment and features like:

- Ready-to-use 1-on-1/group calls
- Customizable UI styles
- Real-time sound waves display
- Device management
- Switch views during a 1-on-1 call
- Extendable menu bar
- Participant list
- Call invitation/Offline call invitation
- Custom call ringtones
- Screen sharing

Throughout this write-up, we will go step-by-step on how to set up a new Flutter project, configure your flutter project, and integrate Zegocloud into our app. I will include code snippets and images to help you follow along and [build your own video call app with Zegocloud using Flutter](https://www.zegocloud.com/docs/video-call/overview?platform=flutter&language=dart).

**Prerequisites:**
Basic knowledge of Flutter and Dart

**Step 1: Set up a Zegocloud Account:** 
Go to [https://console.zegocloud.com/account/signup](https://console.zegocloud.com/account/signup) to Sign Up


![Sign Up Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/do42c21gt393q5ub79qz.png)

_**Bonus:**_

![Free 10000mins credit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w0spmj5cvflu6rexoazj.png)

![Free 10000mins credit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/assxealhm87xgsaqtbpx.png)

Once, your account is setup... your console should look like this:


![Console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rlxifpugdtykldpn04ku.png)


**Step 2: Set up a new Flutter project**

Open Android Studio/VS Code and create a new Flutter project.
![Flutter New Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lh3f4et2r1za8o3vu130.png)
or run

```
flutter create zego_call
```

Once your project is setup, we need to add the ZegoCloud UIKit Dependency for 1-on-1 calls

![UIkit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohmg85fpdz73qcdos00x.png).

run

```
flutter pub add zego_uikit_prebuilt_call
```

Your pubspec.yaml should be updated as shown:


![pubspec](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qkgmecwihajctaagtsq.png)



**Step 3: Create a Zegocloud Project from your console**

Click on **Create your project** from the console and you will be redirected to the screen shown below: 

![New Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r73jhll7rsep2ip33edx.png)

There are varieties to choose from, but for the sake of this tutorial we will be using the **Voice & Video Call**, click NEXT and enter preferred project name.

![Project Information](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3m9x6bl8qyoglnpg0v4n.png)

Then click **Start with UIKits**

Wait for the console to create your project and you will be redirected to your project page with all your project info.


**Step 4: Implement Zegocloud dependency in your project**
Now that we have created a project on the console, we need to create our screens:

In your **main.dart** file, add the following code:

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

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        width: double.infinity,
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const Text(
                'ZegoCloud\nVideo Call Kit',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
              ),
              const SizedBox(
                height: 100,
              ),
              SizedBox(
                  width: 300,
                  height: 52,
                  child: ElevatedButton(
                    onPressed: () {
                      Navigator.of(context).push(MaterialPageRoute(
                          builder: ((context) =>
                              const CallPage(callID: 'ifeoluwa'))));
                    },
                    style: ButtonStyle(
                        backgroundColor: MaterialStateProperty.all<Color>(
                            const Color.fromRGBO(95, 51, 255, 1))),
                    child: const Text('Start Call'),
                  )),
            ]),
      ),
    );
  }
}

```

Create a stateless callpage below the **main.dart** file and add the code, this is where we consume the prebuilt UI kit by zegocloud and pass in the appID and appSign which can be gotten from the project console

![Project Console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mvbvveam1lodzlow9y5.png)

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

  @override
  Widget build(BuildContext context) {
    return ZegoUIKitPrebuiltCall(
        appID:
            1873850625, // Fill in the appID that you get from ZEGOCLOUD Admin Console.
        appSign:
            "9adffd105b8fd9925f617746797f340e5f9a10c5ba36738b0edda8de3bcb16f7", // Fill in the appSign that you get from ZEGOCLOUD Admin Console.
        userID: 'usos2345dhdoee',
        userName: 'popop',
        callID: callID,
        // You can also use groupVideo/groupVoice/oneOnOneVoice to make more types of calls.
        config: ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall()
        // ..onOnlySelfInRoom = () => Navigator.of(context).pop(),
        );
  }
}
```
Our Screen should be like this:

![Screen UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3r9vx17uwe5auwpdc573.png)



**Step 5: Configure your flutter project**

For your app to perform properly you need to require some permissions on the device.

**Android:**

1. Open the project_directory/android/app/build.gradle file, and modify the **compileSdkVersion** to **33**

```
.
.
.
android {
    compileSdkVersion 33
    ndkVersion flutter.ndkVersion
.
.
.
 defaultConfig {
        minSdkVersion 21
    }
.
.
.

```

2. Open the file project_directory/app/src/main/AndroidManifest.xml add the following code just before the application tag.

```
<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" />

```

3. Open the project_directory/android/app folder, create a  file named **proguard-rules.pro** and add the code below:

```
-keep class **.zego.** { *; }
```
then save.

4. Open the project_directory/android/app/build.gradle file again, then add the code below under buildTypes:

```
.
.
.
buildTypes {
        release {
            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            signingConfig signingConfigs.debug
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
.
.
.
```

**iOS:**

Open the project_directory/ios/Runner/Info.plist file, then add the following code:

```
.
.
.
<key>NSCameraUsageDescription</key>
<string>We require camera access to connect to a call</string>
<key>NSMicrophoneUsageDescription</key>
<string>We require microphone access to connect to a call</string>
.
.
.

```

![iOS Config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apsn69trozv0qqnv5v71.png)


Awesome! Our Video call App implementation is ready, you can now run your app and when you click the Start Call button, you should get the view below with all call features enabled.

![Call View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/biy4gmv18nduy2v2gw0d.png)

You can find the sourcecode here: [sourcecode](https://github.com/Hipheckts/zego_call)

Or watch my Video Tutorial Here: [CREATE A FLUTTER VIDEO CALL APP WITH ZEGOCLOUD](https://youtu.be/VPSR1E-7nx4)

Beyond the Video call, Zegocloud provides a host of other communication SDKs and APIs which can be useful for you now or in your future developments and projects especially with its high scalability rate, hence be sure to explore and try new things with it and you may be on your way to building another Fortune 500 with less stress as Zegocloud handles all communications whilst you focus on your core.