How to Create a Real-Time Collaborative Document Editor in FlutterFlow

Open Firestore in the Firebase console and create a documents collection. Each document contains: title (String), owner_uid (String), created_at (Timestamp), and updated_at (Timestamp). Under each document create a blocks subcollection where each block has: index (Integer for ordering), delta_json (String — serialised Quill Delta), locked_by (String, nullable — UID of active editor), locked_at (Timestamp, nullable). Also create a presence subcollection on each document with one entry per active user: uid (String), display_name (String), block_index (Integer), last_seen (Timestamp). In FlutterFlow, open Firestore and replicate this structure using the GUI. Having blocks as a subcollection means a Firestore listener on one block will not fire for changes in unrelated blocks, drastically reducing listener cost.

Export your FlutterFlow project (Project Settings > Code Export > Download). Open the downloaded project in VS Code or Android Studio. In pubspec.yaml, add flutter_quill: ^9.0.0 under dependencies. Run flutter pub get. Back in FlutterFlow, navigate to Custom Code > Custom Widgets and create a widget named QuillEditorWidget. This widget wraps QuillEditor and QuillToolbar from the flutter_quill package, accepts a deltaJson String parameter and an onChanged callback, and returns the updated Delta JSON string whenever the user edits. This approach keeps the visual canvas clean while embedding the rich-text engine inside a bounded custom widget.

1// custom_widgets/quill_editor_widget.dart
2import 'dart:convert';
3import 'package:flutter/material.dart';
4import 'package:flutter_quill/flutter_quill.dart' as quill;
5
6class QuillEditorWidget extends StatefulWidget {
7  final String deltaJson;
8  final void Function(String) onChanged;
9  const QuillEditorWidget({
10    super.key,
11    required this.deltaJson,
12    required this.onChanged,
13  });
14  @override
15  State<QuillEditorWidget> createState() => _QuillEditorWidgetState();
16}
17
18class _QuillEditorWidgetState extends State<QuillEditorWidget> {
19  late quill.QuillController _controller;
20
21  @override
22  void initState() {
23    super.initState();
24    final doc = widget.deltaJson.isNotEmpty
25        ? quill.Document.fromJson(jsonDecode(widget.deltaJson) as List)
26        : quill.Document();
27    _controller = quill.QuillController(
28      document: doc,
29      selection: const TextSelection.collapsed(offset: 0),
30    );
31    _controller.addListener(() {
32      final json = jsonEncode(_controller.document.toDelta().toJson());
33      widget.onChanged(json);
34    });
35  }
36
37  @override
38  Widget build(BuildContext context) {
39    return Column(
40      children: [
41        quill.QuillSimpleToolbar(controller: _controller),
42        Expanded(
43          child: quill.QuillEditor.basic(controller: _controller),
44        ),
45      ],
46    );
47  }
48
49  @override
50  void dispose() {
51    _controller.dispose();
52    super.dispose();
53  }
54}

In FlutterFlow, go to Custom Code > Custom Actions and create an action named lockBlock. This action accepts documentId (String) and blockIndex (Integer). It writes the current user's UID and a server timestamp to locked_by and locked_at on the target block document. Add a companion action unlockBlock that clears those fields. In your page's Action Flow, call lockBlock when the user taps a block to focus it, and unlockBlock on focus loss or when the user navigates away. Use a separate Custom Action listenToBlockLock that sets up a Firestore snapshot listener — if locked_by is a different UID, set a page-level boolean isBlockLocked to true, which the widget tree can use to show a locked indicator and disable the QuillEditorWidget.

1// custom_actions/lock_block.dart
2import 'package:cloud_firestore/cloud_firestore.dart';
3import 'package:firebase_auth/firebase_auth.dart';
4
5Future<void> lockBlock(String documentId, int blockIndex) async {
6  final uid = FirebaseAuth.instance.currentUser?.uid;
7  if (uid == null) return;
8  final ref = FirebaseFirestore.instance
9      .collection('documents')
10      .doc(documentId)
11      .collection('blocks')
12      .where('index', isEqualTo: blockIndex)
13      .limit(1);
14  final snap = await ref.get();
15  if (snap.docs.isEmpty) return;
16  final blockDoc = snap.docs.first.reference;
17  final data = snap.docs.first.data();
18  if (data['locked_by'] != null && data['locked_by'] != uid) return;
19  await blockDoc.update({
20    'locked_by': uid,
21    'locked_at': FieldValue.serverTimestamp(),
22  });
23}

Create a Custom Action named saveBlockDelta that takes documentId (String), blockIndex (Integer), and deltaJson (String). Inside, use a Dart Timer with a 600 ms debounce — cancel any pending timer and start a new one on every call. When the timer fires, write deltaJson to the matching block's delta_json field in Firestore. Wire this action to the QuillEditorWidget's onChanged callback in the Action Flow editor. The debounce prevents a Firestore write on every keypress (which would hit rate limits and cost money), while still syncing frequently enough that collaborators see near-real-time updates. Other clients listening to the blocks subcollection will receive the updated delta and re-render their QuillEditorWidget with the new content.

Create a Custom Action updatePresence that takes documentId (String), blockIndex (Integer), and displayName (String). It upserts a document keyed by the current UID in the presence subcollection with block_index, display_name, and last_seen set to server timestamp. Call this action whenever the focused block changes. In FlutterFlow's widget tree, add a StreamBuilder (via Custom Widget) that listens to the presence subcollection and filters out the current user's own entry. For each active presence entry, render a small colored avatar badge at the top of the corresponding block. Use a deterministic color from the UID hash so each collaborator always gets the same color. Add a Cloud Function or client-side cleanup to remove presence entries where last_seen is older than 60 seconds.

In FlutterFlow, create a DocumentsPage with a ListView bound to the documents Firestore collection filtered by owner_uid equals Current User UID. Add a TextField at the top; when its value changes, run a Firestore query filtered by title >= searchText and title <= searchText + '\uf8ff' (Firestore prefix search pattern). Show each document's title and updated_at timestamp. Add a FloatingActionButton that creates a new document in Firestore with a blank first block, then navigates to the editor page passing the new document ID. Include a long-press context menu on each list item with Rename and Delete options backed by Firestore update and delete calls.