Raise Hand - Flutter

Let us see, how we can use PubSub to implement Raise hand functionality. If you are not familiar with the PubSub mechanism you can follow this guide.

Implementing Raise Hand

1. We will be creating a button when clicked, we will publish a message it the topic RAISE_HAND. Do not persist it. A persisted message is delivered again to everyone who subscribes to the topic later, so a speaker who joins late would see every old raised hand.

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

class NotifyView extends StatefulWidget {
  final Room room;
  ...
}

class _NotifyViewState extends State<NotifyView> {

  final msgTextController = TextEditingController();


  @override
  void initState() {
    ...
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children:[
        ElevatedButton(
          onPressed: () async {
            try {
              await widget.room.pubSub.publish(
                "RAISE_HAND",
                "Raised Hand",
                const PubSubPublishOptions(persist: false),
              );
            } on VideoSDKError catch (error) {
              log("Could not raise hand: ${error.code} ${error.name}");
            }
          },
          child: const Text("Raise Hand"),
        ),
      ],
    );
  }

}

2. Now let us show an alert to all the speakers showing who raised the hand. Subscribe from the view that only speakers see, such as the ILSSpeakerView from Manage Roles. room.localParticipant.mode also tells you whether you are still a speaker, because it follows every mode change.

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

class SpeakerView extends StatefulWidget {
  final Room room;
  ...
}

class _SpeakerViewState extends State<SpeakerView> {
  // Keep the listener: unsubscribe() takes the same object
  late final PubSubMessageListener listener =
      PubSubMessageListener(onMessageReceived: messageHandler);

  @override
  void initState() {
    ...

    // Subscribing 'RAISE_HAND' Topic
    subscribeToRaisedHands();
  }

  Future<void> subscribeToRaisedHands() async {
    try {
      await widget.room.pubSub.subscribe("RAISE_HAND", listener);
    } on VideoSDKError catch (error) {
      log("Could not subscribe: ${error.code} ${error.name}");
    }
  }

  //Handler which will be called when new mesasge is
  //These is where we will show the message
  void messageHandler(PubSubMessage message) {
    if (mounted) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text(
          "${message.senderName} raised hand",
          overflow: TextOverflow.fade,
        ),
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children:[
        ...
      ]
    );
  }

  @override
  void dispose() {
    // Unsubscribe. The listener stops at once, even when this call fails
    // because the room has already left.
    widget.room.pubSub
        .unsubscribe("RAISE_HAND", listener)
        .catchError((Object error) {});
    super.dispose();
  }

}

API Reference

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

• PubSub