Flutter UI Kit — Customization

All UI Kit customization flows through a single singleton: EnxSetting.instance. Configure it before EnxVideoView mounts, and the widget will reflect your settings when it renders. You can control which toolbar buttons appear, how the participant list behaves, what join options are presented, and how to exchange data with other participants.

Start by obtaining the instance:

var setting = EnxSetting.instance;

The configureRequiredEventList method accepts a Set of EnxRequiredEventsOption values. Only the features in this set will appear in the toolbar. Omit any feature to hide it entirely from the UI — useful when you want a minimal call interface or when certain capabilities are not relevant to your use case.

Set<EnxRequiredEventsOption> features = {
  EnxRequiredEventsOption.audio,
  EnxRequiredEventsOption.video,
  EnxRequiredEventsOption.cameraSwitch,
  EnxRequiredEventsOption.screenShare,
  EnxRequiredEventsOption.recording,
  EnxRequiredEventsOption.groupChat,
  EnxRequiredEventsOption.disconnect,
  EnxRequiredEventsOption.annotation,
  EnxRequiredEventsOption.polling,
  EnxRequiredEventsOption.qna,
  EnxRequiredEventsOption.switchRole,
  EnxRequiredEventsOption.switchLayout,
  // Add or remove options to match your product requirements
};

setting.configureRequiredEventList(features);

Pre-join Preview Screen

By default the UI Kit shows a preview screen before the participant joins, allowing them to check camera and microphone. If your app handles this separately, you can skip it:

setting.isPreScreening(false); // Pass false to skip the preview screen

Audio-Only Mode

Enable audio-only mode to render a voice call interface without any video tiles. The camera is not activated and no video is sent or received:

setting.isAudioOnlyCall(true);

The participant list panel supports configurable action buttons that appear next to each participant's name. These give moderators (and optionally all participants) direct controls without navigating to a separate settings screen.

Add Standard Action Buttons

// Show a "Disconnect" button next to each participant (moderator only)
setting.configureParticipantList(ParticipantListOption.disconnect);

// Show a private "Chat" button next to each participant
setting.configureParticipantList(ParticipantListOption.chat);

Add a Custom Button

You can inject a fully custom Flutter widget as an action button in the participant list. This is useful for app-specific actions like viewing a participant's profile.

setting.createExtraButton([
  CustomMaterialButton(
    onPressed: () async {
      // Your custom action — e.g., open participant profile
    },
    child: Container(
      padding: const EdgeInsets.all(1.0),
      decoration: const BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.blue,
      ),
      child: const Icon(
        Icons.visibility,
        color: Colors.white,
        size: 20,
      ),
    ),
  )
]);

These methods let your app interact with the live session — send data to other participants, inspect the current participant list, and programmatically close UI panels.

Send Custom Data to Participants

Broadcast a custom payload to all participants in the room. Recipients receive it in the onUserDataReceived callback on EnxVideoView:

setting.sendUserData(EnxSendUserDataModel(/* your payload */));

Get the Participants List

Retrieve the current list of participants in the room:

setting.getParticipantsList();

Set Participant List from Your Data

Populate the participant list panel with data from your own user model:

setting.setParticipantList(List<UserModel> participantList);

Close the Chat Panel

Programmatically dismiss the chat panel — useful if your app detects a navigation event that should close all overlays:

setting.closeChatPage();

Query the current session state at any time:

setting.getRoomMode();       // Returns "group" or "lecture"
setting.getCurrentRole();   // Returns "moderator" or "participant"
setting.getisUserAwaited(); // Returns true if the user is waiting in the lobby

Track when in-call panels open or close by implementing the onPageSlide callback on EnxVideoView. The pageName identifies which panel changed state; isShow is true when the panel opened and false when it closed.

onPageSlide: (EnxPageSlideEventName pageName, bool isShow) {
  print('Panel: $pageName, visible: $isShow');
  // Example: pageName might be EnxPageSlideEventName.chat
  // Use this to pause/resume background tasks based on UI state
}