---
title: RtkProvider
description: API reference for RtkProvider component (Flutter Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

[Skip to content](#%5Ftop) 

# RtkProvider

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<ProviderObserver>? | ❌        | 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.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/flutter/","name":"Flutter"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/","name":"RtkProvider"}}]}
```