PaginationOptions class

Configuration options for the Pagination widget.

Defines pagination behavior for navigating between main room and breakout rooms in video conferencing. Supports role-based access control (host vs. participant), locked room indicators, and socket-based room switching with server synchronization.

Properties:

• totalPages: Total number of pages (0 = main room, 1+ = participant pages or breakout rooms)
• currentUserPage: Active page index (0-based)
• handlePageChange: Callback invoked when page changes (defaults to generatePageContent)
• position: Horizontal alignment of pagination within container ('left', 'middle', 'right'). Defaults to 'middle'
• location: Vertical position hint ('top', 'bottom'). Used for positioning context. Defaults to 'bottom'
• direction: Layout direction ('horizontal' for row, 'vertical' for column). Defaults to 'horizontal'
• buttonsContainerStyle: BoxConstraints for individual page buttons (e.g., BoxConstraints.tightFor(width: 60, height: 40))
• alternateIconComponent: Custom widget for alternate page indicator (currently unused in default implementation)
• iconComponent: Custom widget for page 0 home icon (overrides default star icon)
• activePageColor: Background color for selected page button (defaults to Color(0xFF2c678f) - blue)
• inactivePageColor: Background color for unselected page buttons (defaults to null = transparent)
• backgroundColor: Background color for entire pagination container (defaults to Color(0xFFFFFFFF) - white)
• paginationHeight: Maximum height (horizontal mode) or width (vertical mode) in pixels (defaults to 40.0)
• showAspect: Visibility flag (true = show pagination; false = hide). Defaults to true
• parameters: PaginationParameters providing room state, socket, user level, alerts (required)
• containerBuilder: Hook to wrap entire pagination container (receives listView, pages list)
• pageButtonBuilder: Hook to customize individual page button (receives page, isActive, isLocked, content, onSelect callback)
• pageContentBuilder: Hook to customize button content (receives page, isActive, isLocked, label, defaultContent)

Page Number Interpretation:

Page 0: Main room (always accessible, displayed as star icon)
Page 1 to mainRoomsLength-1: Regular participant pages (if mainRoomsLength > 1)
Page mainRoomsLength+: Breakout rooms (labeled "Room N", locked if not member)

Breakout Room Number = page - (mainRoomsLength - 1)

Locked Room Display Logic:

if (breakOutRoomStarted && !breakOutRoomEnded && page >= mainRoomsLength) {
  roomNumber = page - (mainRoomsLength - 1);
  if (memberRoom + 1 != roomNumber && islevel != '2') {
    label = "Room {roomNumber} 🔒"; // locked for non-host participants
    isLocked = true;
  } else {
    label = "Room {roomNumber}"; // unlocked (member or host)
  }
} else {
  label = page.toString(); // numeric label outside breakout session
}

Builder Hook Flow:

1. Determine page state (isActive, isHomePage, isLocked, displayLabel)
2. Create baseContent (star icon for page 0, Text for others)
3. pageContentBuilder?(baseContent) → resolvedContent
4. Wrap resolvedContent in GestureDetector + Container → defaultButton
5. pageButtonBuilder?(resolvedContent, defaultButton, onSelect) → final button
6. Build ListView with all page buttons
7. Wrap ListView in Container with styling
8. containerBuilder?(listView, defaultContainer) → final container
9. Wrap in Visibility(showAspect)

Common Configurations:

// 1. Basic horizontal pagination (5 pages)
PaginationOptions(
  totalPages: 5,
  currentUserPage: 0,
  parameters: parameters,
  activePageColor: Colors.blue,
  inactivePageColor: Colors.grey[300],
  backgroundColor: Colors.white,
)

// 2. Vertical sidebar pagination
PaginationOptions(
  totalPages: 10,
  currentUserPage: 2,
  direction: 'vertical',
  parameters: parameters,
  paginationHeight: 80, // width in vertical mode
  position: 'left',
)

// 3. Breakout room pagination (4 main rooms + 3 breakout rooms)
PaginationOptions(
  totalPages: 7, // 0 (main) + 1-3 (participants) + 4-6 (breakout rooms 1-3)
  currentUserPage: 0,
  parameters: parameters, // with mainRoomsLength=4, memberRoom=0, breakOutRoomStarted=true
  activePageColor: Colors.green,
  inactivePageColor: Colors.grey[200],
)
// Result: Page 0 = star, Page 1-3 = "1", "2", "3", Page 4-6 = "Room 1", "Room 2", "Room 3" (locked if not member)

// 4. Custom page button styling
PaginationOptions(
  totalPages: 5,
  currentUserPage: 1,
  parameters: parameters,
  buttonsContainerStyle: BoxConstraints.tightFor(width: 50, height: 50),
  pageButtonBuilder: (context) {
    return Container(
      margin: EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: context.isActive ? Colors.blue : Colors.white,
        shape: BoxShape.circle,
        border: Border.all(color: Colors.blue, width: 2),
        boxShadow: context.isActive
            ? [BoxShadow(color: Colors.blue.withOpacity(0.5), blurRadius: 8)]
            : [],
      ),
      child: Center(child: context.content),
    );
  },
)

Typical Use Cases:

• Video conference participant pagination
• Breakout room navigation with access control
• Multi-page gallery view
• Room-based content switching
• Host-controlled breakout session management