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 room 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.

• room.participants holds the remote participants only, so add room.localParticipant once the room is joined.
• participant.mode is already updated when participantModeChanged fires, so updateAttendees() reads it directly.

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

class ViewerScreen extends StatefulWidget {
  ...
}

class _ViewerScreenState extends State<ViewerScreen> {
  late Room room;
  bool _joined = false;

  Map<String, Participant> _attendees = {};

  @override
  void initState() {
    ...

    updateAttendees();

    setupRoomEventListener();
  }

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

  void updateAttendees(){
    Map<String, Participant> attendees = {};
    // room.participants holds remote participants only, so add yourself.
    final everyone = [
      if (_joined) room.localParticipant,
      ...room.participants.values,
    ];
    everyone.forEach((participant) {
      if (participant.mode == Mode.SIGNALLING_ONLY) {
        attendees.putIfAbsent(participant.id, () => participant);
      }
    });
    setState(()=>_attendees = attendees);
  }

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

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

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


    room.on(Events.participantLeft, (Participant participant, LeaveReason reason) {
      updateAttendees();
    });
  }
}

Step 2: With the SIGNALLING_ONLY participants filtered in updateAttendees(), we will display their count.

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

class ViewerScreen extends StatefulWidget {
  ...
}

class _ViewerScreenState extends State<ViewerScreen> {
  late Room room;
  bool _joined = false;

  Map<String, Participant> _attendees = {};

  @override
  void initState() {
    ...
  }

  @override
  Widget build(BuildContext context) {
    return Text("Total attendees :: ${_attendees.length}");
  }

  void updateAttendees(){
    ...
  }

  void setupRoomEventListener() {
    ...
  }
}

API Reference

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

• participants
• Events.participantModeChanged