Render Whiteboard - Flutter

This guide explains how to dynamically render a whiteboard in your flutter application.

Install Dependencies

• The whiteboard is rendered using a WebView component. We use the flutter_inappwebview package, which offers the same WebView API on Android and iOS.

$ flutter pub add flutter_inappwebview

Render the Whiteboard

To render the whiteboard:

• Listen for the whiteboardStarted event from the room instance to obtain the whiteboard URL.
• Pass this URL to the initialUrlRequest parameter of the InAppWebView widget using the WebUri constructor.
• startWhiteboard() and stopWhiteboard() return a Future that throws a VideoSDKError when the call fails, so await them inside try/catch.

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


class RoomScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _RoomScreenState();
  //Existing configuration
}

class _RoomScreenState extends State<RoomScreen> {
  late Room _room;
  bool isWhiteboardOn = false;
  String? whiteboardUrl;

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

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      ElevatedButton(
        child: Text(
          isWhiteboardOn ? 'Stop Whiteboard' : 'Start Whiteboard',
        ),
        onPressed: () async {
          try {
            if (isWhiteboardOn) {
              await _room.stopWhiteboard();
            } else {
              await _room.startWhiteboard();
            }
          } on VideoSDKError catch (e) {
            print("Whiteboard request failed: ${e.code} ${e.name}");
          }
        },
      ),

      if (isWhiteboardOn)
        SizedBox(
          height: 300,
          width: 350,
          child: InAppWebView(
            initialUrlRequest: URLRequest(url: WebUri(whiteboardUrl!)),
          ),
        ),
    ]);
  }

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

    _room.on(Events.whiteboardStopped, () {
      print("Whiteboard stopped.");

      setState(() {
        isWhiteboardOn = false;
      });
    });
  }
}