How to Create a Custom Report Generation Tool in FlutterFlow

Create a new page named 'Report Builder'. Use a PageView widget with 4 pages representing the configuration steps. Step 1: data source selector — a ListView of available report types (Sales Summary, User Activity, Order Status, Custom). Step 2: date range picker — two DatePicker widgets for start and end date, plus Quick Select chips (Last 7 Days, Last 30 Days, Last Quarter, Custom). Step 3: columns and grouping — a CheckboxListTile per available column (date, category, amount, count, region) and a DropdownButton for groupBy (Day, Week, Month, Category). Step 4: chart type selector — icon cards for Bar Chart, Line Chart, Pie Chart, Table Only. Store all selections in Page State variables. A sticky bottom bar shows the current step number and 'Next' / 'Generate Report' buttons.

In your Firebase Functions directory, create generateReport.js. The function accepts: dataSource (String), startDate (Timestamp), endDate (Timestamp), groupBy (String), columns (String Array), and userId (String for security). Based on dataSource, query the appropriate Firestore collection filtering by a timestamp field between startDate and endDate. Group results in JavaScript — build a Map keyed by the groupBy period (e.g., week number, month-year, or category name). For each group, compute: total count, sum of numeric fields in the requested columns, and average where applicable. Return the aggregated data as a flat JSON array — one object per group — with the group key and all computed values. Keep the response under 1MB for safe client delivery.

1// Cloud Function: generateReport
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4
5exports.generateReport = functions.https.onCall(
6  async (data, context) => {
7    if (!context.auth) {
8      throw new functions.https.HttpsError(
9        'unauthenticated', 'Login required'
10      );
11    }
12    const { dataSource, startDate, endDate, groupBy, columns } = data;
13    const db = admin.firestore();
14    const snap = await db
15      .collection(dataSource)
16      .where('createdAt', '>=', new Date(startDate))
17      .where('createdAt', '<=', new Date(endDate))
18      .where('userId', '==', context.auth.uid)
19      .get();
20
21    const groups = {};
22    snap.forEach((doc) => {
23      const d = doc.data();
24      const date = d.createdAt.toDate();
25      let key;
26      if (groupBy === 'day') {
27        key = date.toISOString().split('T')[0];
28      } else if (groupBy === 'week') {
29        const week = Math.ceil(date.getDate() / 7);
30        key = `${date.getFullYear()}-W${String(week).padStart(2, '0')}`;
31      } else if (groupBy === 'month') {
32        key = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
33      } else {
34        key = d[groupBy] || 'Other';
35      }
36      if (!groups[key]) {
37        groups[key] = { period: key, count: 0, totalAmount: 0 };
38      }
39      groups[key].count++;
40      if (columns.includes('amount') && d.amount) {
41        groups[key].totalAmount += d.amount;
42      }
43    });
44    return Object.values(groups)
45      .sort((a, b) => a.period.localeCompare(b.period));
46  }
47);

After the Cloud Function returns data, store it in a Page State variable (JSON List). Create a Custom Widget named 'ReportChart' that accepts: chartType (String), data (List of Maps), xKey (String), yKey (String). Use the fl_chart package to render the appropriate chart type — BarChart for bar, LineChart for line, PieChart for pie. Map the incoming data array to fl_chart's data model: for BarChart, create BarChartGroupData for each data point using the group index as x and the numeric value as y. Show a loading spinner while the Cloud Function is running. Below the chart, add a DataTable widget showing the same data in tabular format, using FlutterFlow's built-in DataTable component or a ListView of Row widgets.

Add an Export button with a DropdownButton offering PDF and CSV options. For CSV: create a Custom Action named 'exportCsv' that takes the report data List and column names, builds a CSV string using the csv package (or manual join), saves it to a temporary file using path_provider, and shares it via share_plus. For PDF: create a Custom Action named 'exportPdf' that uses the pdf package to build a Document with a table layout. Add a header row with column names and a data row for each report group. Convert to bytes and share. Include the report title, date range, and generation timestamp in the PDF header.

1// Custom Action: exportCsv
2import 'dart:io';
3import 'package:csv/csv.dart';
4import 'package:path_provider/path_provider.dart';
5import 'package:share_plus/share_plus.dart';
6
7Future<void> exportCsv(
8  List<dynamic> reportData,
9  List<String> columns,
10  String reportTitle,
11) async {
12  final rows = <List<dynamic>>[
13    columns, // header row
14    ...reportData.map((row) =>
15      columns.map((col) => row[col] ?? '').toList()),
16  ];
17  final csvString = const ListToCsvConverter().convert(rows);
18  final dir = await getTemporaryDirectory();
19  final fileName =
20      '${reportTitle.replaceAll(' ', '_')}_${DateTime.now().millisecondsSinceEpoch}.csv';
21  final file = File('${dir.path}/$fileName');
22  await file.writeAsString(csvString);
23  await Share.shareXFiles(
24    [XFile(file.path)],
25    subject: reportTitle,
26  );
27}

Add a 'Save as Template' button on the report configuration screen. On tap, show a TextField dialog asking for a template name. On confirm, write a document to Firestore collection 'reportTemplates' containing: name, dataSource, startDateOffset (integer days from today), endDateOffset, groupBy, columns, chartType, and userId. On the Report Builder home screen, show a 'Saved Templates' section with a list of the user's templates fetched from Firestore. Tapping a template populates all Page State variables with the saved configuration and navigates to step 4, ready to generate. Include a delete button on each template card.