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 theflutter_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 theInAppWebView
widget using theWebUri
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