VerrifloPlayer Widget

The VerrifloPlayer is the core widget of the Flutter SDK. It handles video rendering, real-time communication, and UI controls in a single drop-in component.

Basic Usage

To display a classroom, simply pass the iframeUrl obtained from the Create Room or Join Room API.

import 'package:verriflo_classroom/verriflo_classroom.dart';

VerrifloPlayer(
  iframeUrl: 'https://live.verriflo.com/iframe/live?token=...',
  onClassEnded: () => Navigator.pop(context),
)

Programmatic Control

For more advanced interactions, use the VerrifloPlayerController. This allows you to trigger actions programmatically from anywhere in your widget tree.

final controller = VerrifloPlayerController();

// 1. Pass controller to the widget
VerrifloPlayer(
  iframeUrl: iframeUrl,
  controller: controller,
);

// 2. Trigger actions
await controller.setQuality(VideoQuality.low);
await controller.sendChatMessage("Hello from Flutter!");
await controller.forceLeave(reason: "Session timed out");

Controller Methods

Method	Description
disconnect()	Safely disconnects the participant and closes the stream.
forceLeave({reason})	Disconnects the user and displays a customizable "Kicked" overlay.
setQuality(quality)	Changes stream quality (auto, low, medium, high).
enableAudio()	Manual resume for audio contexts (handles autoplay restrictions).

Properties Reference

Core Properties

Property	Type	Required	Description
iframeUrl	String	Yes	The unique classroom URL generated by the Verriflo API.
controller	VerrifloPlayerController	No	Enables programmatic control of the player.
showControls	bool	No	Whether to display the default Verriflo control bar. (Default: true)
backgroundColor	Color	No	The color of the player's background while loading. (Default: transparent)

Lifecycle Callbacks

Callback	Signature	Description
onClassEnded	VoidCallback	Triggered when the instructor ends the session for everyone.
onKicked	Function(String?)	Called if the user is removed. Provides an optional reason.
onStateChanged	Function(ClassroomState)	Monitors connection health and participant status.
onError	Function(String, dynamic)	Triggered on critical failures (e.g., networking issues).
onEvent	Function(VerrifloEvent)	Catch-all for every SDK event (chat, joins, mic toggles).

UI Callbacks

Callback	Signature	Description
onFullscreenToggle	VoidCallback	Signaled when the user taps the internal fullscreen button.
onChatToggle	VoidCallback	Signaled when the user opens or closes the side chat panel.

Example: Full Implementation

A complete example showing how to handle navigation and administrative actions.

class MyClassroomPage extends StatelessWidget {
  final String iframeUrl;
  final _controller = VerrifloPlayerController();

  MyClassroomPage({required this.iframeUrl, super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Live Session'),
        actions: [
          IconButton(
            icon: const Icon(Icons.logout),
            onPressed: () => _controller.disconnect(),
          ),
        ],
      ),
      body: VerrifloPlayer(
        iframeUrl: iframeUrl,
        controller: _controller,
        onClassEnded: () {
          Navigator.of(context).pop();
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('Class has ended.')),
          );
        },
        onError: (msg, error) => print('Verriflo Error: $msg'),
      ),
    );
  }
}

---

Next: Explore the Event System to build custom interactive features.