How to Build a Virtual Whiteboard Feature in FlutterFlow

Create a boards collection with fields: name (String), createdBy (Reference to users), participants (Array of user References), createdAt (Timestamp), lastModifiedAt (Timestamp). Create a strokes subcollection under each board: boards/{boardId}/strokes with fields: type (String: pen/eraser/rectangle/circle/line/text), points (Array of Maps, each with x and y as Doubles — for freehand pen and eraser), color (String, hex like '#FF0000'), strokeWidth (Double), userId (Reference, who drew this stroke), timestamp (Timestamp), startPoint and endPoint (Maps with x, y — for shapes and lines), text (String — for text tool), fontSize (Double — for text tool). Each completed stroke is one document. Do not write individual points as separate documents.

Create a Custom Widget named WhiteboardCanvas with parameters: boardId (String) and an Action Parameter onExportImage returning image bytes. Wrap a CustomPaint widget inside a GestureDetector. In the GestureDetector: onPanStart records the starting point, onPanUpdate adds the current touch position to a local currentPoints list and triggers a repaint, onPanEnd packages the completed stroke (type, points, color, strokeWidth) and writes it to the Firestore strokes subcollection, then clears currentPoints. The CustomPainter reads all stored strokes from a local list and draws each one: pen strokes as connected line segments using canvas.drawPath, eraser strokes as white-colored lines, shapes using drawRect or drawOval with the start and end points.

In the Custom Widget's initState, set up a Firestore real-time listener on boards/{boardId}/strokes ordered by timestamp. When the snapshot changes, update the local strokes list with all stroke documents and trigger a repaint. This means every user with the board open sees new strokes appear in real-time as other users draw. To distinguish between the local user's in-progress stroke (which is being drawn but not yet saved) and other users' saved strokes, render the local currentPoints on top of the stored strokes in the CustomPainter. Color-code strokes by userId so participants can see who drew what (optional: show user avatar at the cursor position).

Above the WhiteboardCanvas widget, add a horizontal Row toolbar. Include IconButtons for: pen (draw mode), eraser (white pen that covers existing strokes), rectangle (draw rectangles), circle (draw circles), line (straight lines), text (tap to place text). Below or in an expandable section, add a color palette: a Row of 8 Container circles (black, red, blue, green, orange, purple, pink, grey) where tapping sets the current color in Page State. Add a Slider for stroke width (range 1-20, default 3). Add undo and redo IconButtons. Store the current tool, color, and width in Page State and pass them to the Custom Widget as parameters.

For undo: maintain a local undoStack list of the last stroke document IDs created by the current user. On undo tap, take the last ID from the stack, delete that stroke document from Firestore, and push the stroke data onto a redoStack. On redo, recreate the stroke document and move it back to undoStack. Limit the undo stack to 50 actions. For export: wrap the CustomPaint in a RepaintBoundary with a GlobalKey. On the export button tap, use RenderRepaintBoundary.toImage(pixelRatio: 2.0) to capture the canvas as an image. Convert to PNG bytes using image.toByteData(format: ImageByteFormat.png). Pass the bytes through the onExportImage callback. The parent page can then upload to Firebase Storage or open the share sheet.