Flutter Core SDK Quickstart
This quickstart shows how to use Dyte'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 Dyte SDK
- Initialize the SDK
- Configure a Dyte meeting
- Initialize the Dyte meeting
- And go live with your Dyte meeting
Before Getting Started
- Make sure you've read the
Getting Started with Dyte topic and
completed the steps in the
Integrate Dyte section.
You must complete the following steps:
- Create a Dyte Developer Account
- Create a Dyte Meeting
- Add Participant to the meeting
- Install Flutter on your system
- (For iOS apps) Install Xcode
- Ensure that Rosetta is installed with Xcode on Mac computers with Apple silicon.
- Make sure your Mac computers are running macOS version 12.0 Monterey or higher.
- (For Android apps) Install Android Studio, or install the Android SDK for Command-Line Interface (CLI) only.
Step 1: Install the SDK
-
To install the SDK, add the Dyte Core Flutter SDK dependency into the
pubspec.yaml
file.flutter pub add dyte_core
-
Then import the following package into your project:
import 'package:dyte_core/dyte_core.dart';
After importing the package, perform the following steps for Android and iOS.
For iOS
- Set your platform to iOS 13.0 or above in your Podfile.
platform :ios, '13.0'
- 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>
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/>
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 DyteMobileClient
is the main class of the SDK. It is the entry point and
the only class required to initialize Dyte SDK.
final dyteClient = DyteMobileClient();
Step 3: Set the meeting properties
Set the properties in the DyteMeetingInfo
class. You just need to provide the
participant's authToken
.
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 . |
baseUrl | The base URL of the Dyte server. Default value is https://api.dyte.io/v2 . This is an optional argument. |
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 = DyteMeetingInfoV2(
authToken: '<authToken>',
baseUrl: 'https://api.dyte.io/v2', // optional argument, if you want to pass your own baseUrl
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
dyteClient
with the meetingInfo
argument. This will establish the connection
with the Dyte meeting server.
dyteClient.init(meetingInfo);
By registering state observers, you receive callbacks for this action on the meeting object.
class RoomStateNotifier implements DyteMeetingRoomEventsListener {
...
void onMeetingInitStarted() {
/// on meeting init started
}
override
void onMeetingInitCompleted() {
/// on meeting init completed
}
void onMeetingInitFailed(Exception exception) {
/// on meeting init failed
}
...
}
Subscibe to the DyteMeetingRoomEventsListener
to receive the callbacks for the meeting object.
dyteClient.addMeetingRoomEventsListener(RoomStateNotifier());
Step 5: Connect to the meeting
Now, if you have established the connection with the Dyte 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 dyteClient
instance
as shown below.
dyteClient.joinRoom();
By registering state observers, you receive callbacks for join related actions on the meeting object.
class RoomStateNotifier implements DyteMeetingRoomEventsListener {
...
void onMeetingRoomJoinStarted() {
/// Handle join start state
}
void onMeetingRoomJoined() {
/// Handle joining completion, ex: move to room screen
}
void onMeetingRoomJoinFailed(exception){
/// 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 dyteClient.cleanAllNativeListeners()
.
To leave the meeting room, call leaveRoom()
method on the dyteClient
as
shown below.
dyteClient.leaveRoom();
Cleanup listeners
Introduced in dyte_core: 0.3.6
, cleanAllNativeListeners()
method which needs to be called when you're done with current session of dyte meeting. It interally calls individual new clean methods for each listener cleanNativeMeetingRoomEventsListener()
, cleanNativeParticipantEventListener()
, cleanNativePollListener()
, cleanNativeRecordingListener()
, cleanNativeStageEventsListener()
, cleanNativeSelfParticipantEventListener()
, cleanNativeChatListener()
, cleanNativeDataUpdateListener()
, cleanNativeLivestreamListener()
, cleanNativePluginEventsListener()
.
By registering state observers, you receive callbacks for this action on the meeting object.
class RoomStateNotifier implements DyteMeetingRoomEventsListener {
...
void onMeetingRoomLeaveStarted() {
/// on meeting room leave started
}
void onMeetingRoomLeaveCompleted() {
dyteClient.removeMeetingRoomEventsListener(this);
dyteClient.cleanupAppListeners();
/// 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