dyte_uikit 0.0.2+4 copy "dyte_uikit: ^0.0.2+4" to clipboard
dyte_uikit: ^0.0.2+4 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.

This package consumes dyte_core package under the hood, and give you all the UI screens required to integrate audio/video calls in your Flutter application with minimal effort.

How is dyte_core different from dyte_uikit?
dyte_core gives you the access of low-level endpoints from Dyte SDK which gives you infinite room of flexibility. Whereas, dyte_uikit consumes these endpoints and bring forth a fully-furnished UI so that you don't have to worry about low level implementation on your end.

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

---------------------SHOW SOME SCREENS-------------------

Before getting started: #

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

  • Create a Dyte meeting in your application using your Org Id and API Key assigned to your Dev Portal organization.

Meetings: There are 2 type of meetings v1 & v2. We recommend you to use v2 meetings since they have a lot of features and future updates will be done keeping v2 in the center, depracating v1.

  • Add participant to your meeting.
  • As you add a participant to your meeting, you'll get a authToken. That's all you require to initiate the audio/video call.

Usage #

  • Add dyte_uikit as a dependency in your pubspec.yaml, and run flutter pub get.
  • This package give you access to DyteUIKit(meetingInfo: '<Meeting Info>'', clientContext: '<YOUR_CONTEXT>') class, which requires meetingInfo which is of type DyteMeetingInfo, clientContext (which is required to handle routing within UI Kit) as an argument. Create an instance of DyteUIKit() with required arguments.

MeetingInfo: There are 2 types of meetingInfo: DyteMeetingInfoV1, DyteMeetingInfoV2 for v1 and v2 meetings respectively. We recommend using v2 meeting.

  • Create a DyteMeetingInfoV2(authToken: '<YOUR_AUTH_TOKEN>') meeting instance, which requires just an authToken, here pass the authToken you created in Before getting started section. It can also take optional arguments enableAudio, enableVideo arguments, which can be used to set initial audio/video status for user.
  • Pass this DyteMeetingInfo instance you create and your context as DyteUIKit() as an argument.
  • Call the loadUI() method on DyteUIKit() instance which will return you a widget. Push this widget as the next page of your app and you're done!

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.