How to Set Up a Custom Metrics Tracking System in FlutterFlow

Create a collection called metrics. Each document represents one business KPI. Fields: name (String, e.g., 'Monthly Revenue'), type (String enum: counter, gauge, percentage, currency), currentValue (Double), previousValue (Double), target (Double), unit (String, e.g., '$', '%', 'users'), category (String, e.g., 'Financial', 'Growth', 'Engagement'), lastUpdated (Timestamp), thresholdHigh (Double, optional), thresholdLow (Double, optional). Create a subcollection called metric_history under each metric document with fields: value (Double), timestamp (Timestamp). Add 5-6 sample metrics: Monthly Revenue ($45,000 target $50,000), Active Users (1,250 target 2,000), Churn Rate (4.2% threshold 5%), NPS Score (72 target 80), Weekly Signups (89 target 100), Support Tickets Open (23 threshold 30). For each metric, add 12-16 history documents representing the past 4 months of weekly snapshots.

Create a Component called MetricCard with Parameters: metricName (String), currentValue (Double), previousValue (Double), target (Double), unit (String), type (String). Layout: Container with white background, 16px padding, 12px borderRadius, and a subtle shadow. Inside, a Column with crossAxisAlignment start. First child: a Text widget showing metricName in bodyMedium with secondary color. Second child: a Row with the formatted current value in headlineMedium bold (use a Custom Function formatByType that formats currency with '$' prefix and commas, percentages with '%' suffix, and plain numbers with K/M suffixes) and a trend indicator — an Icon (Icons.trending_up in green or Icons.trending_down in red) based on whether currentValue is greater than previousValue, plus a Text showing the percentage change. Third child: a LinearProgressIndicator showing progress toward the target. Set value to (currentValue / target).clamp(0.0, 1.0) using a Custom Function. Set the color to green if above 80% of target, amber if 50-80%, red if below 50%. Fourth child: a Text showing 'Target: {formatted target}' in caption style.

1// Custom Function: formatByType
2// Return Type: String
3// Parameters: value (Double), type (String), unit (String)
4
5String formatByType(double value, String type, String unit) {
6  switch (type) {
7    case 'currency':
8      if (value >= 1000000) return '$unit${(value / 1000000).toStringAsFixed(1)}M';
9      if (value >= 1000) return '$unit${(value / 1000).toStringAsFixed(1)}K';
10      return '$unit${value.toStringAsFixed(0)}';
11    case 'percentage':
12      return '${value.toStringAsFixed(1)}$unit';
13    default:
14      if (value >= 1000) return '${(value / 1000).toStringAsFixed(1)}K';
15      return value.toStringAsFixed(0);
16  }
17}
18
19// Custom Function: calcProgress
20// Return Type: Double
21// Parameters: current (Double), target (Double)
22
23double calcProgress(double current, double target) {
24  if (target == 0) return 0.0;
25  return (current / target).clamp(0.0, 1.0);
26}

Add fl_chart to your project dependencies (fl_chart: ^0.68.0 in Custom Code settings). Create a Custom Widget called SparklineChart with parameters: dataPoints (List<JSON>, each with value as Double), lineColor (Color, default blue), height (Double, default 40). The widget renders a compact, minimal line chart with no axes, no grid, and no labels — just the trend line. Configure LineChartData with gridData show false, titlesData all hidden, borderData show false, and lineTouchData enabled false. Map dataPoints to FlSpot using the list index as x and the value as y. Set isCurved true, barWidth 2, dotData show false, and belowBarData with a subtle gradient fill. Wrap everything in a SizedBox with the height parameter. On the MetricCard Component, add the SparklineChart below the progress bar. Query the metric_history subcollection ordered by timestamp descending, limit 12, and pass the results as dataPoints. Set lineColor to match the trend direction: green if the latest value is above the earliest, red if below.

1// Custom Widget: SparklineChart
2import 'package:fl_chart/fl_chart.dart';
3
4class SparklineChart extends StatelessWidget {
5  final List<dynamic> dataPoints;
6  final Color lineColor;
7  final double height;
8
9  const SparklineChart({
10    super.key,
11    required this.dataPoints,
12    this.lineColor = const Color(0xFF2196F3),
13    this.height = 40,
14  });
15
16  @override
17  Widget build(BuildContext context) {
18    final spots = dataPoints.asMap().entries.map((e) {
19      return FlSpot(
20        e.key.toDouble(),
21        (e.value['value'] as num).toDouble(),
22      );
23    }).toList();
24
25    return SizedBox(
26      height: height,
27      child: LineChart(
28        LineChartData(
29          gridData: const FlGridData(show: false),
30          titlesData: const FlTitlesData(show: false),
31          borderData: FlBorderData(show: false),
32          lineTouchData: const LineTouchData(enabled: false),
33          lineBarsData: [
34            LineChartBarData(
35              spots: spots,
36              isCurved: true,
37              color: lineColor,
38              barWidth: 2,
39              dotData: const FlDotData(show: false),
40              belowBarData: BarAreaData(
41                show: true,
42                color: lineColor.withOpacity(0.1),
43              ),
44            ),
45          ],
46        ),
47      ),
48    );
49  }
50}

Create a page called MetricsDashboard. Add a Backend Query at page level that fetches all documents from the metrics collection ordered by category ascending. Below the AppBar, add a ChoiceChips widget with options: All, Financial, Growth, Engagement. Bind the selected value to a Page State variable selectedCategory (String, default 'All'). Below the ChoiceChips, add a GridView with crossAxisCount 2, spacing 12, and childAspectRatio 0.85. Generate children from the Backend Query results filtered by selectedCategory (or show all if 'All' is selected). Each child is a MetricCard Component with parameters bound to the document fields. Add a FloatingActionButton with an Icons.edit icon. On tap, navigate to a MetricUpdatePage where admins can select a metric from a DropDown, enter a new value in a TextField, and tap Update. The Update action writes the new value to the metric document (updating currentValue, setting previousValue to the old currentValue, and updating lastUpdated) and also adds a document to the metric_history subcollection.

Deploy a Cloud Function called checkMetricThresholds triggered by Firestore document writes on the metrics collection (functions.firestore.document('metrics/{metricId}').onWrite). When a metric document is updated, the function reads the new currentValue and compares it against thresholdHigh and thresholdLow. If currentValue exceeds thresholdHigh or drops below thresholdLow, the function sends a push notification to admin users via Firebase Cloud Messaging. The notification title is 'Metric Alert: {metricName}' and the body describes the threshold breach. In FlutterFlow, configure push notifications in the Settings panel. Create an admin_users collection or use a Firestore field isAdmin on user documents to determine who receives alerts. Additionally, log each alert to a metric_alerts collection with metricId, alertType (high or low), triggeredValue, threshold, and timestamp for audit history.

Deploy a scheduled Cloud Function called weeklyDigest that runs every Monday at 8 AM via functions.pubsub.schedule. The function reads all metrics documents, fetches the metric_history entry from 7 days ago for each metric, calculates week-over-week change, and compiles a summary. Format the summary as an HTML email using a template: metric name, current value, previous week value, change percentage with green/red color coding, and target progress. Send the email via a configured email service (SendGrid, Mailgun, or Firebase Extensions email). In FlutterFlow, add a DigestPreview page that shows the same weekly summary in-app. Use a ListView of MetricSummaryRow Components, each showing the metric name, current vs previous value, change arrow, and a mini progress bar. This page queries the same data the Cloud Function uses, giving admins an in-app preview of what the email contains.