Handling events¶

const Stage = () => {
const tracks = useTracks([Track.Source.Camera, Track.Source.ScreenShare]);
return (
    <LiveKitRoom
    {/* ... */}
    >
    // Render all video
    {tracks.map((track) => {
        <VideoTrack trackRef={track} />;
    })}
    // ...and all audio tracks.
    <RoomAudioRenderer />
    </LiveKitRoom>
);
};

function ParticipantList() {
// Render a list of all participants in the room.
const participants = useParticipants();
<ParticipantLoop participants={participants}>
    <ParticipantName />
</ParticipantLoop>;
}

struct MyChatView: View {
    var body: some View {
        RoomScope(url: /* URL */,
                token: /* Token */,
                connect: true,
                enableCamera: true,
                enableMicrophone: true) {
            VStack {
                ForEachParticipant { _ in
                    VStack {
                        ForEachTrack(filter: .video) { _ in
                            MyVideoView()
                                .frame(width: 100, height: 100)
                        }
                    }
                }
            }
        }
    }
}

struct MyVideoView: View {
@EnvironmentObject private var trackReference: TrackReference

var body: some View {
    VideoTrackView(trackReference: trackReference)
        .frame(width: 100, height: 100)
}
}

@Composable
fun Content(
room: Room
) {
val remoteParticipants by room::remoteParticipants.flow.collectAsState(emptyMap())
val remoteParticipantsList = remoteParticipants.values.toList()
LazyRow {
    items(
        count = remoteParticipantsList.size,
        key = { index -> remoteParticipantsList[index].sid }
    ) { index ->
        ParticipantItem(room = room, participant = remoteParticipantsList[index])
    }
}
}

@Composable
fun ParticipantItem(
    room: Room,
    participant: Participant,
) {
val videoTracks by participant::videoTracks.flow.collectAsState(emptyList())
val subscribedTrack = videoTracks.firstOrNull { (pub) -> pub.subscribed } ?: return
val videoTrack = subscribedTrack.second as? VideoTrack ?: return

VideoTrackView(
    room = room,
    videoTrack = videoTrack,
)
}

class RoomWidget extends StatefulWidget {
final Room room;

RoomWidget(this.room);

@override
State<StatefulWidget> createState() {
    return _RoomState();
}
}

class _RoomState extends State<RoomWidget> {
late final EventsListener<RoomEvent> _listener = widget.room.createListener();

@override
void initState() {
    super.initState();
    // used for generic change updates
    widget.room.addListener(_onChange);

    // Used for specific events
    _listener
    ..on<RoomDisconnectedEvent>((_) {
        // handle disconnect
    })
    ..on<ParticipantConnectedEvent>((e) {
        print("participant joined: ${e.participant.identity}");
    })
}

@override
void dispose() {
    // Be sure to dispose listener to stop listening to further updates
    _listener.dispose();
    widget.room.removeListener(_onChange);
    super.dispose();
}

void _onChange() {
    // Perform computations and then call setState
    // setState will trigger a build
    setState(() {
    // your updates here
    });
}

@override
Widget build(BuildContext context) => Scaffold(
    // Builds a room layout with a main participant in the center, and a row of
    // participants at the bottom.
    // ParticipantWidget is located here: https://github.com/livekit/client-sdk-flutter/blob/main/example/lib/widgets/participant.dart
    body: Column(
    children: [
        Expanded(
            child: participants.isNotEmpty
                ? ParticipantWidget.widgetFor(participants.first)
                : Container()),
        SizedBox(
        height: 100,
        child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: math.max(0, participants.length - 1),
            itemBuilder: (BuildContext context, int index) => SizedBox(
            width: 100,
            height: 100,
            child: ParticipantWidget.widgetFor(participants[index + 1]),
            ),
        ),
        ),
    ],
    ),
);
}