RealtimeKit UI for Flutter Mobile #

An easy-to-integrate Flutter package for all your audio-video call, and does all the heavylifting using state-of-the-art Cloudflare's RealtimeKit and infrastructure.

A following example showcases some of the screens you get with this package:

Before getting started: #

Make sure you've read the Getting Started with RealtimeKit guide and completed the steps in the Integrate RealtimeKit section which includes:

• Creating a RealtimeKit Developer Account

• Creating Presets

Presets: Set of permissions and UI configurations that are applied to participants.

• Creating a RealtimeKit Meeting

• Adding a Participant to the meeting

After adding a participant to your meeting, you'll receive an authToken. That's all you require to prepare a complete RealtimeKit video-audio meeting.

Usage #

Step 1: Install the SDK #

• Add realtimekit_ui as a dependency in your pubspec.yaml, or run flutter pub add realtimekit_ui.

flutter pub add realtimekit_ui

Step 2: Android & iOS Permissions #

• Android

  Set compileSdkVersion 36 & minSdkVersion 24 inside app-level build.gradle.

  
  defaultConfig {
      ...
  
      compileSdkVersion 36
      minSdkVersion 24
  
      ...
  }
  

• iOS

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

  platform :ios, '13.0'
  

  2. Add the following keys to your Info.plist file to get Camera & Microphone permission.

  <!-- Add the permission to use camera & microphone. -->
  
  <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>
  

Step 3: Initialize the SDK #

Create the RtkMeetingInfo object using the authToken you fetched from Before Getting Started section as follows:

    final meetingInfo = RtkMeetingInfo(authToken: '<auth_token>');

Initialize the RealtimeKitUI with the RealtimeKitUIBuilder class, using the meetingInfo configured above.

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

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

final realtimeKitUI = RealtimeKitUIBuilder.build(uiKitInfo: uikitInfo);

Step 4: Launch the meeting UI #

To launch the meeting UI all you need to do is call the loadUI() method of the RealtimeKitUI object which will return a Widget. 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 RtkMeetingPage extends StatelessWidget {
      const RtkMeetingPage({super.key});
    
      @override
      Widget build(BuildContext context) {
        ...
        // Push this widget as page in your app
        return realtimeKitUI.loadUI();
      }
    }

Conclusion #

To know more about the customization you can do with realtimekit_ui, head over to our Flutter docs.

Sample app #

You can clone our sample app to get more idea about the implementation of realtimekit_ui in Flutter application.