Display Attendees Count - Flutter

In this guide, we will see how you can display the number of attendees in realtime.

note

Before going forward in this guide, do make sure all the attendees join the meeting with mode as VIEWER

Step 1: We will get the participants from the Room object. and filter the VIEWER participants from it. We will also added the participantJoined, participantLeft and participantModeChanged listerners to keep the list of attendees updated.

import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';

class ViewerScreen extends StatefulWidget {
  ...
}

class _ViewerScreenState extends State<ViewerScreen> {
  late Room room;

  Map<String, Participant> _attendees = {};

  @override
  void initState() {
    ...

    updateAttendees();

    setupRoomEventListener();
  }

  @override
  Widget build(BuildContext context) {
    return YourMeetingWidget();
  }

  void updateAttendees(){
    Map<String, Participant> attendees = {};
    if(room.localParticipant.mode == Mode.VIEWER);
    attendees.putIfAbsent(
        room.localParticipant.id, () => room.localParticipant);
    room.participants.values.forEach((participant) {
      if (participant.mode == Mode.VIEWER) {
        attendees.putIfAbsent(participant.id, () => participant);
      }
    });
    setState(()=>_attendees = attendees);
  }

  void setupRoomEventListener() {
    room.on(Events.roomJoined, () {
      updateAttendees();
    });

    room.on(Events.participantModeChanged, (Map<String, dynamic> data){
      updateAttendees()
    });

    room.on(Events.participantJoined, (Participant participant) {
      updateAttendees();
    });


    room.on(Events.participantLeft, (String participantId) {
      updateAttendees();
    });
  }
}

Step 2: With all the participants, we will filter out participants who have joined as a VIEWER and then display that count.

import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';

class ViewerScreen extends StatefulWidget {
  ...
}

class _ViewerScreenState extends State<ViewerScreen> {
  late Room room;

  Map<String, Participant> attendees = {};

  @override
  void initState() {
    ...

    attendees.putIfAbsent(
        room.localParticipant.id, () => room.localParticipant);
    room.participants.values.forEach((participant) {
      if (participant.mode == Mode.VIEWER) {
        attendees.putIfAbsent(participant.id, () => participant);
      }
    });

    setupRoomEventListener();
  }

  //higlight-start
  @override
  Widget build(BuildContext context) {
    return Text("Total attendees :: ${attendees.length}");
  }
  //higlight-end

  void setupRoomEventListener() {
    ...
  }
}

API Reference

The API references for all the methods utilized in this guide are provided below.

• participants