How to Build a Customizable Dashboard for Analytics in FlutterFlow

Create an analytics_daily collection with document IDs formatted as YYYY-MM-DD. Each document has fields: date (String), totalUsers (int), newUsers (int), revenue (double), pageViews (int), conversionRate (double, 0-100), topPages (array of Maps with page and views), trafficSources (Map with keys like direct, organic, social, referral, each mapping to a count). Create a scheduled Cloud Function that runs daily at midnight. The function aggregates data from your users, orders, and page_views collections for the previous day and writes or updates the analytics_daily document. Seed 30 days of sample data for development.

1// Cloud Function: computeDailyAnalytics (scheduled daily)
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4admin.initializeApp();
5
6exports.computeDailyAnalytics = functions.pubsub
7  .schedule('0 0 * * *')
8  .onRun(async () => {
9    const yesterday = new Date();
10    yesterday.setDate(yesterday.getDate() - 1);
11    const dateStr = yesterday.toISOString().split('T')[0];
12    const start = admin.firestore.Timestamp.fromDate(
13      new Date(dateStr + 'T00:00:00Z')
14    );
15    const end = admin.firestore.Timestamp.fromDate(
16      new Date(dateStr + 'T23:59:59Z')
17    );
18
19    const usersSnap = await admin.firestore().collection('users')
20      .where('createdAt', '>=', start).where('createdAt', '<=', end).get();
21    const ordersSnap = await admin.firestore().collection('orders')
22      .where('createdAt', '>=', start).where('createdAt', '<=', end).get();
23
24    let revenue = 0;
25    ordersSnap.docs.forEach(d => revenue += d.data().total || 0);
26
27    await admin.firestore().collection('analytics_daily').doc(dateStr).set({
28      date: dateStr,
29      totalUsers: (await admin.firestore().collection('users').get()).size,
30      newUsers: usersSnap.size,
31      revenue: Math.round(revenue * 100) / 100,
32      pageViews: Math.floor(Math.random() * 5000) + 1000,
33      conversionRate: ordersSnap.size > 0
34        ? Math.round((ordersSnap.size / usersSnap.size) * 10000) / 100 : 0,
35      trafficSources: { direct: 40, organic: 30, social: 20, referral: 10 },
36      topPages: [
37        { page: '/home', views: 1200 },
38        { page: '/products', views: 800 },
39        { page: '/pricing', views: 450 },
40      ],
41    });
42  });

Create a DashboardPage. Add Page State: selectedRange (String, default '7d'). Query analytics_daily documents for the selected date range. At the top, display 4 KPI cards in a responsive GridView (2 columns on mobile, 4 on desktop). Each card shows: the metric label (Total Users, Revenue, Page Views, Conversion Rate), the current value in large text, a trend arrow icon (up green or down red), and the percentage change compared to the previous period. Calculate percentage change by comparing the sum of the current range to the same-length previous range. Use a Custom Function for the comparison.

Create a Custom Widget called TrendLineChart that accepts a List of data points (date and value pairs). Use the fl_chart package to render a LineChart with the x-axis showing dates and the y-axis showing the metric value. Add gradient fill below the line, dot markers on data points, and tooltip on touch showing the exact value and date. Wrap the widget in a Container with an explicit height of 250 pixels. On the dashboard, bind this widget to the daily revenue or pageViews data from the analytics_daily query results.

Create a PieChart Custom Widget for traffic source breakdown. Accept a Map of source names to counts. Render colored pie sections with labels and percentages. Wrap in a 250px height Container. Create a BarChart Custom Widget for top pages. Accept a List of page name and view count pairs. Render horizontal bars with page names on the y-axis and view counts on the x-axis. Place both charts in a Row on desktop (side by side) or Column on mobile (stacked) using Responsive Layout. Bind the PieChart to the aggregated trafficSources data and the BarChart to the topPages array.

Above the KPI cards, add ChoiceChips with options: Today, 7d, 30d, 90d. When the user selects a range, update Page State selectedRange and recalculate the date boundaries. For Today, query the single document with today's date. For 7d, query documents where date >= 7 days ago. For 30d and 90d, extend accordingly. All KPI values, charts, and breakdowns update based on the new query results. Add a RefreshIndicator wrapping the entire scroll view for manual refresh. Show a last-updated timestamp at the top right from the most recent document's date.