Quickstart

This quickstart shows how to use Cloudflare's RealtimeKit UI Flutter SDK to add live video and audio to your Flutter applications.

For getting started quickly, you can use our sample code. You can clone and run a sample application from the Flutter UI Kit Sample App GitHub repository.

Objective

You’ll learn how to:

• Install the RealtimeKit Flutter SDK
• Configuring Android & iOS permissions
• Initialize the SDK
• Configure a meeting
• Launch the meeting UI

Before Getting Started

Make sure you've read the Getting Started with RealtimeKit topic and completed the steps in the Integrate RealtimeKit section. You must complete the following steps:

• Create a Developer Account
• Create Presets
• Create a RealtimeKit Meeting
• Add Participant to the meeting

Step 1: Install the SDK

Install the SDK from pub.dev.

flutter pub add realtimekit_ui

Step 2: Configure permissions for Android and iOS

Perform the following steps:

Android

Set compileSdkVersion 36 and minSdkVersion 24 inside build.gradle file at the <project root>/android/app/build.gradle file.

  defaultConfig {
        ...

        compileSdkVersion 36
        minSdkVersion 24

        ...
    }

And change the kotlin version to 1.9.0

    ext.kotlin_version = '1.9.0'

iOS

1. Set minimum deployment target for your Flutter app to 13.0 or higher.

platform :ios, '13.0'

2. Add the following keys to your Info.plist file, located in <project root>/ios/Runner/Info.plist :

/* Attach the permission to use camera & microphone. */
<key>NSBluetoothPeripheralUsageDescription</key>
<string>We will use your Bluetooth to access your Bluetooth headphones.</string>

<key>NSBluetoothAlwaysUsageDescription</key>
<string>We will use your Bluetooth to access your Bluetooth headphones.</string>

<key>NSCameraUsageDescription</key>
<string>For people to see you during meetings, we need access to your camera.</string>

<key>NSMicrophoneUsageDescription</key>
<string>For people to hear you during meetings, we need access to your microphone.</string>

<key>NSPhotoLibraryUsageDescription</key>
<string>For people to share, we need access to your photos.</string>


<key>UIBackgroundModes</key>
<array>
	<string>audio</string>
	<string>voip</string>
	<string>fetch</string>
	<string>remote-notification</string>
</array>

3. In iOS, if you are allowing user to download attachments in chat, add the following permissions in your app's Info.plist:

<key>LSSupportsOpeningDocumentsInPlace</key>
<true/>
<key>UIFileSharingEnabled</key>
<true/>

Step 3: Configure a RealtimeKit meeting

To initiate RealtimeKit Meeting for any participant you just need to pass authToken as an argument. You can get the authToken via the Add Participant API.

After getting the authToken, you need to create the RtkMeetingInfo object as follows:

Name	Description
authToken	After you've created the meeting, add each participant to the meeting using the Add Participant API (The presetName created earlier must be passed in the body of the Add Participant API request) The API response contains the authToken.
baseDomain	This is an optional argument applicable only when using white-labelled domain.
enableAudio	A boolean value to enable or disable audio in the meeting. Default value is true. This is an optional argument.
enableVideo	A boolean value to enable or disable video in the meeting. Default value is true. This is an optional argument.

final meetingInfo = RtkMeetingInfo(
                    authToken: '<authToken>',
                    baseDomain: 'realtime.cloudflare.com',  // optional argument, applicable only if you are using a white-labeled domain
                    enableAudio: false,                     // optional argument, to enable or disable audio in the meeting
                    enableVideo: false,                     // optional argument, to enable or disable video in the meeting
                  );

Step 4: Initialize the SDK

The RealtimeKitUI is the main class of the SDK. It is the entry point and the only class required to initialize RealtimeKit UI Kit SDK. To initialize it we have to pass RealtimeKitUIInfo object as an argument.

/* Passing the RtkMeetingInfo object `meetingInfo` you created in the Step 3,
*/

final uikitInfo = RealtimeKitUIInfo(
      meetingInfo,
      // Optional: Pass the DyteDesignTokens object to customize the UI
      designToken: RtkDesignTokens(
        colorToken: RtkColorToken(
          brandColor: Colors.purple,
          backgroundColor: Colors.black,
          textOnBackground: Colors.white,
          textOnBrand: Colors.white,
        ),
      ),
    );

final uiKit = RealtimeKitUIBuilder.build(uiKitInfo: uikitInfo,
  skipSetupScreen: true, // optional argument, to skip the setup screen, defaults to false
);

Note

Note: To skip the setup screen, you need to pass the skipSetupScreen argument as true in the RealtimeKitUIBuilder.build method.

You can learn more about customization of the uikit in the Design System section.

Step 5: Launch the meeting UI

To launch the meeting you can simply use the object returned after calling build method. The uikit above is a widget itself. You can push this widget as a page to start the flow of prebuilt Flutter UI Kit.

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

class RealtimeKitMeetingPage extends StatelessWidget {
  const RealtimeKitMeetingPage({super.key, required this.uiKit});

  final RealtimeKitUI uiKit;

  @override
  Widget build(BuildContext context) {
    ...
    return uiKit;
  }
}

Voila! You're all done. Here is the pictorial representation of all the configuration options passed.