From a1b96f720f134bb5cff69afb39cee31820bfb548 Mon Sep 17 00:00:00 2001 From: Aman Kumar Date: Wed, 8 Apr 2026 12:43:54 +0530 Subject: [PATCH 1/2] feat(realtimekit): add exportable components --- .../ui-kit/api-reference/flutter/index.mdx | 8 +++ .../rtk-audio-indicator-icon-widget.mdx | 41 +++++++++++++ .../flutter/rtk-chat-icon-widget.mdx | 25 ++++++++ .../api-reference/flutter/rtk-join-button.mdx | 46 ++++++++++++++ .../flutter/rtk-leave-button.mdx | 41 +++++++++++++ .../flutter/rtk-leave-meeting-dialog.mdx | 37 ++++++++++++ .../flutter/rtk-meeting-title.mdx | 37 ++++++++++++ .../flutter/rtk-name-tag-widget.mdx | 47 +++++++++++++++ .../flutter/rtk-participant-tile.mdx | 49 +++++++++++++++ .../flutter/rtk-participants-icon-widget.mdx | 25 ++++++++ .../flutter/rtk-plugins-screen.mdx | 29 +++++++++ .../flutter/rtk-polls-screen.mdx | 25 ++++++++ .../api-reference/flutter/rtk-provider.mdx | 60 +++++++++++++++++++ .../flutter/rtk-self-audio-toggle.mdx | 50 ++++++++++++++++ .../flutter/rtk-self-video-toggle.mdx | 50 ++++++++++++++++ .../flutter/rtk-setup-screen-component.mdx | 49 +++++++++++++++ 16 files changed, 619 insertions(+) create mode 100644 src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/index.mdx create mode 100644 src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-audio-indicator-icon-widget.mdx create mode 100644 src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-chat-icon-widget.mdx create mode 100644 src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-join-button.mdx create mode 100644 src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-leave-button.mdx create mode 100644 src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-leave-meeting-dialog.mdx create mode 100644 src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-meeting-title.mdx create mode 100644 src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-name-tag-widget.mdx create mode 100644 src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-participant-tile.mdx create mode 100644 src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-participants-icon-widget.mdx create mode 100644 src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-plugins-screen.mdx create mode 100644 src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-polls-screen.mdx create mode 100644 src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider.mdx create mode 100644 src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-self-audio-toggle.mdx create mode 100644 src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-self-video-toggle.mdx create mode 100644 src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-setup-screen-component.mdx diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/index.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/index.mdx new file mode 100644 index 000000000000000..f35b87180256e7a --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/index.mdx @@ -0,0 +1,8 @@ +--- +pcx_content_type: navigation +title: Flutter +description: Complete API reference for Flutter library components +sidebar: + group: + hideIndex: true +--- diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-audio-indicator-icon-widget.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-audio-indicator-icon-widget.mdx new file mode 100644 index 000000000000000..d109069b0277f00 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-audio-indicator-icon-widget.mdx @@ -0,0 +1,41 @@ +--- +pcx_content_type: navigation +title: RtkAudioIndicatorIconWidget +description: API reference for RtkAudioIndicatorIconWidget component (Flutter Library) +--- + +A widget that displays the audio status of a participant in a RealtimeKit meeting. + +:::note +[`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree. +::: + +## Properties + +| Property | Type | Required | Default | Description | +| ------------- | ----------------------- | -------- | ------- | --------------------------------------------- | +| `participant` | `RtkMeetingParticipant` | ✅ | - | The participant whose audio status to display | +| `iconSize` | `double?` | ❌ | `24` | Size of the audio indicator icon | + +## Usage Examples + +### Basic Usage + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkAudioIndicatorIconWidget( + participant: participant, +) +``` + +### With Properties + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkAudioIndicatorIconWidget( + participant: participant, + iconSize: 32.0, +) +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-chat-icon-widget.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-chat-icon-widget.mdx new file mode 100644 index 000000000000000..91b0eec7a394d8d --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-chat-icon-widget.mdx @@ -0,0 +1,25 @@ +--- +pcx_content_type: navigation +title: RtkChatIconWidget +description: API reference for RtkChatIconWidget component (Flutter Library) +--- + +A widget that displays a chat icon, navigates to the chat page when pressed, and marks all messages as read. + +:::note +[`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree. +::: + +## Properties + +This component does not accept any properties. It uses the `RealtimekitClient` from the nearest [`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) ancestor. + +## Usage Examples + +### Basic Usage + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkChatIconWidget() +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-join-button.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-join-button.mdx new file mode 100644 index 000000000000000..322b6441c261fbe --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-join-button.mdx @@ -0,0 +1,46 @@ +--- +pcx_content_type: navigation +title: RtkJoinButton +description: API reference for RtkJoinButton component (Flutter Library) +--- + +A button widget for joining a RealtimeKit meeting room. Provides visual feedback during the joining process. + +## Properties + +| Property | Type | Required | Default | Description | +| ----------------- | ------------------- | -------- | -------------------- | ------------------------------------------- | +| `meeting` | `RealtimekitClient` | ✅ | - | Meeting client instance | +| `onMeetingJoined` | `VoidCallback?` | ❌ | - | Callback invoked when the meeting is joined | +| `rtkDesignToken` | `RtkDesignTokens?` | ❌ | Global design tokens | Design tokens for customization | +| `height` | `double?` | ❌ | - | Height of the button | +| `width` | `double?` | ❌ | - | Width of the button | +| `isDisabled` | `bool` | ❌ | `false` | Whether the button is disabled | + +## Usage Examples + +### Basic Usage + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkJoinButton( + meeting: yourMeetingInstance, +) +``` + +### With Properties + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkJoinButton( + meeting: yourMeetingInstance, + onMeetingJoined: () { + // Handle successful join + }, + height: 50.0, + width: 200.0, + isDisabled: false, +) +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-leave-button.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-leave-button.mdx new file mode 100644 index 000000000000000..c22d1c303fb15e9 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-leave-button.mdx @@ -0,0 +1,41 @@ +--- +pcx_content_type: navigation +title: RtkLeaveButton +description: API reference for RtkLeaveButton component (Flutter Library) +--- + +A button widget for leaving a RealtimeKit meeting. Displays a confirmation dialog to prevent accidental meeting exits. + +## Properties + +| Property | Type | Required | Default | Description | +| ----------------------- | ------------------- | -------- | -------------------- | ------------------------------- | +| `meeting` | `RealtimekitClient` | ✅ | - | Meeting client instance | +| `individualDesignToken` | `RtkDesignTokens?` | ❌ | Global design tokens | Design tokens for customization | +| `height` | `double?` | ❌ | - | Height of the button | +| `width` | `double?` | ❌ | - | Width of the button | + +## Usage Examples + +### Basic Usage + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkLeaveButton( + meeting: yourMeetingInstance, +) +``` + +### With Properties + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkLeaveButton( + meeting: yourMeetingInstance, + individualDesignToken: yourDesignToken, + height: 50.0, + width: 50.0, +) +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-leave-meeting-dialog.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-leave-meeting-dialog.mdx new file mode 100644 index 000000000000000..cbf9a69e2db1b35 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-leave-meeting-dialog.mdx @@ -0,0 +1,37 @@ +--- +pcx_content_type: navigation +title: RtkLeaveMeetingDialog +description: API reference for RtkLeaveMeetingDialog component (Flutter Library) +--- + +A dialog widget for confirming the action of leaving a RealtimeKit meeting. Provides a prompt with cancel and leave options, and displays an additional end-meeting option for hosts. + +## Properties + +| Property | Type | Required | Default | Description | +| ------------- | ------------------- | -------- | -------------------- | ------------------------------- | +| `meeting` | `RealtimekitClient` | ✅ | - | Meeting client instance | +| `designToken` | `RtkDesignTokens?` | ❌ | Global design tokens | Design tokens for customization | + +## Usage Examples + +### Basic Usage + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkLeaveMeetingDialog( + meeting: yourMeetingInstance, +) +``` + +### With Properties + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkLeaveMeetingDialog( + meeting: yourMeetingInstance, + designToken: yourDesignToken, +) +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-meeting-title.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-meeting-title.mdx new file mode 100644 index 000000000000000..f5bc7dd317c7bb0 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-meeting-title.mdx @@ -0,0 +1,37 @@ +--- +pcx_content_type: navigation +title: RtkMeetingTitle +description: API reference for RtkMeetingTitle component (Flutter Library) +--- + +A widget that displays the title of a RealtimeKit meeting. Integrates with the RealtimeKit design system for consistent styling. + +## Properties + +| Property | Type | Required | Default | Description | +| ----------------------- | ------------------- | -------- | -------------------- | ------------------------------- | +| `meeting` | `RealtimekitClient` | ✅ | - | Meeting client instance | +| `individualDesignToken` | `RtkDesignTokens?` | ❌ | Global design tokens | Design tokens for customization | + +## Usage Examples + +### Basic Usage + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkMeetingTitle( + meeting: yourMeetingInstance, +) +``` + +### With Properties + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkMeetingTitle( + meeting: yourMeetingInstance, + individualDesignToken: yourDesignToken, +) +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-name-tag-widget.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-name-tag-widget.mdx new file mode 100644 index 000000000000000..1d36d8a425b3530 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-name-tag-widget.mdx @@ -0,0 +1,47 @@ +--- +pcx_content_type: navigation +title: RtkNameTag +description: API reference for RtkNameTag component (Flutter Library) +--- + +A widget that displays the name tag of a participant within a participant tile. + +:::note +[`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree. +::: + +## Properties + +| Property | Type | Required | Default | Description | +| ------------- | ----------------------- | -------- | ------- | ------------------------------------------- | +| `participant` | `RtkMeetingParticipant` | ✅ | - | The participant whose name to display | +| `size` | `double` | ✅ | - | Size constraint for the name tag | +| `color` | `Color` | ✅ | - | Color of the name tag text | +| `factor` | `double` | ❌ | `7` | Font size factor (fontSize = size / factor) | + +## Usage Examples + +### Basic Usage + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkNameTag( + participant: participant, + size: 14.0, + color: Colors.white, +) +``` + +### With Properties + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkNameTag( + participant: participant, + size: 20.0, + color: Colors.white, + factor: 5, +) +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-participant-tile.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-participant-tile.mdx new file mode 100644 index 000000000000000..bcec999d318d29b --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-participant-tile.mdx @@ -0,0 +1,49 @@ +--- +pcx_content_type: navigation +title: RtkParticipantTile +description: API reference for RtkParticipantTile component (Flutter Library) +--- + +A widget that displays a participant's video or avatar within a meeting environment. Automatically shows the video feed when available and falls back to the participant's avatar. + +:::note +[`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree. +::: + +## Properties + +| Property | Type | Required | Default | Description | +| ------------- | ----------------------- | -------- | -------------------- | ------------------------------------------------- | +| `participant` | `RtkMeetingParticipant` | ✅ | - | The participant to display (positional parameter) | +| `designToken` | `RtkDesignTokens?` | ❌ | Global design tokens | Design tokens for customization | +| `height` | `double` | ❌ | `240` | Height of the tile | +| `width` | `double` | ❌ | `180` | Width of the tile | + +:::note +The `participant` parameter is positional. Pass it without a named argument: `RtkParticipantTile(participant)`. +::: + +## Usage Examples + +### Basic Usage + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkParticipantTile( + participant, +) +``` + +### With Properties + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkParticipantTile( + participant, + designToken: yourDesignToken, + height: 300, + width: 200, +) +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-participants-icon-widget.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-participants-icon-widget.mdx new file mode 100644 index 000000000000000..48147e8463e47b3 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-participants-icon-widget.mdx @@ -0,0 +1,25 @@ +--- +pcx_content_type: navigation +title: RtkParticipantsIconWidget +description: API reference for RtkParticipantsIconWidget component (Flutter Library) +--- + +A widget that displays a participants icon and navigates to the participants list when pressed. + +:::note +[`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree. +::: + +## Properties + +This component does not accept any properties. It uses the `RealtimekitClient` from the nearest [`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) ancestor. + +## Usage Examples + +### Basic Usage + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkParticipantsIconWidget() +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-plugins-screen.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-plugins-screen.mdx new file mode 100644 index 000000000000000..c64eb2bbfe930af --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-plugins-screen.mdx @@ -0,0 +1,29 @@ +--- +pcx_content_type: navigation +title: RtkPluginsScreen +description: API reference for RtkPluginsScreen component (Flutter Library) +--- + +A pre-built plugins screen that lists available plugins with the ability to turn them on or off. + +:::note +[`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree. +::: + +:::caution +`RtkPluginsScreen` is not exported from the barrel file. Use a direct import path instead of the standard `realtimekit_ui.dart` import. +::: + +## Properties + +This component does not accept any properties. It uses the `RealtimekitClient` from the nearest [`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) ancestor. + +## Usage Examples + +### Basic Usage + +```dart +import 'package:realtimekit_ui/src/pages/plugins/plugin_page.dart'; + +RtkPluginsScreen() +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-polls-screen.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-polls-screen.mdx new file mode 100644 index 000000000000000..fd181e481bcbdd4 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-polls-screen.mdx @@ -0,0 +1,25 @@ +--- +pcx_content_type: navigation +title: RtkPollsScreen +description: API reference for RtkPollsScreen component (Flutter Library) +--- + +A pre-built polls screen for displaying and interacting with meeting polls. + +:::note +[`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree. +::: + +## Properties + +This component does not accept any properties. It uses the `RealtimekitClient` from the nearest [`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) ancestor. + +## Usage Examples + +### Basic Usage + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkPollsScreen() +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider.mdx new file mode 100644 index 000000000000000..c67a5642ac8b37a --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider.mdx @@ -0,0 +1,60 @@ +--- +pcx_content_type: navigation +title: RtkProvider +description: API reference for RtkProvider component (Flutter Library) +--- + +A foundational widget that initializes and provides the RealtimeKit environment for a Flutter application. `RtkProvider` acts as a context wrapper that sets up design tokens, client configurations, and UI Kit information required by RealtimeKit components. + +## Properties + +| Property | Type | Required | Default | Description | +| ----------- | ------------------------- | -------- | ------- | ----------------------------------------------------------------- | +| `child` | `Widget` | ✅ | - | The widget below this widget in the tree | +| `meeting` | `RealtimekitClient` | ✅ | - | Meeting client instance | +| `uiKitInfo` | `RealtimeKitUIInfo` | ✅ | - | UI Kit configuration info including design tokens and UI settings | +| `observers` | `List?` | ❌ | `null` | Riverpod provider observers for debugging | + +## Usage Examples + +### Basic Usage + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkProvider( + meeting: yourMeetingInstance, + uiKitInfo: yourUiKitInfo, + child: MaterialApp( + home: YourAppHome(), + ), +) +``` + +### With Properties + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return RtkProvider( + meeting: RealtimekitClient( + // Client configuration + ), + uiKitInfo: RealtimeKitUIInfo( + // UI Kit information and design tokens + ), + observers: [MyProviderObserver()], + child: MaterialApp( + home: HomeScreen(), + ), + ); + } +} +``` + +:::note +You do not need to wrap the root of your application inside `RtkProvider`. You can wrap a specific subtree where you use RealtimeKit components. A `MaterialApp` widget must exist below `RtkProvider` in the widget tree. +::: diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-self-audio-toggle.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-self-audio-toggle.mdx new file mode 100644 index 000000000000000..0e75f8c76a34506 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-self-audio-toggle.mdx @@ -0,0 +1,50 @@ +--- +pcx_content_type: navigation +title: RtkSelfAudioToggleButton +description: API reference for RtkSelfAudioToggleButton component (Flutter Library) +--- + +A toggle button widget for controlling microphone audio state during a meeting. Allows users to mute or unmute their microphone. + +:::note +[`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree. +::: + +## Properties + +| Property | Type | Required | Default | Description | +| ----------------------- | ------------------- | -------- | -------------------- | -------------------------------------- | +| `meeting` | `RealtimekitClient` | ✅ | - | Meeting client instance | +| `individualDesignToken` | `RtkDesignTokens?` | ❌ | Global design tokens | Design tokens for customization | +| `onAudioToggle` | `VoidCallback?` | ❌ | - | Callback invoked when audio is toggled | +| `iconSize` | `double?` | ❌ | - | Size of the icon | +| `iconColor` | `Color?` | ❌ | - | Color of the icon | +| `showLabel` | `bool` | ❌ | `false` | Whether to show label text | + +## Usage Examples + +### Basic Usage + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkSelfAudioToggleButton( + meeting: yourMeetingInstance, +) +``` + +### With Properties + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkSelfAudioToggleButton( + meeting: yourMeetingInstance, + onAudioToggle: () { + // Handle audio toggle + }, + iconSize: 24.0, + iconColor: Colors.blue, + showLabel: true, +) +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-self-video-toggle.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-self-video-toggle.mdx new file mode 100644 index 000000000000000..b1452ea9de1f955 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-self-video-toggle.mdx @@ -0,0 +1,50 @@ +--- +pcx_content_type: navigation +title: RtkSelfVideoToggleButton +description: API reference for RtkSelfVideoToggleButton component (Flutter Library) +--- + +A toggle button widget for controlling video state during a meeting. Allows users to turn their video on or off. + +:::note +[`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree. +::: + +## Properties + +| Property | Type | Required | Default | Description | +| ----------------------- | ------------------- | -------- | -------------------- | -------------------------------------- | +| `meeting` | `RealtimekitClient` | ✅ | - | Meeting client instance | +| `individualDesignToken` | `RtkDesignTokens?` | ❌ | Global design tokens | Design tokens for customization | +| `onVideoToggle` | `VoidCallback?` | ❌ | - | Callback invoked when video is toggled | +| `iconSize` | `double?` | ❌ | - | Size of the icon | +| `iconColor` | `Color?` | ❌ | - | Color of the icon | +| `showLabel` | `bool` | ❌ | `false` | Whether to show label text | + +## Usage Examples + +### Basic Usage + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkSelfVideoToggleButton( + meeting: yourMeetingInstance, +) +``` + +### With Properties + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkSelfVideoToggleButton( + meeting: yourMeetingInstance, + onVideoToggle: () { + // Handle video toggle + }, + iconSize: 24.0, + iconColor: Colors.red, + showLabel: true, +) +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-setup-screen-component.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-setup-screen-component.mdx new file mode 100644 index 000000000000000..0120cb8fa3639d9 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-setup-screen-component.mdx @@ -0,0 +1,49 @@ +--- +pcx_content_type: navigation +title: RtkSetupScreen +description: API reference for RtkSetupScreen component (Flutter Library) +--- + +A pre-built setup screen shown before joining a meeting. Allows users to edit their display name and configure media settings. + +:::note +[`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree. +::: + +## Properties + +| Property | Type | Required | Default | Description | +| --------------------- | -------------- | -------- | ------- | ------------------------------------------------------ | +| `selectedAudioDevice` | `AudioDevice?` | ✅ | - | Currently selected audio device (positional parameter) | +| `selectedVideoDevice` | `VideoDevice?` | ✅ | - | Currently selected video device (positional parameter) | + +:::note +Both parameters are positional. Pass them without named arguments. +::: + +## Usage Examples + +### Basic Usage + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkSetupScreen( + selectedAudioDevice, + selectedVideoDevice, +) +``` + +### With Properties + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +final selectedAudioDevice = meeting.getSelectedAudioDevice(); +final selectedVideoDevice = meeting.getSelectedVideoDevice(); + +RtkSetupScreen( + selectedAudioDevice, + selectedVideoDevice, +) +``` From a36a4fde4ee63dc0c4eb98a39b357e24aea25b0f Mon Sep 17 00:00:00 2001 From: Aman Kumar Date: Wed, 8 Apr 2026 13:00:42 +0530 Subject: [PATCH 2/2] feat(realtimekit): add exportable components for plugin icon and polls icon --- .../flutter/rtk-plugin-icon-widget.mdx | 25 +++++++++++++++++++ .../flutter/rtk-polls-icon-widget.mdx | 25 +++++++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-plugin-icon-widget.mdx create mode 100644 src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-polls-icon-widget.mdx diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-plugin-icon-widget.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-plugin-icon-widget.mdx new file mode 100644 index 000000000000000..8ffc5b421c00078 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-plugin-icon-widget.mdx @@ -0,0 +1,25 @@ +--- +pcx_content_type: navigation +title: RtkPluginIconWidget +description: API reference for RtkPluginIconWidget component (Flutter Library) +--- + +A widget that displays a plugins icon and navigates to the plugins list when pressed. + +:::note +[`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree. +::: + +## Properties + +This component does not accept any properties. It uses the `RealtimekitClient` from the nearest [`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) ancestor. + +## Usage Examples + +### Basic Usage + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkPluginIconWidget() +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-polls-icon-widget.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-polls-icon-widget.mdx new file mode 100644 index 000000000000000..74a4b1f00e95a9d --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-polls-icon-widget.mdx @@ -0,0 +1,25 @@ +--- +pcx_content_type: navigation +title: RtkPollsIconWidget +description: API reference for RtkPollsIconWidget component (Flutter Library) +--- + +A widget that displays a polls icon and navigates to the polls list when pressed. + +:::note +[`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree. +::: + +## Properties + +This component does not accept any properties. It uses the `RealtimekitClient` from the nearest [`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) ancestor. + +## Usage Examples + +### Basic Usage + +```dart +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +RtkPollsIconWidget() +```