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

1. Install the SDK from pub.

flutter pub add dyte_uikit

Note

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

  @override
  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.