dyte_uikit 0.0.5+1

Dyte's UI SDK to integrate video-audio to your app

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

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'
  

  2. 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 `configuration` is optional, it is used to setup the theme of Dyte UI Kit. 
    final configurations = Configurations(
      baseBackground: Color(yourBaseColor),
      basePrimary: Color(yourPrimaryColor),
      textColor: Color(yourTextColor),
    );
    
    /// Passing the DyteMeetingInfoV2 object `meetingInfoV2` you created in the Step 3, and your context in `clientContext` parameter.
    
    final DyteUIKit uiKit = DyteUIKit(
      meetingInfo: meetingInfoV2,
      clientContext: context,
      configurations: configurations, //optional
    );

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.