Skip to content

Commit 30bf34d

Browse files
thisisamankthisisamank
authored
[RealtimeKit] add exportable components (#29691)
* feat(realtimekit): add exportable components * feat(realtimekit): add exportable components for plugin icon and polls icon
1 parent 8bc2715 commit 30bf34d

18 files changed

Lines changed: 669 additions & 0 deletions

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/index.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
pcx_content_type: navigation
3+
title: Flutter
4+
description: Complete API reference for Flutter library components
5+
sidebar:
6+
group:
7+
hideIndex: true
8+
---

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-audio-indicator-icon-widget.mdx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkAudioIndicatorIconWidget
4+
description: API reference for RtkAudioIndicatorIconWidget component (Flutter Library)
5+
---
6+
7+
A widget that displays the audio status of a participant in a RealtimeKit meeting.
8+
9+
:::note
10+
[`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree.
11+
:::
12+
13+
## Properties
14+
15+
| Property | Type | Required | Default | Description |
16+
| ------------- | ----------------------- | -------- | ------- | --------------------------------------------- |
17+
| `participant` | `RtkMeetingParticipant` | ✅ | - | The participant whose audio status to display |
18+
| `iconSize` | `double?` | ❌ | `24` | Size of the audio indicator icon |
19+
20+
## Usage Examples
21+
22+
### Basic Usage
23+
24+
```dart
25+
import 'package:realtimekit_ui/realtimekit_ui.dart';
26+
27+
RtkAudioIndicatorIconWidget(
28+
participant: participant,
29+
)
30+
```
31+
32+
### With Properties
33+
34+
```dart
35+
import 'package:realtimekit_ui/realtimekit_ui.dart';
36+
37+
RtkAudioIndicatorIconWidget(
38+
participant: participant,
39+
iconSize: 32.0,
40+
)
41+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-chat-icon-widget.mdx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkChatIconWidget
4+
description: API reference for RtkChatIconWidget component (Flutter Library)
5+
---
6+
7+
A widget that displays a chat icon, navigates to the chat page when pressed, and marks all messages as read.
8+
9+
:::note
10+
[`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree.
11+
:::
12+
13+
## Properties
14+
15+
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.
16+
17+
## Usage Examples
18+
19+
### Basic Usage
20+
21+
```dart
22+
import 'package:realtimekit_ui/realtimekit_ui.dart';
23+
24+
RtkChatIconWidget()
25+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-join-button.mdx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkJoinButton
4+
description: API reference for RtkJoinButton component (Flutter Library)
5+
---
6+
7+
A button widget for joining a RealtimeKit meeting room. Provides visual feedback during the joining process.
8+
9+
## Properties
10+
11+
| Property | Type | Required | Default | Description |
12+
| ----------------- | ------------------- | -------- | -------------------- | ------------------------------------------- |
13+
| `meeting` | `RealtimekitClient` | ✅ | - | Meeting client instance |
14+
| `onMeetingJoined` | `VoidCallback?` | ❌ | - | Callback invoked when the meeting is joined |
15+
| `rtkDesignToken` | `RtkDesignTokens?` | ❌ | Global design tokens | Design tokens for customization |
16+
| `height` | `double?` | ❌ | - | Height of the button |
17+
| `width` | `double?` | ❌ | - | Width of the button |
18+
| `isDisabled` | `bool` | ❌ | `false` | Whether the button is disabled |
19+
20+
## Usage Examples
21+
22+
### Basic Usage
23+
24+
```dart
25+
import 'package:realtimekit_ui/realtimekit_ui.dart';
26+
27+
RtkJoinButton(
28+
meeting: yourMeetingInstance,
29+
)
30+
```
31+
32+
### With Properties
33+
34+
```dart
35+
import 'package:realtimekit_ui/realtimekit_ui.dart';
36+
37+
RtkJoinButton(
38+
meeting: yourMeetingInstance,
39+
onMeetingJoined: () {
40+
// Handle successful join
41+
},
42+
height: 50.0,
43+
width: 200.0,
44+
isDisabled: false,
45+
)
46+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-leave-button.mdx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkLeaveButton
4+
description: API reference for RtkLeaveButton component (Flutter Library)
5+
---
6+
7+
A button widget for leaving a RealtimeKit meeting. Displays a confirmation dialog to prevent accidental meeting exits.
8+
9+
## Properties
10+
11+
| Property | Type | Required | Default | Description |
12+
| ----------------------- | ------------------- | -------- | -------------------- | ------------------------------- |
13+
| `meeting` | `RealtimekitClient` | ✅ | - | Meeting client instance |
14+
| `individualDesignToken` | `RtkDesignTokens?` | ❌ | Global design tokens | Design tokens for customization |
15+
| `height` | `double?` | ❌ | - | Height of the button |
16+
| `width` | `double?` | ❌ | - | Width of the button |
17+
18+
## Usage Examples
19+
20+
### Basic Usage
21+
22+
```dart
23+
import 'package:realtimekit_ui/realtimekit_ui.dart';
24+
25+
RtkLeaveButton(
26+
meeting: yourMeetingInstance,
27+
)
28+
```
29+
30+
### With Properties
31+
32+
```dart
33+
import 'package:realtimekit_ui/realtimekit_ui.dart';
34+
35+
RtkLeaveButton(
36+
meeting: yourMeetingInstance,
37+
individualDesignToken: yourDesignToken,
38+
height: 50.0,
39+
width: 50.0,
40+
)
41+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-leave-meeting-dialog.mdx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkLeaveMeetingDialog
4+
description: API reference for RtkLeaveMeetingDialog component (Flutter Library)
5+
---
6+
7+
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.
8+
9+
## Properties
10+
11+
| Property | Type | Required | Default | Description |
12+
| ------------- | ------------------- | -------- | -------------------- | ------------------------------- |
13+
| `meeting` | `RealtimekitClient` | ✅ | - | Meeting client instance |
14+
| `designToken` | `RtkDesignTokens?` | ❌ | Global design tokens | Design tokens for customization |
15+
16+
## Usage Examples
17+
18+
### Basic Usage
19+
20+
```dart
21+
import 'package:realtimekit_ui/realtimekit_ui.dart';
22+
23+
RtkLeaveMeetingDialog(
24+
meeting: yourMeetingInstance,
25+
)
26+
```
27+
28+
### With Properties
29+
30+
```dart
31+
import 'package:realtimekit_ui/realtimekit_ui.dart';
32+
33+
RtkLeaveMeetingDialog(
34+
meeting: yourMeetingInstance,
35+
designToken: yourDesignToken,
36+
)
37+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-meeting-title.mdx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkMeetingTitle
4+
description: API reference for RtkMeetingTitle component (Flutter Library)
5+
---
6+
7+
A widget that displays the title of a RealtimeKit meeting. Integrates with the RealtimeKit design system for consistent styling.
8+
9+
## Properties
10+
11+
| Property | Type | Required | Default | Description |
12+
| ----------------------- | ------------------- | -------- | -------------------- | ------------------------------- |
13+
| `meeting` | `RealtimekitClient` | ✅ | - | Meeting client instance |
14+
| `individualDesignToken` | `RtkDesignTokens?` | ❌ | Global design tokens | Design tokens for customization |
15+
16+
## Usage Examples
17+
18+
### Basic Usage
19+
20+
```dart
21+
import 'package:realtimekit_ui/realtimekit_ui.dart';
22+
23+
RtkMeetingTitle(
24+
meeting: yourMeetingInstance,
25+
)
26+
```
27+
28+
### With Properties
29+
30+
```dart
31+
import 'package:realtimekit_ui/realtimekit_ui.dart';
32+
33+
RtkMeetingTitle(
34+
meeting: yourMeetingInstance,
35+
individualDesignToken: yourDesignToken,
36+
)
37+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-name-tag-widget.mdx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkNameTag
4+
description: API reference for RtkNameTag component (Flutter Library)
5+
---
6+
7+
A widget that displays the name tag of a participant within a participant tile.
8+
9+
:::note
10+
[`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree.
11+
:::
12+
13+
## Properties
14+
15+
| Property | Type | Required | Default | Description |
16+
| ------------- | ----------------------- | -------- | ------- | ------------------------------------------- |
17+
| `participant` | `RtkMeetingParticipant` | ✅ | - | The participant whose name to display |
18+
| `size` | `double` | ✅ | - | Size constraint for the name tag |
19+
| `color` | `Color` | ✅ | - | Color of the name tag text |
20+
| `factor` | `double` | ❌ | `7` | Font size factor (fontSize = size / factor) |
21+
22+
## Usage Examples
23+
24+
### Basic Usage
25+
26+
```dart
27+
import 'package:realtimekit_ui/realtimekit_ui.dart';
28+
29+
RtkNameTag(
30+
participant: participant,
31+
size: 14.0,
32+
color: Colors.white,
33+
)
34+
```
35+
36+
### With Properties
37+
38+
```dart
39+
import 'package:realtimekit_ui/realtimekit_ui.dart';
40+
41+
RtkNameTag(
42+
participant: participant,
43+
size: 20.0,
44+
color: Colors.white,
45+
factor: 5,
46+
)
47+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-participant-tile.mdx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkParticipantTile
4+
description: API reference for RtkParticipantTile component (Flutter Library)
5+
---
6+
7+
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.
8+
9+
:::note
10+
[`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree.
11+
:::
12+
13+
## Properties
14+
15+
| Property | Type | Required | Default | Description |
16+
| ------------- | ----------------------- | -------- | -------------------- | ------------------------------------------------- |
17+
| `participant` | `RtkMeetingParticipant` | ✅ | - | The participant to display (positional parameter) |
18+
| `designToken` | `RtkDesignTokens?` | ❌ | Global design tokens | Design tokens for customization |
19+
| `height` | `double` | ❌ | `240` | Height of the tile |
20+
| `width` | `double` | ❌ | `180` | Width of the tile |
21+
22+
:::note
23+
The `participant` parameter is positional. Pass it without a named argument: `RtkParticipantTile(participant)`.
24+
:::
25+
26+
## Usage Examples
27+
28+
### Basic Usage
29+
30+
```dart
31+
import 'package:realtimekit_ui/realtimekit_ui.dart';
32+
33+
RtkParticipantTile(
34+
participant,
35+
)
36+
```
37+
38+
### With Properties
39+
40+
```dart
41+
import 'package:realtimekit_ui/realtimekit_ui.dart';
42+
43+
RtkParticipantTile(
44+
participant,
45+
designToken: yourDesignToken,
46+
height: 300,
47+
width: 200,
48+
)
49+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-participants-icon-widget.mdx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkParticipantsIconWidget
4+
description: API reference for RtkParticipantsIconWidget component (Flutter Library)
5+
---
6+
7+
A widget that displays a participants icon and navigates to the participants list when pressed.
8+
9+
:::note
10+
[`RtkProvider`](/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree.
11+
:::
12+
13+
## Properties
14+
15+
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.
16+
17+
## Usage Examples
18+
19+
### Basic Usage
20+
21+
```dart
22+
import 'package:realtimekit_ui/realtimekit_ui.dart';
23+
24+
RtkParticipantsIconWidget()
25+
```

0 commit comments

Comments
 (0)