Render Whiteboard - Flutter

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

Install Dependencies

• For platforms other than web, the whiteboard is rendered using a WebView component. You can install the necessary dependency for the same with the following command:

$ flutter pub add webview_flutter

Render the Whiteboard

• A whiteboard is dynamically rendered during a meeting based on whether the user is on a web or a non-web platform.
• For Web Platforms:
  • For web platforms, an iframe element is used to display the whiteboard. The iframe is registered dynamically through HtmlElementView.
• For Non-Web Platforms:
  • For non-web platforms, a WebView component is used. The URL for the whiteboard is loaded into the WebView using a WebViewController when the whiteboard is started.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:html' as html;
import 'dart:ui_web' as ui;

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

class _MeetingScreenState extends State<MeetingScreen> {
  late Room _room;
  bool isWhiteboardOn = false;
  late WebViewController controller;
  late html.IFrameElement iframeElement;

  @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: !kIsWeb
              ? WebViewWidget(
                  controller: controller,
                )
              : HtmlElementView(
                  viewType: 'iframeElement',
                ),
        ),
    ]);
  }

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

      if (kIsWeb) {
        // Register the iframe dynamically for the web
        ui.platformViewRegistry.registerViewFactory(
          'iframeElement',
          (int viewId) => html.IFrameElement()
            ..src = url
            ..style.border = 'none'
            ..style.width = '100%'
            ..style.height = '100%',
        );
      }

      if (!kIsWeb) {
        controller = WebViewController()
          ..setJavaScriptMode(JavaScriptMode.unrestricted)
          ..loadRequest(
            Uri.parse(url),
          );
      } else {
        iframeElement = html.IFrameElement()
          ..src = url
          ..style.border = 'none'
          ..width = '100%'
          ..height = '100%';
      }

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

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

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

  }
}