Skip to main content
Choose how participants are displayed during a call. The SDK provides multiple layout options to suit different use cases like team meetings, presentations, or one-on-one calls.

​
Available Layouts

LayoutDescriptionBest For
tileGrid layout with equally-sized tiles for all participantsTeam meetings, group discussions
spotlightLarge view for the other participant, small tile for yourselfOne-on-one calls, presentations, webinars
sidebarMain speaker with participants in a sidebarInterviews, panel discussions

​
Set Initial Layout

Configure the layout when joining a session using SessionSettingsBuilder: 
SessionSettings sessionSettings = CometChatCalls.SessionSettingsBuilder()
    .setLayout(LayoutType.tile)
    .build();

CometChatCalls.joinSession(
  sessionId: sessionId,
  sessionSettings: sessionSettings,
  onSuccess: (Widget? callWidget) {
    debugPrint("Joined with TILE layout");
    // Place callWidget in your widget tree
  },
  onError: (CometChatCallsException e) {
    debugPrint("Failed: ${e.message}");
  },
);

​
Change Layout During Call

Switch layouts dynamically during an active call using setLayout(): 
CallSession? callSession = CallSession.getInstance();

// Switch to Spotlight layout
await callSession?.setLayout(LayoutType.spotlight);

// Switch to Tile layout
await callSession?.setLayout(LayoutType.tile);

// Switch to Sidebar layout
await callSession?.setLayout(LayoutType.sidebar);
Each participant can choose their own layout independently. Changing your layout does not affect other participants.

​
Listen for Layout Changes

Monitor layout changes using LayoutListener: 
CallSession? callSession = CallSession.getInstance();

callSession?.layoutListener = LayoutListener(
  onCallLayoutChanged: (LayoutType layoutType) {
    switch (layoutType) {
      case LayoutType.tile:
        debugPrint("Switched to Tile layout");
        break;
      case LayoutType.spotlight:
        debugPrint("Switched to Spotlight layout");
        break;
      case LayoutType.sidebar:
        debugPrint("Switched to Sidebar layout");
        break;
    }
    // Update layout toggle button icon
    updateLayoutIcon(layoutType);
  },
  onParticipantListVisible: () {},
  onParticipantListHidden: () {},
  onPictureInPictureLayoutEnabled: () {},
  onPictureInPictureLayoutDisabled: () {},
);
Flutter listeners are not lifecycle-aware. You must manually remove the layout listener in your widget’s dispose() method to prevent memory leaks:
CallSession.getInstance()?.layoutListener = null;

​
Hide Layout Toggle Button

To prevent users from changing the layout, hide the layout toggle button in the call UI: 
SessionSettings sessionSettings = CometChatCalls.SessionSettingsBuilder()
    .setLayout(LayoutType.spotlight) // Fixed layout
    .hideChangeLayoutButton(true)    // Hide toggle button
    .build();