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 SIGNALLING_ONLY

info

Important Changes Flutter SDK in Version v1.3.0

• The following modes have been deprecated:
• CONFERENCE has been replaced by SEND_AND_RECV
• VIEWER has been replaced by SIGNALLING_ONLY

Please update your implementation to use the new modes.

⚠️ Compatibility Notice:
To ensure a seamless meeting experience, all participants must use the same SDK version.
Do not mix version v1.3.0 + with older versions, as it may cause significant conflicts.

Step 1: We will get the participants from the Room object. and filter the SIGNALLING_ONLY 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.SIGNALLING_ONLY);
    attendees.putIfAbsent(
        room.localParticipant.id, () => room.localParticipant);
    room.participants.values.forEach((participant) {
      if (participant.mode == Mode.SIGNALLING_ONLY) {
        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 SIGNALLING_ONLY 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.SIGNALLING_ONLY) {
        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