dyte_uikit 0.5.1 copy "dyte_uikit: ^0.5.1" to clipboard
dyte_uikit: ^0.5.1 copied to clipboard

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

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.

2
likes
95
pub points
75%
popularity

Publisher

verified publisherdyte.io

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

Homepage

Documentation

API reference

License

MIT (LICENSE)

Dependencies

dyte_core, dyte_icons, file_picker, flutter, flutter_riverpod, get_it

More

Packages that depend on dyte_uikit