GitLocker: The Coding Marketplace

Description:

dyte uikit

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: #

Create an account on Dyte Developer Portal
Create some presets on the portal.

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
copied to clipboard
Step 2: Android & iOS Permissions #

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

defaultConfig {
...

compileSdkVersion 33
minSdkVersion 21

...
}
copied to clipboard

iOS

Set minimum deployment target for your Flutter app to 13.0 or higher in your Podfile.

platform :ios, '13.0'
copied to clipboard

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>
copied to clipboard

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>');
copied to clipboard
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);

copied to clipboard
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();
}
}
copied to clipboard
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.