Whiteboard - Flutter

The Whiteboard is an interactive, shared canvas that enables users to collaborate in real-time within your Flutter application. It allows multiple participants to draw, write, and add annotations simultaneously, making it ideal for meetings, presentations, brainstorming sessions, and other collaborative activities.

This documentation will guide you on how to start and stop the whiteboard, and handle the necessary events to ensure a smooth user experience.

startWhiteboard()

• To start the whiteboard session, you can call the startWhiteboard() method of the Room class, which initializes the whiteboard and makes it available for user interaction.

Events associated with startWhiteboard

• All participants will receive the Events.whiteboardStarted event when the whiteboard is successfully started. This event includes a URL that can be used to render the whiteboard for interaction within the app.
• It can be subscribed to, using the Room object.
• The whiteboard URL can be displayed using either a WebView component or an iframe element, depending on the platform, allowing participants to interact seamlessly within the app. For detailed instructions on rendering the whiteboard, refer to this guide.

import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';

class MeetingScreen extends StatefulWidget {
  //Existing configuration
}

class _MeetingScreenState extends State<MeetingScreen> {
  late Room _room;

  @override
  void initState() {
    setupRoomEventListener();
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      ElevatedButton(
        onPressed: () {
          _room.startWhiteboard();
        },
        child: const Text("Start Whiteboard"),
      ),
    ]);
  }

  void setupRoomEventListener() {
    _room.on(Events.whiteboardStarted, (url) {
      print("Whiteboard Started. Whiteboard url: $url");
    });
  }
}

stopWhiteboard()

• To end the whiteboard session, you can call the stopWhiteboard() method of the Room class, which terminates the active whiteboard and cleans up any resources associated with it.

Events associated with stopWhiteboard

• All participants will receive the Events.whiteboardStopped event when the whiteboard session is successfully terminated. This event signals that the whiteboard is no longer available for interaction within the app.
• It can be subscribed to, using the Room object.

import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';

class MeetingScreen extends StatefulWidget {
  //Existing configuration
}

class _MeetingScreenState extends State<MeetingScreen> {
  late Room _room;

  @override
  void initState() {
    setupRoomEventListener();
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      ElevatedButton(
        onPressed: () {
          _room.stopWhiteboard();
        },
        child: const Text("Stop Whiteboard"),
      ),
    ]);
  }

  void setupRoomEventListener() {
    _room.on(Events.whiteboardStopped, (url) {
      print("Whiteboard Stopped");
    });
  }
}

API Reference

• startWhiteboard()
• stopWhiteboard()
• whiteboardStarted
• whiteboardStopped