components-flutter

KO | EN

gitlite — search

#javascript #hacktoberfest #typescript #go #golang #machine-learning #rust #docker #awesome #kubernetes #vue #awesome-list #pytorch #mcp

components-flutter

(★ 42)

Official open source Flutter Widgets and examples for building with LiveKit.

components-flutter Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![pub package](https://img.shields.io/pub/v/livekit_components?label=livekit_components&color=blue)](https://pub.dev/packages/livekit_components)

# Flutter Components

Use this SDK to add realtime video, audio and data features to your Flutter app. By connecting to <a href="https://livekit.io/">LiveKit</a> Cloud or a self-hosted server, you can quickly build applications such as multi-modal AI, live streaming, or video calls with just a few lines of code.

![LiveKit Components Preview](https://raw.githubusercontent.com/livekit/components-flutter/main/.github/assets/flutter-components-meet.jpg)

## Introduction

LiveKit component state management is based on [provider](https://pub.dev/packages/provider), please refer to the [flowchart](./flowchart.md) for the widgets rendering tree.

## Installation

Add the following to your `pubspec.yaml`:

```yaml
dependencies:
  livekit_components: ^1.3.0
```

Then run `flutter pub get`.

and follow this docs to configure your project for [iOS](https://github.com/livekit/client-sdk-flutter#ios) and [Android](https://github.com/livekit/client-sdk-flutter#android).

## Usage

Here is a simple example of how to use the components in your Flutter app:

```dart
import 'package:flutter/material.dart';
import 'package:livekit_components/livekit_components.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

@override
  Widget build(BuildContext context) {
    return LivekitRoom(
      roomContext: RoomContext(
        url: 'your room url',
        token: 'your room token',
        connect: true,
      ),
      builder: (context, roomCtx) {
        return MaterialApp(
          theme: LiveKitTheme().buildThemeData(context),
          home: Scaffold(
            appBar: AppBar(
              title: const Text('LiveKit Components Sample'),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Expanded(
                    /// show participant loop
                    child: ParticipantLoop(
                      showAudioTracks: false,
                      showVideoTracks: true,

/// layout builder
                      layoutBuilder: const GridLayoutBuilder(),

/// participant builder
                      participantBuilder: (context) {
                        /// build participant widget for each Track
                        /// return ParticipantTileWidget for each participant
                        /// you can customize the widget as you want, please refer to the example
                        /// https://github.com/livekit/components-flutter/blob/main/example/lib/main.dart#L130-L168
                        return const ParticipantTileWidget();
                      },
                    ),
                  ),

/// show control bar at the bottom
                  const ControlBar(),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}
```

## Example

You can find a complete example in the [example](./example) folder.

### Session UI (Agents)

Use the agent `Session` from `livekit_client` with `SessionContext` to make it
available to widgets like `ChatScrollView`:

```dart
import 'package:livekit_client/livekit_client.dart';
import 'package:livekit_components/livekit_components.dart';

class AgentChatView extends StatefulWidget {
  const AgentChatView({super.key});

@override
  State<AgentChatView> createState() => _AgentChatViewState();
}

class _AgentChatViewState extends State<AgentChatView> {
  late final Session _session;

@override
  void initState() {
    super.initState();
    _session = Session.withAgent(
      'my-agent',
      tokenSource: EndpointTokenSource(
        url: Uri.parse('https://your-token-endpoint'),
      ),
      options: const SessionOptions(preConnectAudio: true),
    );
    unawaited(_session.start()); // start connecting the agent session
  }

@override
  void dispose() {
    _session.dispose(); // ends the session and cleans up listeners
    super.dispose();
  }

@override
  Widget build(BuildContext context) {
    return SessionContext(
      session: _session,
      child: ChatScrollView(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
        messageBuilder: (context, message) => ListTile(
          title: Text(message.content.text),
          subtitle: Text(message.timestamp.toLocal().toIso8601String()),
        ),
      ),
    );
  }
}
```

- `ChatScrollView` auto-scrolls to the newest message (bottom). Pass a
  `ScrollController` if you need manual control.
- You can also pass `session:` directly to `ChatScrollView` instead of relying
  on `SessionContext`.

<br/><table>
<thead><tr><th colspan="2">LiveKit Ecosystem</th></tr></thead>
<tbody>
<tr><td>Agents SDKs</td><td><a href="https://github.com/livekit/agents">Python</a> · <a href="https://github.com/livekit/agents-js">Node.js</a></td></tr><tr></tr>
<tr><td>LiveKit SDKs</td><td><a href="https://github.com/livekit/client-sdk-js">Browser</a> · <a href="https://github.com/livekit/client-sdk-swift">Swift</a> · <a href="https://github.com/livekit/client-sdk-android">Android</a> · <a href="https://github.com/livekit/client-sdk-flutter">Flutter</a> · <a href="https://github.com/livekit/client-sdk-react-native">React Native</a> · <a href="https://github.com/livekit/rust-sdks">Rust</a> · <a href="https://github.com/livekit/node-sdks">Node.js</a> · <a href="https://github.com/livekit/python-sdks">Python</a> · <a href="https://github.com/livekit/client-sdk-unity">Unity</a> · <a href="https://github.com/livekit/client-sdk-unity-web">Unity (WebGL)</a> · <a href="https://github.com/livekit/client-sdk-esp32">ESP32</a> · <a href="https://github.com/livekit/client-sdk-cpp">C++</a></td></tr><tr></tr>
<tr><td>Starter Apps</td><td><a href="https://github.com/livekit-examples/agent-starter-python">Python Agent</a> · <a href="https://github.com/livekit-examples/agent-starter-node">TypeScript Agent</a> · <a href="https://github.com/livekit-examples/agent-starter-react">React App</a> · <a href="https://github.com/livekit-examples/agent-starter-swift">SwiftUI App</a> · <a href="https://github.com/livekit-examples/agent-starter-android">Android App</a> · <a href="https://github.com/livekit-examples/agent-starter-flutter">Flutter App</a> · <a href="https://github.com/livekit-examples/agent-starter-react-native">React Native App</a> · <a href="https://github.com/livekit-examples/agent-starter-embed">Web Embed</a></td></tr><tr></tr>
<tr><td>UI Components</td><td><a href="https://github.com/livekit/components-js">React</a> · <a href="https://github.com/livekit/components-android">Android Compose</a> · <a href="https://github.com/livekit/components-swift">SwiftUI</a> · <b>Flutter</b></td></tr><tr></tr>
<tr><td>Server APIs</td><td><a href="https://github.com/livekit/node-sdks">Node.js</a> · <a href="https://github.com/livekit/server-sdk-go">Golang</a> · <a href="https://github.com/livekit/server-sdk-ruby">Ruby</a> · <a href="https://github.com/livekit/server-sdk-kotlin">Java/Kotlin</a> · <a href="https://github.com/livekit/python-sdks">Python</a> · <a href="https://github.com/livekit/rust-sdks">Rust</a> · <a href="https://github.com/agence104/livekit-server-sdk-php">PHP (community)</a> · <a href="https://github.com/pabloFuente/livekit-server-sdk-dotnet">.NET (community)</a></td></tr><tr></tr>
<tr><td>Resources</td><td><a href="https://docs.livekit.io">Docs</a> · <a href="https://docs.livekit.io/mcp">Docs MCP Server</a> · <a href="https://github.com/livekit/livekit-cli">CLI</a> · <a href="https://cloud.livekit.io">LiveKit Cloud</a></td></tr><tr></tr>
<tr><td>LiveKit Server OSS</td><td><a href="https://github.com/livekit/livekit">LiveKit server</a> · <a href="https://github.com/livekit/egress">Egress</a> · <a href="https://github.com/livekit/ingress">Ingress</a> · <a href="https://github.com/livekit/sip">SIP</a></td></tr><tr></tr>
<tr><td>Community</td><td><a href="https://community.livekit.io">Developer Community</a> · <a href="https://livekit.io/join-slack">Slack</a> · <a href="https://x.com/livekit">X</a> · <a href="https://www.youtube.com/@livekit_io">YouTube</a></td></tr>
</tbody>
</table>

components-flutter

components-flutter Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

components-flutter

components-flutter Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README