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';
voidmain() {
runApp(constMyApp());
}
classMyAppextendsStatelessWidget {
constMyApp({super.key});
@overrideWidgetbuild(BuildContext context) {
returnLivekitRoom(
roomContext:RoomContext(
url:'your room url',
token:'your room token',
connect:true,
),
builder: (context, roomCtx) {
returnMaterialApp(
theme:LiveKitTheme().buildThemeData(context),
home:Scaffold(
appBar:AppBar(
title:constText('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:constGridLayoutBuilder(),
/// 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-L168returnconstParticipantTileWidget();
},
),
),
/// show control bar at the bottomconstControlBar(),
],
),
),
),
);
},
);
}
}

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';
classAgentChatViewextendsStatefulWidget {
constAgentChatView({super.key});
@overrideState<AgentChatView> createState() =>_AgentChatViewState();
}
class_AgentChatViewStateextendsState<AgentChatView> {
latefinalSession _session;
@overridevoidinitState() {
super.initState();
_session =Session.withAgent(
'my-agent',
tokenSource:EndpointTokenSource(
url:Uri.parse('https://your-token-endpoint'),
),
options:constSessionOptions(preConnectAudio:true),
);
unawaited(_session.start()); // start connecting the agent session
}
@overridevoiddispose() {
_session.dispose(); // ends the session and cleans up listenerssuper.dispose();
}
@overrideWidgetbuild(BuildContext context) {
returnSessionContext(
session: _session,
child:ChatScrollView(
padding:constEdgeInsets.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
Agents SDKs	Python · Node.js
LiveKit SDKs	Browser · Swift · Android · Flutter · React Native · Rust · Node.js · Python · Unity · Unity (WebGL) · ESP32 · C++
Starter Apps	Python Agent · TypeScript Agent · React App · SwiftUI App · Android App · Flutter App · React Native App · Web Embed
UI Components	React · Android Compose · SwiftUI · Flutter
Server APIs	Node.js · Golang · Ruby · Java/Kotlin · Python · Rust · PHP (community) · .NET (community)
Resources	Docs · Docs MCP Server · CLI · LiveKit Cloud
LiveKit Server OSS	LiveKit server · Egress · Ingress · SIP
Community	Developer Community · Slack · X · YouTube