Quickstart
This quickstart shows how to use Dyte's Flutter UI Kit 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 Dyte SDK
- Initialize the SDK
- Configure a Dyte meeting
- Launch the meeting UI
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 Presets
- Create a Dyte Meeting
- Add Participant to the meeting
Step 1: Install the SDK
- Install the SDK from pub.
flutter pub add dyte_uikit
Set compileSdkVersion 33
& minSdkVersion 21
inside build.gradle
file of
android.
Step 2: Initialize the SDK
The DyteUIKit
is the main class of the SDK. It is the entry point and the only
class required to initialize Dyte SDK.
final meetingInfo = DyteMeetingInfo(authToken: '<auth_token>');
// This is optional, it can be used to configure the color of the meeting.
final configurations = Configurations(
baseBackground: Color(yourBaseColor),
basePrimary: Color(yourPrimaryColor),
textColor: Color(yourTextColor),
);
final DyteUIKit uiKit = DyteUIKit(
meetingInfo: DyteMeetingInfo(
roomName: meetingRoomName,
enableAudio: true,
enableVideo: true,
displayName: 'Flutter UI kit',
authToken: authToken,
),
);
// dyteMeeting is the meeting widget and it can be used to render the uikit.
final dyteMeeting = uiKit.loadUI();
You need to create
Step 3: Configure a Dyte meeting
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 . |
final meetingInfo = DyteMeetingInfo(authToken: '<auth_token>');
Step 4: Launch the meeting UI
To launch the meeting UI all you need to do is add the dyteMeeting
as a child.
import 'package:dyte_uikit/dyte_uikit.dart';
import 'package:flutter/material.dart';
class DyteMeetingPage extends StatelessWidget {
const DyteMeetingPage({super.key});
Widget build(BuildContext context) {
final DyteUIKit uiKit = DyteUIKit(
meetingInfo: DyteMeetingInfo(
roomName: meetingRoomName,
enableAudio: true,
enableVideo: true,
displayName: 'Flutter UI kit',
authToken: authToken,
),
);
return uiKit.loadUI();
}
}
Here is a pictorial representation of all the config options defined below.