How to Build a Custom Data Import/Export Tool in FlutterFlow

Open your FlutterFlow project and navigate to Settings > Pubspec Dependencies. Add file_picker: ^6.1.1 and csv: ^6.0.0 as new entries. Click Save. FlutterFlow will trigger a package resolution — wait for the green checkmark before continuing. These two packages do all the heavy lifting: file_picker opens the native file browser on iOS and Android, while csv parses the raw file bytes into a List of rows you can iterate over in your Custom Action. Without adding them here, your Custom Action code will fail to compile.

Create a new page called ImportExportPage. Add a Column at the top with a Button labeled 'Choose CSV File' (this triggers the file picker) and a Text widget that shows the filename once picked. Below that, add a DataTable widget to preview the first 5 rows — bind its columns to a Page State variable called previewRows (type: JSON). Below the DataTable, add a Column of Dropdown widgets, one per expected Firestore field (e.g., 'Name', 'Email', 'Amount'). Each Dropdown will be populated with the CSV header columns detected at parse time, stored in a Page State variable called csvHeaders (type: List of String). This mapper lets users tell the app which CSV column corresponds to which database field without requiring them to rename their spreadsheet first.

Go to Custom Code > Custom Actions and create a new action called parseCSV. Set its return type to JSON. Add a local variable fileBytes of type Uint8List. Inside the action, call FilePicker.platform.pickFiles() with type FileType.custom and allowedExtensions: ['csv']. Check that the result is not null and that bytes are available. Pass the bytes to the CsvToListConverter from the csv package and parse the result. Extract the first row as headers (csvHeaders) and the remaining rows as data (csvRows). Store both in the return JSON. Wire this action to the 'Choose CSV File' button's On Tap trigger. On completion, use Set Page State actions to populate the previewRows and csvHeaders variables so the UI refreshes automatically.

1import 'package:file_picker/file_picker.dart';
2import 'package:csv/csv.dart';
3
4Future<dynamic> parseCSV() async {
5  final result = await FilePicker.platform.pickFiles(
6    type: FileType.custom,
7    allowedExtensions: ['csv'],
8    withData: true,
9  );
10  if (result == null || result.files.single.bytes == null) return null;
11
12  final bytes = result.files.single.bytes!;
13  final csvString = String.fromCharCodes(bytes);
14  final rows = const CsvToListConverter().convert(csvString);
15
16  if (rows.isEmpty) return null;
17
18  final headers = rows.first.map((e) => e.toString()).toList();
19  final dataRows = rows.skip(1).map((row) {
20    return Map.fromIterables(headers, row.map((e) => e.toString()));
21  }).toList();
22
23  return {
24    'headers': headers,
25    'rows': dataRows,
26    'rowCount': dataRows.length,
27  };
28}

Create a second Custom Action called batchImportToFirestore. It accepts two parameters: mappedRows (JSON array where each object has your Firestore field names as keys) and collectionPath (String, e.g., 'contacts'). Inside the action, get a reference to FirebaseFirestore.instance. Create a WriteBatch. Loop over mappedRows — for each row, call batch.set() with a new document reference (using .doc() with no argument to auto-generate IDs). Every 499 rows, commit the current batch and start a new one (Firestore's hard limit is 500 operations per batch). After the loop, commit the final batch. Wire this action to an 'Import' button that only becomes enabled when at least one field mapping dropdown has been set. Show a CircularProgressIndicator in a Dialog while import is running.

1import 'package:cloud_firestore/cloud_firestore.dart';
2
3Future<int> batchImportToFirestore(
4  List<dynamic> mappedRows,
5  String collectionPath,
6) async {
7  final firestore = FirebaseFirestore.instance;
8  final collection = firestore.collection(collectionPath);
9  WriteBatch batch = firestore.batch();
10  int count = 0;
11  int totalImported = 0;
12
13  for (final row in mappedRows) {
14    final docRef = collection.doc();
15    batch.set(docRef, Map<String, dynamic>.from(row as Map));
16    count++;
17    totalImported++;
18
19    if (count == 499) {
20      await batch.commit();
21      batch = firestore.batch();
22      count = 0;
23    }
24  }
25
26  if (count > 0) {
27    await batch.commit();
28  }
29
30  return totalImported;
31}

In your Firebase project's functions/index.js file, write an HTTPS Callable Function called exportCollection. It accepts collectionPath and format ('csv' or 'json') as parameters. The function queries the entire collection using admin.firestore().collection(collectionPath).get(), converts the documents to an array of plain objects, then serializes them to CSV (using the json2csv npm package) or JSON. Upload the result to a Firebase Storage bucket, generate a signed URL valid for 1 hour, and return the URL to the caller. Back in FlutterFlow, create a Custom Action that calls this function using FirebaseFunctions.instance.httpsCallable('exportCollection'), then opens the returned URL in an in-app web view or triggers a browser download. Add an 'Export as CSV' and 'Export as JSON' button to the ImportExportPage.

1// functions/index.js
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const { Parser } = require('json2csv');
5const { v4: uuidv4 } = require('uuid');
6admin.initializeApp();
7
8exports.exportCollection = functions.https.onCall(async (data, context) => {
9  if (!context.auth) throw new functions.https.HttpsError('unauthenticated', 'Login required');
10  const { collectionPath, format } = data;
11  const snapshot = await admin.firestore().collection(collectionPath).get();
12  const docs = snapshot.docs.map(d => ({ id: d.id, ...d.data() }));
13
14  let content, contentType, ext;
15  if (format === 'csv') {
16    const parser = new Parser();
17    content = parser.parse(docs);
18    contentType = 'text/csv';
19    ext = 'csv';
20  } else {
21    content = JSON.stringify(docs, null, 2);
22    contentType = 'application/json';
23    ext = 'json';
24  }
25
26  const filename = `exports/${uuidv4()}.${ext}`;
27  const bucket = admin.storage().bucket();
28  const file = bucket.file(filename);
29  await file.save(content, { contentType });
30  const [url] = await file.getSignedUrl({ action: 'read', expires: Date.now() + 3600000 });
31  return { url };
32});

For large imports, users need feedback beyond a spinner. Add a Page State variable importProgress (type: double, 0.0 to 1.0). Modify batchImportToFirestore to accept a progress callback and call it after each batch commit. Update importProgress with the ratio of committed rows to total rows. In FlutterFlow, add a LinearProgressIndicator widget bound to the importProgress state variable — it will animate from 0 to 100% as batches complete. Also add a 'Download Template' button that downloads a CSV with just the header row (matching your expected field names) so users know exactly how to format their data before uploading. Store this template CSV in Firebase Storage and generate a public URL when the page loads.