How to Create a Secure Document Management System in FlutterFlow

Create a folders collection with fields: name (String), parentFolderId (String, nullable for root folders), createdBy (String), createdAt (Timestamp), depth (Integer, 0 for root). Create a documents collection: title (String), fileUrl (String), mimeType (String: 'application/pdf', 'image/png', etc.), size (Integer, bytes), uploadedBy (String), folderId (String), tags (String Array), version (Integer), accessControl (Map: {viewerIds: [String], editorIds: [String]}), createdAt (Timestamp), updatedAt (Timestamp). The depth field enables proper indentation in the folder tree display.

Create a DocumentsPage with a Page State variable currentFolderId (String, nullable, null for root). At the top, add a breadcrumb Row. Build the breadcrumb by walking up the parentFolderId chain from the current folder to root, then reversing the list. Each breadcrumb segment is a tappable Text widget that sets currentFolderId to that folder's ID. Display: Home > Projects > 2026 > Q1 with '>' separators. Below the breadcrumbs, add a ListView with two Backend Queries: one for folders where parentFolderId equals currentFolderId, and one for documents where folderId equals currentFolderId. Folders show with a folder icon and tapping them updates currentFolderId. Documents show with a file type icon.

Add a FlutterFlowUploadButton in the DocumentsPage toolbar. On upload complete, query existing documents in the current folder with the same title. If a document with that title exists, create a new document with version set to the highest existing version plus one. If no document exists with that name, create a new document with version 1. Always create a new document rather than updating the existing one so that all previous versions remain accessible. Store the file in Firebase Storage under documents/{folderId}/{filename}_v{version}. Add a Version History button on each document row that opens a BottomSheet listing all versions of that document ordered by version descending.

On the document detail page, add a Permissions section visible only to the document owner (uploadedBy equals current user) or users in editorIds. Display two sections: Editors and Viewers. Each section shows a ListView of user names from the respective ID arrays. Add an Add User button that opens a search dialog to find users by name or email. When adding a user, update the accessControl map to add their UID to viewerIds or editorIds. For Firestore Security Rules, create rules that allow read access when the user's UID is in viewerIds or editorIds, and write access only when in editorIds or is the uploadedBy user. In the FlutterFlow UI, filter document queries to only return documents where the current user is in viewerIds, editorIds, or is the uploadedBy user.

Create a DocumentPreviewPage that receives documentId as a Route Parameter. Query the document and check the mimeType field. For PDFs (application/pdf), display a Custom Widget using the flutter_pdfview package that renders the PDF inline. For images (image/*), display a standard Image widget with the fileUrl. For all other types (docx, xlsx, etc.), show a Container with the file icon, file name, size, and a Download button that launches the fileUrl. The Custom Widget for PDF takes the fileUrl as a parameter and renders pages with swipe navigation.

1// Custom Widget: PdfPreviewWidget
2import 'package:flutter/material.dart';
3import 'package:flutter_pdfview/flutter_pdfview.dart';
4import 'package:http/http.dart' as http;
5import 'dart:io';
6import 'package:path_provider/path_provider.dart';
7
8class PdfPreviewWidget extends StatefulWidget {
9  final String pdfUrl;
10  final double width;
11  final double height;
12  const PdfPreviewWidget({
13    super.key,
14    required this.pdfUrl,
15    required this.width,
16    required this.height,
17  });
18
19  @override
20  State<PdfPreviewWidget> createState() => _PdfPreviewWidgetState();
21}
22
23class _PdfPreviewWidgetState extends State<PdfPreviewWidget> {
24  String? _localPath;
25  bool _loading = true;
26
27  @override
28  void initState() {
29    super.initState();
30    _downloadPdf();
31  }
32
33  Future<void> _downloadPdf() async {
34    final response = await http.get(Uri.parse(widget.pdfUrl));
35    final dir = await getTemporaryDirectory();
36    final file = File('${dir.path}/preview.pdf');
37    await file.writeAsBytes(response.bodyBytes);
38    setState(() {
39      _localPath = file.path;
40      _loading = false;
41    });
42  }
43
44  @override
45  Widget build(BuildContext context) {
46    if (_loading) {
47      return const Center(child: CircularProgressIndicator());
48    }
49    return SizedBox(
50      width: widget.width,
51      height: widget.height,
52      child: PDFView(filePath: _localPath!),
53    );
54  }
55}

Add a SearchPage with a TextField for text search and ChoiceChips for tag filters. Query documents where the current user has access (is in viewerIds, editorIds, or is uploadedBy). Filter by title containing the search term using a Firestore query with >= and < range operators on the title field. For tag filtering, use array-contains-any on the tags field with the selected tags. Display results in a ListView showing document title, folder path, tags as colored chips, version number, and last updated date. Tapping a result navigates to the DocumentPreviewPage.