Customize Flutter UI

You can customise different parts of the video UI by referring to the following examples:

Configure the Participant List

The participant list is used for customizing the content of the panel on which the Participant List is shown. Typically, the display of all action buttons against each participant name is configured using the participant list. For example, you can add a button named Disconnect to disconnect a specific participant or add a Chat button to initiate a private chat with a specific participant.

Depending on the user's role, (the user who sees the participant list), all or some of the added buttons are displayed. For example, the Disconnect button is displayed only for a moderator because only the moderator can forcibly remove a participant from a session.

Use the configureParticipantList() method to add different options for each participant in the participant list.

For example: var setting = EnxSetting.instance;

• If you want to show an option for each participant to disconnect the call, add:

setting.configureParticipantList(ParticipantListOption.disconnect);

• If you want to show a private chat option for each participant, add:

setting.configureParticipantList(ParticipantListOption.chat);

• If you want to create additional buttons that you want to use in your own style, use the createExtraButton() method. For example:

var setting = EnxSetting.instance; 
setting.createExtraButton([ 
	CustomMaterialButton( 
		onPressed: () async {
		}, 
		
		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)
		), 	) ]);

Customise Features

Enhance your video conferencing application by deciding which features are required. The provided APIs allow you to specify and customize essential video conferencing features like audio, video, and camera controls. EnableX provides powerful APIs to customize the required features in your Flutter UI kit:

Configure a list of required events by passing them as arguments.

Syntax

var setting = EnxSetting.instance;
Set<EnxRequiredEventsOption> enxRequired = <EnxRequiredEventsOption>{};
enxRequired.addAll([
  EnxRequiredEventsOption.audio,
  EnxRequiredEventsOption.video,
  EnxRequiredEventsOption.cameraSwitch,
  // ... add other options as needed
]);
setting.configureRequiredEventList(enxRequired);

Pre-Screening and Audio-Only Options

• Pre-Screening API: Opt-out of preview screens with isPreScreening(false).

• Audio-Only Call: Enable audio-only calls using isAudioOnlyCall(true).

Chat Page Management

• Close Chat Page: Use closeChatPage() to close the chat interface.

• Send User Data: Send custom data to users with sendUserData(EnxSendUserDataModel userDataModel) .

• Set Participant List: Manage participant lists using setParticipantList(List<UserModel> participantList).

• Get Participant List: Retrieve the list of current participants with getParticipantsList().

Room Mode and User Information

• Room Mode: Access room mode details using getRoomMode() .

• User Roles: Identify user roles (moderator/participant) with getCurrentRole() .

• User Awaiting: Check if users are awaiting access with GetisUserAwaited() .

Manage Send User Data over Session

• Implement an Observer to manage features like polling, QnA, and customized events.

• The onUserDataReceived(jsonObject: JSONObject) function allows handling of data sent by users during a session.

Monitoring Page Activities

• Use OnPageSlide to track the opening and closing of pages, providing valuable insights into user interactions and engagement.