Skip to main content

Flutter Core SDK Quickstart

This quickstart shows how to use RealtimeKit's Flutter Core SDK to add live video and audio call 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 Core SDK GitHub repository.

Objective​

You'll learn how to:

  • Install the RealtimeKit SDK
  • Initialize the SDK
  • Configure a RealtimeKit meeting
  • Initialize the RealtimeKit meeting
  • And go live with your RealtimeKit meeting

Before Getting Started​

Step 1: Install the SDK​

  1. To install the SDK, add the RealtimeKit Core Flutter SDK dependency into the pubspec.yaml file.

    flutter pub add realtimekit_core

  2. Then import the following package into your project:

    import 'package:realtimekit_core/realtimekit_core.dart';

After importing the package, perform the following steps for Android and iOS.

For 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'

For iOS​

  1. Set your platform to iOS 13.0 or above in your Podfile.
platform :ios, '13.0'
  1. Add the following entries to the Info.plist file. This gives permission to your app to access the camera and microphone, access photos, install the required fonts and icons.
<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>

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/>
Note

If you intend to publish your app to the Google Play or App Store, you'll need to perform a few additional steps. So if you're working on release builds and not debug builds, refer to the Release Builds section.

Step 2: Initialize the SDK​

The RealtimeKitClient is the main class of the SDK. It is the entry point and the only class required to initialize RealtimeKit SDK.

final meeting = RealtimeKitClient();

Step 3: Set the meeting properties​

Set the properties in the RtkMeetingInfo class. You just need to provide the participant's authToken.

NameDescription
authTokenAfter 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.
baseDomainThis is an optional argument applicable only when using white-labelled domain.
enableAudioA boolean value to enable or disable audio in the meeting. Default value is true. This is an optional argument.
enableVideoA 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 connection request​

To initialize the connection request, call the init() method obtained on meeting with the meetingInfo argument. This will establish the connection with the RealtimeKit meeting server.

meeting.init(meetingInfo);

By registering state observers, you receive callbacks for this action on the meeting object.

class RoomStateNotifier extends RtkMeetingRoomEventListener {

  ...

  @override
  void onMeetingInitStarted() {
    /// on meeting init started
  }

  @override
  void onMeetingInitCompleted() {
    /// on meeting init completed
  }

  @override
  void onMeetingInitFailed(MeetingError error) {
    /// on meeting init failed
  }

  ...
}

Subscibe to the RtkMeetingRoomEventListener to receive the callbacks for the meeting object.

meeting.addMeetingRoomEventListener(RoomStateNotifier());

Step 5: Connect to the meeting​

Now, if you have established the connection with the RealtimeKit meeting server successfully i.e. if you received onMeetingInitCompleted callback, next step is to join the room.

Join the room​

To join the meeting room, call joinRoom() method on the RealtimeKitClient instance as shown below.

meeting.joinRoom(onSuccess: () {}, onError: (error) {});

By registering state observers, you receive callbacks for join related actions on the meeting object.

class RoomStateNotifier extends RtkMeetingRoomEventListener {

  ...

  @override
  void onMeetingRoomJoinStarted() {
    /// Handle join start state
  }

  @override
  void onMeetingRoomJoined() {
    /// Handle joining completion, ex: move to room screen
  }

  @override
  void onMeetingRoomJoinFailed(MeetingError error) {
    /// Handle failure
  }

  ...
}

Successful joining of meeting is indicated by onMeetingRoomJoined callback.

Leave the room​

Once the meeting is over, you can leave the meeting room.

Once leave meeting is completed or you decide to release() the meeting [called when user exits the SDK without joining the meeting room, say user exited from setup/waiting room], make sure to cleanup all listeners by calling meeting.cleanAllNativeListeners().

To leave the meeting room, call leaveRoom() method on the meeting as shown below.

meeting.leaveRoom(onSuccess: () {}, onError: (error) {});

Cleanup listeners​

Call cleanAllNativeListeners() method when you're done with the current session of a RealtimeKit meeting. Doing this internally calls individual clean methods for each listener, ensuring that all resources are properly released.

By registering state observers, you receive callbacks for this action on the meeting object.

class RoomStateNotifier extends RtkMeetingRoomEventListener {

  ...

  @override
  void onMeetingRoomLeaveStarted() {
    /// on meeting room leave started
  }

  @override
  void onMeetingRoomLeaveCompleted() {
    meeting.removeMeetingRoomEventListener(this);
    meeting.cleanAllNativeListeners();
    /// on meeting room left
  }

  ...

}

Successfully exiting the meeting is indicated by onMeetingRoomLeaveCompleted callback.

Release Builds​

If you intend to publish your app to the Google Play or App Store, perform the following steps after installing the SDKs. So if you're working on release builds and not debug builds, do the following:

For iOS release builds​

Disable BITCODE in your Podfile.

post_install do |installer|
   installer.pods_project.targets.each do |target|
       target.build_configurations.each do |config|
           config.build_settings['ENABLE_BITCODE'] = 'NO'
       end
   end
end