How to Create a Custom Analytics Widget for Your FlutterFlow App

In Firestore, create a collection called analytics_daily. Each document represents one day's aggregated metrics. Document ID format: YYYY-MM-DD (e.g., 2026-03-29). Fields: date (Timestamp), totalUsers (Integer — unique users that day), newUsers (Integer — first-time users), revenue (Double — total revenue in dollars), activeSessions (Integer — sessions with at least one interaction). Manually create 7-14 sample documents with realistic data for development. For production, deploy a scheduled Cloud Function (exports.aggregateDaily = functions.pubsub.schedule('every 24 hours').onRun()) that queries your raw events collection, computes the five metrics, and writes one analytics_daily document. This pattern keeps your dashboard queries to a single document read per day instead of scanning thousands of raw events.

Create a new Component called KPIMetricCard. Add four Component Parameters: label (String), currentValue (Double), previousValue (Double), and iconName (String). Layout: outer Container with 16px padding, white background, 12px borderRadius, and a subtle boxShadow. Inside, a Column with crossAxisAlignment start. First child: an Icon widget bound to iconName parameter (use Conditional Value to map strings to Icons — 'users' to Icons.people, 'revenue' to Icons.attach_money, 'sessions' to Icons.trending_up). Second child: a Text widget showing currentValue formatted appropriately (use Custom Function formatMetric that returns '1.2K' for thousands, '$12,450' for revenue). Set style to headlineLarge, fontWeight bold. Third child: a Text widget showing the label parameter in bodyMedium, secondary color. Fourth child: a Row with an Icon (Icons.arrow_upward in green or Icons.arrow_downward in red — Conditional Value based on whether percentage is positive) and a Text widget showing the percentage. Create a Custom Function called calcPercentChange with parameters current (Double) and previous (Double) that returns ((current - previous) / previous * 100).toStringAsFixed(1). Use Conditional Styles: green (#4CAF50) text when positive, red (#F44336) when negative.

1// Custom Function: calcPercentChange
2// Return Type: String
3// Parameters: current (Double), previous (Double)
4
5String calcPercentChange(double current, double previous) {
6  if (previous == 0) return '0.0';
7  final change = ((current - previous) / previous) * 100;
8  return change.toStringAsFixed(1);
9}
10
11// Custom Function: formatMetric
12// Return Type: String
13// Parameters: value (Double), prefix (String, optional)
14
15String formatMetric(double value, {String prefix = ''}) {
16  if (value >= 1000000) {
17    return '$prefix${(value / 1000000).toStringAsFixed(1)}M';
18  } else if (value >= 1000) {
19    return '$prefix${(value / 1000).toStringAsFixed(1)}K';
20  }
21  return '$prefix${value.toStringAsFixed(0)}';
22}

Create a new page called AnalyticsDashboard. Add a Backend Query at the page level: query analytics_daily, ordered by date descending, limit 2 (today + yesterday for comparison). Bind the query result to Page State variable analyticsData. Below the AppBar, add a Padding (16px all sides) wrapping a GridView with crossAxisCount: 2, crossAxisSpacing: 12, mainAxisSpacing: 12, and childAspectRatio: 1.4. Place four KPIMetricCard Components inside the GridView. Bind each card's parameters: first card — label: 'Total Users', currentValue: analyticsData[0].totalUsers, previousValue: analyticsData[1].totalUsers, iconName: 'users'. Second card — label: 'Revenue', currentValue: analyticsData[0].revenue, previousValue: analyticsData[1].revenue, iconName: 'revenue'. Third card — label: 'New Users', currentValue: analyticsData[0].newUsers, previousValue: analyticsData[1].newUsers, iconName: 'users'. Fourth card — label: 'Sessions', currentValue: analyticsData[0].activeSessions, previousValue: analyticsData[1].activeSessions, iconName: 'sessions'.

Add fl_chart to your project dependencies (pubspec.yaml via Custom Code settings: fl_chart: ^0.68.0). Create a Custom Widget called TrendLineChart with parameters: dataPoints (List<JSON> — each item has 'x' as double index and 'y' as double value), lineColor (Color, default blue), and chartHeight (Double, default 200). In the widget build method, return a Container with a FIXED height set to chartHeight (critical — fl_chart crashes without a bounded height). Inside, place a LineChart widget. Configure LineChartData: gridData with show: false, titlesData showing only bottom axis labels (dates) and left axis values, borderData with show: false. Create one LineChartBarData with spots mapped from dataPoints as FlSpot(item['x'], item['y']), isCurved: true, color: lineColor, barWidth: 3, dotData: FlDotData(show: false), belowBarData: BarAreaData(show: true, color: lineColor.withOpacity(0.1)). Enable touch tooltips: lineTouchData with LineTouchTooltipData showing the y value on hover. On the dashboard page, add a Backend Query for analytics_daily ordered by date ascending for the selected range, map results to the dataPoints format using a Custom Function, and pass them to TrendLineChart.

1// Custom Widget: TrendLineChart
2import 'package:fl_chart/fl_chart.dart';
3
4class TrendLineChart extends StatelessWidget {
5  final List<dynamic> dataPoints;
6  final Color lineColor;
7  final double chartHeight;
8
9  const TrendLineChart({
10    super.key,
11    required this.dataPoints,
12    this.lineColor = const Color(0xFF2196F3),
13    this.chartHeight = 200,
14  });
15
16  @override
17  Widget build(BuildContext context) {
18    final spots = dataPoints.asMap().entries.map((e) {
19      return FlSpot(e.key.toDouble(), (e.value['y'] as num).toDouble());
20    }).toList();
21
22    return SizedBox(
23      height: chartHeight,
24      child: LineChart(
25        LineChartData(
26          gridData: const FlGridData(show: false),
27          titlesData: const FlTitlesData(
28            topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
29            rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
30            bottomTitles: AxisTitles(
31              sideTitles: SideTitles(showTitles: true, reservedSize: 30),
32            ),
33            leftTitles: AxisTitles(
34              sideTitles: SideTitles(showTitles: true, reservedSize: 40),
35            ),
36          ),
37          borderData: FlBorderData(show: false),
38          lineTouchData: LineTouchData(
39            touchTooltipData: LineTouchTooltipData(
40              getTooltipItems: (spots) => spots.map((s) {
41                return LineTooltipItem(
42                  s.y.toStringAsFixed(0),
43                  const TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
44                );
45              }).toList(),
46            ),
47          ),
48          lineBarsData: [
49            LineChartBarData(
50              spots: spots,
51              isCurved: true,
52              color: lineColor,
53              barWidth: 3,
54              dotData: const FlDotData(show: false),
55              belowBarData: BarAreaData(
56                show: true,
57                color: lineColor.withOpacity(0.1),
58              ),
59            ),
60          ],
61        ),
62      ),
63    );
64  }
65}

Above the KPI GridView, add a Row with a ChoiceChips widget. Options: 'Today', '7 Days', '30 Days'. Bind the selected value to a Page State variable called selectedRange (String, default '7 Days'). On the ChoiceChips On Changed action: first, update Page State selectedRange to the new value. Then use a Custom Action or conditional logic to compute the start date: 'Today' = start of today, '7 Days' = 7 days ago, '30 Days' = 30 days ago. Update a Page State variable filterStartDate (DateTime). Both the KPI card Backend Query and the chart Backend Query should use filterStartDate as the where clause: date >= filterStartDate. For KPI comparison: query the two most recent documents within the range for the card values, and query the document just before the range start for the previousValue. When selectedRange changes, both queries automatically re-execute because they reference the Page State variable. The chart query fetches all documents within the range ordered by date ascending.