Flutter UI Kit — Implementation

After permissions are granted and a token is obtained from your server, adding a video call to your app is a two-step process: import the package, then place a single EnxVideoView widget in your widget tree. The kit renders the complete call UI — toolbar, video tiles, chat, and all configured panels — inside that widget.

Step 1 — Import the Package

At the top of the Dart file where you want to render the call:

import 'package:enx_uikit_flutter/enx_uikit_flutter.dart';

Step 2 — Add EnxVideoView to Your Widget Tree

EnxVideoView is the entry point to the entire UI Kit. Pass your room token and register callbacks to handle session lifecycle events. All parameters except token are optional.

EnxVideoView(
  token: token,             // Required: your room token from the app server
  embedUrl: "LOW_CODE_URL", // Optional: import Visual Builder settings from portal

  connectError: (Map<dynamic, dynamic> map) {
    // Fires when the connection to the room fails.
    // The map contains an error reason you can display to the user.
    print('connectError: ${jsonEncode(map)}');
  },

  disconnect: (Map<dynamic, dynamic> map) {
    // Fires when the local user disconnects (or is dropped).
    // The map contains the disconnect reason.
    // Navigate away from the call screen here.
    print('disconnect: ${jsonEncode(map)}');
  },

  onPageSlide: (EnxPageSlideEventName pageName, bool isShow) {
    // Fires whenever a UI panel opens or closes.
    // pageName identifies the panel (chat, polling, screenShare, etc.)
    // isShow is true when the panel opens, false when it closes.
  },

  onUserDataReceived: (Map<dynamic, dynamic> map) {
    // Fires when another participant sends custom user data.
    // Use this to build collaborative features on top of the call.
  },
)

Widget placement

EnxVideoView is designed to fill its parent container. For the best experience, wrap it in a Scaffold or use it as the direct child of a full-screen route. Avoid placing it inside a constrained widget like a fixed-height Container unless you have tested the layout on both Android and iOS.

Callback Reference

Each callback fires at a specific point in the session lifecycle. Handle them to keep your app state in sync with the call:

connectError

Fires when EnxVideoView cannot establish a connection to the EnableX room. This can happen due to an invalid token, network issues, or a room that no longer exists. Use the error map to log diagnostics and present a retry option to the user.

disconnect

Fires when the local participant is disconnected — either because they tapped "Leave", a moderator dropped them, or the session ended. This is the right place to pop the call route and clean up any local state.

onPageSlide

Fires whenever an in-call panel (chat, polling, Q&A, screen share, etc.) opens or closes. Use this if your app needs to respond to panel visibility — for example, pausing background tasks when the chat panel is open.

onUserDataReceived

Fires when another participant sends a custom data payload via EnxSetting.sendUserData(). This is a real-time side channel for app-level features that run alongside the call — for example, syncing a shared document or triggering a custom action in your UI.

← Installation Customization →