GitHub - livekit/components-flutter: Official open source Flutter Widgets and examples for building with LiveKit.

The LiveKit icon, the name of the repository and some sample code in the background.

Use this SDK to add realtime video, audio and data features to your Flutter app. By connecting to LiveKit 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.

Introduction

LiveKit component state management is based on provider, please refer to the flowchart for the widgets rendering tree.

Installation

Add the following to your pubspec.yaml:

dependencies:
  livekit_components: ^1.3.0

Then run flutter pub get.

and follow this docs to configure your project for iOS and Android.

Usage

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

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 folder.

Session UI (Agents)

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

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.

LiveKit Ecosystem
LiveKit SDKs	Browser · iOS/macOS/visionOS · Android · Flutter · React Native · Rust · Node.js · Python · Unity · Unity (WebGL) · ESP32
Server APIs	Node.js · Golang · Ruby · Java/Kotlin · Python · Rust · PHP (community) · .NET (community)
UI Components	React · Android Compose · SwiftUI · Flutter
Agents Frameworks	Python · Node.js · Playground
Services	LiveKit server · Egress · Ingress · SIP
Resources	Docs · Example apps · Cloud · Self-hosting · CLI