How to Create a Document Editor in FlutterFlow

Open Firebase console and create a documents collection. Each document needs: title (String), content_delta (String — serialised Quill Delta JSON), owner_uid (String), word_count (Integer — updated on each save), created_at (Timestamp), and updated_at (Timestamp). In FlutterFlow, open Firestore and create the same collection schema via the GUI. The content_delta field stores the entire document as a JSON string — start with an empty delta: '[{"insert":"\n"}]'. This single newline is the minimum valid Quill document. Setting word_count as a separate field lets you display it in the document list without loading the full delta string. Add a Firestore composite index on owner_uid (ascending) + updated_at (descending) for efficient per-user document listing.

Export your FlutterFlow project and add flutter_quill: ^9.0.0 to pubspec.yaml. In FlutterFlow's Custom Code panel, create a Custom Widget named QuillEditorWidget. It accepts two parameters: initialDelta (String) and a void Function(String, int) callback named onChanged — the two values are the new delta JSON string and the current word count. The widget initialises a QuillController from the initial delta on first load. It renders a QuillSimpleToolbar above a QuillEditor in an Expanded layout. The controller's change listener fires onChanged with the serialised delta and the plain-text word count (calculated by splitting the document's toPlainText() output on whitespace). Place this widget on the editor page using the Custom Widget node in the canvas, setting the initialDelta to the Firestore content_delta field value.

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

Create a Custom Action named autoSaveDocument that takes documentId (String), deltaJson (String), and wordCount (Integer). The action uses a module-level Map<String, Timer> to debounce writes per document — cancels any pending timer and starts a new 600 ms timer that writes to Firestore when it fires. The Firestore update sets content_delta, word_count, and updated_at. In the FlutterFlow Action Flow for the QuillEditorWidget's onChanged callback: set page state variables currentDelta and currentWordCount, then call autoSaveDocument. A small saving/saved indicator in the top-right corner of the editor page (an Icon that toggles between a spinning indicator and a checkmark based on a page state isSaving boolean) gives users confidence their work is being saved.

1import 'dart:async';
2import 'package:cloud_firestore/cloud_firestore.dart';
3
4final Map<String, Timer> _saveTimers = {};
5
6Future<void> autoSaveDocument(
7  String documentId,
8  String deltaJson,
9  int wordCount,
10) async {
11  _saveTimers[documentId]?.cancel();
12  _saveTimers[documentId] = Timer(const Duration(milliseconds: 600), () async {
13    _saveTimers.remove(documentId);
14    await FirebaseFirestore.instance
15        .collection('documents')
16        .doc(documentId)
17        .update({
18      'content_delta': deltaJson,
19      'word_count': wordCount,
20      'updated_at': FieldValue.serverTimestamp(),
21    });
22  });
23}

At the top of the editor page, add a TextField widget for the document title. Set its initial value to the Firestore document's title field, loaded via a Document Query on the page. In the TextField's On Text Change action, debounce a Firestore update to the title field — use a separate Custom Action updateDocumentTitle(String documentId, String title) with its own 500 ms debounce timer. This keeps the title and content saves independent. Display the auto-updated title in a Text widget at the top of the document list page using a Firestore stream query so the list updates immediately when the title changes.

Create a DocumentsPage with a ListView bound to a Firestore query on the documents collection filtered by owner_uid equals Current User UID, ordered by updated_at descending. Each list item shows the document title, word_count, and a relative time string (using a Custom Function formatRelativeTime). Add a TextField search bar at the top. When its value changes, run a Firestore query with title >= searchText and title <= searchText + '\uf8ff' to implement prefix search. Show the matching results in the ListView. Add a FAB that creates a new document in Firestore with the empty delta, then navigates to the editor page passing the new document ID. Include a delete confirmation bottom sheet accessible by long-pressing a list item.