How to Implement Data Export Features in FlutterFlow

In FlutterFlow, create a Custom Action named exportToCSV. Add the share_plus: ^7.0.0 dependency in the Custom Action's pubspec section. The action accepts a parameter documents (List of dynamic — your Firestore query result) and a filename (String). It iterates over the documents, extracts the fields you want to export, builds a CSV string with a header row, writes it to a temporary file using dart:io's File class and path_provider to get the temp directory, then calls ShareXFiles with the file. Wire this Custom Action to an Export CSV button on your data screen. Pass the Backend Query's documents list as the documents parameter.

1// Custom Action: exportToCSV
2// pubspec: share_plus: ^7.0.0, path_provider: ^2.1.0
3import 'dart:io';
4import 'package:path_provider/path_provider.dart';
5import 'package:share_plus/share_plus.dart';
6
7Future exportToCSV(List<dynamic> documents, String filename) async {
8  final buffer = StringBuffer();
9  // Header row
10  buffer.writeln('Name,Email,Date,Amount');
11  // Data rows
12  for (final doc in documents) {
13    final data = doc.data() as Map<String, dynamic>? ?? {};
14    final name = (data['name'] ?? '').toString().replaceAll(',', ' ');
15    final email = (data['email'] ?? '').toString();
16    final date = (data['createdAt']?.toDate()?.toIso8601String() ?? '');
17    final amount = (data['amount'] ?? 0).toString();
18    buffer.writeln('$name,$email,$date,$amount');
19  }
20  final dir = await getTemporaryDirectory();
21  final file = File('${dir.path}/$filename.csv');
22  await file.writeAsString(buffer.toString());
23  await Share.shareXFiles([XFile(file.path)], text: 'Exported data');
24}

In the Firebase Console, create a Cloud Function named exportUserDataCSV. The function authenticates the caller, queries the target Firestore collection with pagination (using startAfter to page through all results without hitting memory limits), builds the CSV in a stream, uploads it to Firebase Storage, and returns a signed URL. In FlutterFlow's API Calls panel, create a new Cloud Function API call targeting the function's HTTPS endpoint. Pass currentUser.uid and any filter parameters (date range, project ID). On the Export button's action, call this API, then use Launch URL with the returned URL.

1// Cloud Function: exportUserDataCSV (index.js)
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4admin.initializeApp();
5
6exports.exportUserDataCSV = functions.https.onCall(async (data, context) => {
7  if (!context.auth) {
8    throw new functions.https.HttpsError('unauthenticated', 'Login required');
9  }
10  const userId = context.auth.uid;
11  const db = admin.firestore();
12  const rows = ['Name,Email,Date,Amount'];
13  let query = db.collection('orders').where('userId', '==', userId).orderBy('createdAt', 'desc');
14  if (data.startDate) query = query.where('createdAt', '>=', new Date(data.startDate));
15  
16  // Paginate through all results
17  let lastDoc = null;
18  let hasMore = true;
19  while (hasMore) {
20    let pageQuery = lastDoc ? query.startAfter(lastDoc).limit(500) : query.limit(500);
21    const snap = await pageQuery.get();
22    snap.forEach(doc => {
23      const d = doc.data();
24      const name = (d.name || '').replace(/,/g, ' ');
25      const email = d.email || '';
26      const date = d.createdAt?.toDate()?.toISOString() || '';
27      const amount = d.amount || 0;
28      rows.push(`${name},${email},${date},${amount}`);
29    });
30    if (snap.size < 500) hasMore = false;
31    else lastDoc = snap.docs[snap.docs.length - 1];
32  }
33
34  const csv = rows.join('\n');
35  const bucket = admin.storage().bucket();
36  const filePath = `exports/${userId}/data_${Date.now()}.csv`;
37  const file = bucket.file(filePath);
38  await file.save(csv, { contentType: 'text/csv' });
39  const [url] = await file.getSignedUrl({ action: 'read', expires: Date.now() + 900000 });
40  return { url, rowCount: rows.length - 1 };
41});

Create a second Cloud Function named exportPDFReport. Add pdfkit as a dependency in package.json. The function creates a PDFDocument, adds a styled header with your app name and report date, iterates over the Firestore query results, and adds formatted rows with alternating background colors. It pipes the PDF stream to a buffer, then uploads the buffer to Firebase Storage. More complex PDF reports can include totals rows, charts embedded as base64 images, and multi-page support with automatic page breaks. In FlutterFlow, add an Export PDF button alongside the CSV button with a separate API call to this function.

Create a third Cloud Function named exportExcelReport. Add exceljs to package.json. The function creates a new Workbook, adds a Summary sheet with aggregate totals, then adds a Detail sheet with all individual records. Apply cell formatting: bold headers, number format for currency columns, date format for timestamp columns. ExcelJS supports column width auto-fit, frozen header rows, and column filters — add all three for a professional output. Upload the .xlsx buffer to Firebase Storage and return a signed URL. In FlutterFlow, add an Export Excel button that calls this function.

Large exports can take 10-30 seconds. Add a proper loading state to prevent the user from tapping the button multiple times and to set expectations. Create a Page State variable isExporting (Boolean, default false). When the Export button is tapped, set isExporting to true and show a CircularProgressIndicator with a Text widget saying 'Generating your export...' using Conditional Visibility. After the API call returns (whether success or error), set isExporting back to false. On success, call Launch URL with the returned URL. On error, show a Snack Bar with the error message. Disable the Export button using Conditional Interactivity tied to isExporting.