Flutter

Quickstart

This quickstart shows how to add RealtimeKit's Interactive Livestream SDK to your Flutter applications.

Further down this guide we also explain how RealtimeKit's UI component library can help to build your UI faster with components specially made for Interactive Livestream applications.

You can also checkout our sample code for Flutter. You can clone and run a sample application from the Flutter Samples GitHub repository.

Before Getting Started

• Make sure you have a mechanism to get authToken from your server side which you would have received as part of Add Participant call.

Step 1: Install the SDK

Install the SDK from pub.dev.

flutter pub add realtimekit_ui

Step 2: Configuring Android & iOS permissions

• Android

  Set compileSdkVersion 36 & minSdkVersion 24 inside build.gradle file at <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. */

NSBluetoothPeripheralUsageDescription We will use your Bluetooth to access your Bluetooth headphones. NSBluetoothAlwaysUsageDescription We will use your Bluetooth to access your Bluetooth headphones. NSCameraUsageDescription For people to see you during meetings, we need access to your camera. NSMicrophoneUsageDescription For people to hear you during meetings, we need access to your microphone. NSPhotoLibraryUsageDescription For people to share, we need access to your photos. UIBackgroundModes audiovoipfetchremote-notification

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

```xml
<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.

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

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
);

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.