Skip to main content
Version: 2.x.x

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

Got a Question? Ask us on discord