https://github.com/livekit/components-flutter
Official open source Flutter Widgets and examples for building with LiveKit.
https://github.com/livekit/components-flutter
Last synced: 11 months ago
JSON representation
Official open source Flutter Widgets and examples for building with LiveKit.
- Host: GitHub
- URL: https://github.com/livekit/components-flutter
- Owner: livekit
- License: apache-2.0
- Created: 2023-04-11T02:10:19.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-06-29T09:43:01.000Z (12 months ago)
- Last Synced: 2025-06-29T10:31:52.943Z (12 months ago)
- Language: Dart
- Homepage:
- Size: 1.47 MB
- Stars: 17
- Watchers: 19
- Forks: 12
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](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 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](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.0.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: [
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.
LiveKit Ecosystem
LiveKit SDKsBrowser · iOS/macOS/visionOS · Android · Flutter · React Native · Rust · Node.js · Python · Unity · Unity (WebGL) · ESP32
Server APIsNode.js · Golang · Ruby · Java/Kotlin · Python · Rust · PHP (community) · .NET (community)
UI ComponentsReact · Android Compose · SwiftUI · Flutter
Agents FrameworksPython · Node.js · Playground
ServicesLiveKit server · Egress · Ingress · SIP
ResourcesDocs · Example apps · Cloud · Self-hosting · CLI