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. To handle this across platforms, we use the flutter_inappwebview package, which offers a unified WebView experience and supports all major Platforms — including Android, iOS, web, macOS, and Windows.

$ 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.

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


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

class _MeetingScreenState extends State<MeetingScreen> {
  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: () {
          if (isWhiteboardOn) {
            _room.stopWhiteboard();
          } else {
            _room.startWhiteboard();
          }
        },
      ),

      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;
      });
    });
  }
}