RenderRequestComponent class

A stateless widget rendering a single participant permission request item.

Displays participant name, request type icon, and accept/reject action buttons. Handles real-time request responses via socket events and local state updates.

Rendering Structure:

Row
  ├─ Expanded (flex: 5) - Participant Name
  │  └─ Text (request.name)
  ├─ Expanded (flex: 2) - Request Type Icon
  │  └─ Icon (24px, _getIconData(request.icon))
  ├─ Expanded (flex: 2) - Accept Button
  │  └─ IconButton
  │     ├─ icon: Icons.check (green, 24px)
  │     └─ onPressed: handleRequestAction('accepted')
  ├─ Expanded (flex: 2) - Reject Button
  │  └─ IconButton
  │     ├─ icon: Icons.close (red, 24px)
  │     └─ onPressed: handleRequestAction('rejected')
  └─ Expanded (flex: 1) - Spacer

Icon Mapping (_getIconData):

  • "fa-microphone" → Icons.mic (audio request)
  • "fa-desktop" → Icons.desktop_windows (screenshare request)
  • "fa-video" → Icons.videocam (video request)
  • "fa-comments" → Icons.comment (chat request)
  • Default: Icons.error (unknown request type)

Request Flow:

  1. User clicks accept (✓) or reject (✕) button
  2. handleRequestAction('accepted'|'rejected') invoked
  3. Calls onRequestItemPress(RespondToRequestsOptions(...))
  4. Default handler respondToRequests:
    • Emits socket event: socket.emit('updateRequests', {action, requestId, roomName})
    • Removes request from local requestList
    • Invokes updateRequestList(filteredList) to update parent state
  5. RequestsModal re-renders with updated list

Common Use Cases:

  1. Microphone Request:

    RenderRequestComponent(
  options: RenderRequestComponentOptions(
    request: Request(
      id: 'mic_req_001',
      name: 'Bob Smith',
      icon: 'fa-microphone',
    ),
    requestList: allRequests,
    updateRequestList: (newList) => setState(() => requests = newList),
    roomName: parameters.roomName,
    socket: parameters.socket,
  ),
)
// Shows: "Bob Smith" | 🎤 | ✓ | ✕

  2. Screenshare Request:

    RenderRequestComponent(
  options: RenderRequestComponentOptions(
    request: Request(
      id: 'screen_req_002',
      name: 'Carol Davis',
      icon: 'fa-desktop',
    ),
    requestList: pendingRequests,
    updateRequestList: (list) {
      setState(() {
        pendingRequests = list;
        parameters.updateRequestList(list);
      });
    },
    roomName: 'webinar-room-123',
    socket: socketClient,
  ),
)
// Shows: "Carol Davis" | 🖥️ | ✓ | ✕

  3. Video Request (Custom Handler):

    RenderRequestComponent(
  options: RenderRequestComponentOptions(
    request: Request(
      id: 'video_req_003',
      name: 'David Lee',
      icon: 'fa-video',
    ),
    requestList: requestQueue,
    updateRequestList: (list) => updateQueue(list),
    roomName: conferenceRoomName,
    socket: conferenceSocket,
    onRequestItemPress: (options) {
      // Custom approval logic
      if (options.action == 'accepted') {
        logApproval(options.request);
        showNotification('${options.request.name} video approved');
      } else {
        logRejection(options.request);
      }
      // Emit socket event
      respondToRequests(options);
    },
  ),
)
// Shows: "David Lee" | 📹 | ✓ | ✕
// Adds custom logging and notifications before standard socket emit

  4. Chat Request:

    RenderRequestComponent(
  options: RenderRequestComponentOptions(
    request: Request(
      id: 'chat_req_004',
      name: 'Eva Martinez',
      icon: 'fa-comments',
    ),
    requestList: chatRequests,
    updateRequestList: (list) => setState(() => chatRequests = list),
    roomName: 'webinar-chat',
    socket: chatSocket,
  ),
)
// Shows: "Eva Martinez" | 💬 | ✓ | ✕

Action Handling:

  • Accept (✓): Calls handleRequestAction('accepted')

    • Emits: socket.emit('updateRequests', {action: 'accepted', ...})
    • Server grants permission (e.g., unmutes participant, allows video)
    • Removes request from local list

  • Reject (✕): Calls handleRequestAction('rejected')

    • Emits: socket.emit('updateRequests', {action: 'rejected', ...})
    • Server notifies participant of denial
    • Removes request from local list

State Management:

  • Request list filtering happens in respondToRequests: 
    final filteredList = requestList.where((r) => r.id != request.id).toList();
updateRequestList(filteredList);
  • Parent component (RequestsModal) manages master requestList state
  • updateRequestList callback synchronizes parent state after each action

Socket Event Payload:

{
  'action': 'accepted', // or 'rejected'
  'requestId': 'req123',
  'roomName': 'conference-room-456',
}

Flex Layout:

  • Name: 5 units (41.7% width)
  • Icon: 2 units (16.7% width)
  • Accept button: 2 units (16.7% width)
  • Reject button: 2 units (16.7% width)
  • Spacer: 1 unit (8.3% width)
  • Total: 12 units

Accessibility:

  • IconButton provides touch targets (min 48x48 logical pixels)
  • Green check and red X provide color-coded visual feedback
  • Participant name displayed as text label

Typical Usage Context:

  • RequestsModal list rendering
  • ListView.builder item renderer for requestList
  • Host/co-host permission management interface
Inheritance

Constructors

RenderRequestComponent({Key? key, required RenderRequestComponentOptions options})
const

Properties

hashCode → int
The hash code for this object.
no setterinherited
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
options → RenderRequestComponentOptions
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited

Methods

build(BuildContext context) → Widget
Describes the part of the user interface represented by this widget.
override
createElement() → StatelessElement
Creates a StatelessElement to manage this widget's location in the tree.
inherited
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
handleRequestAction(String action) → void
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited