Dyte UI Kit

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

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

Before getting started:

Presets: Permissions that you grant to certain role in your Dyte dev portal organization.

  • Create a Dyte meeting.

  • Add participant to your meeting.

  • As you add a participant to your meeting, you'll get a authToken. That's all you require to initialize a full-feature dyte audio/video call.

Usage

Step 1: Install the SDK

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

Step 2: Android & iOS Permissions

  • Android

    Set compileSdkVersion 33 & minSdkVersion 21 inside app-level build.grade.

    
defaultConfig {
    ...

    compileSdkVersion 33
    minSdkVersion 21

    ...
}

  • iOS

    1. Set minimum deployment target for your Flutter app to 13.0 or higher in your Podfile.
    platform :ios, '13.0'
    1. Add the following keys to your `Info.plist file to get Camera & Microphone permission.
    /* Attach 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 Dyte Meeting SDK

Build DyteMeetingInfo object (preferably v2 meeting) using the authToken you fetched from Before Getting Started section as follows:

    final meetingInfoV2 = DyteMeetingInfoV2(authToken: '<auth_token>');

The DyteUIKit is the main class of the SDK. It is the entry point and the only class required to initialize Dyte UI Kit SDK.


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

final uikitInfo = DyteUIKitInfo(
      meetingInfo,
      // Optional: Pass the DyteDesignTokens object to customize the UI
      designToken: DyteDesignTokens(
        colorToken: DyteColorToken(
          brandColor: Colors.purple,
          backgroundColor: Colors.black,
          textOnBackground: Colors.white,
          textOnBrand: Colors.white,
        ),
      ),
    );

final uiKit = DyteUIKitBuilder.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 DyteUIKit 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:dyte_uikit/dyte_uikit.dart';
    import 'package:flutter/material.dart';

    class DyteMeetingPage extends StatelessWidget {
      const DyteMeetingPage({super.key});
    
      @override
      Widget build(BuildContext context) {
        ...
        // Push this widget as page in your app
        return uiKit.loadUI();
      }
    }

Conclusion

To know more about the customization you can do with dyte_uikit, head over to docs.dyte.io/flutter.

Sample app

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

Libraries

dyte_uikit