Flutter Components

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