How to Track the Performance of Your FlutterFlow App

In FlutterFlow go to Settings > Flutter Packages and add firebase_performance at the latest version. This package is separate from firebase_core and must be added explicitly. After adding it, go to your main.dart initialization (Custom Code > main function if you have one, or FlutterFlow's Firebase initialization flow) and confirm that Firebase is initialized before the app runs. Performance Monitoring auto-initializes when the package is present — no additional code is needed for automatic traces. Rebuild your app in Test Mode to confirm there are no package conflicts.

Navigate to Firebase Console > Performance > Dashboard. The Traces table shows three automatic trace types: _app_start (time from cold launch to first frame), _st_{PageName} (screen render per page), and network traces for every HTTP call your app makes. Click on _app_start and view the duration percentile distribution. The p50 (median) should be under 2 seconds; p95 should be under 5 seconds. Click on a specific page's screen trace and look for the 'Slow/Frozen frames' rate — above 1% slow frames means users are experiencing jank. Use the filters at the top to segment by device model, OS version, and country to pinpoint where performance is worst.

Automatic traces don't tell you why a screen is slow — just that it is. Add a custom trace to instrument your most complex operation. In FlutterFlow create a Custom Action called startPerfTrace and another called stopPerfTrace. The start action creates a named trace and starts it; the stop action stops it and records the duration to Firebase. Wrap these around your most expensive flow, such as loading a personalized feed, processing an image, or running a multi-step form submission. In the Firebase Console, your custom trace appears under Performance > Custom Traces with the same distribution and segmentation views as automatic traces.

1// Custom Action: perfTrace.dart
2import 'package:firebase_performance/firebase_performance.dart';
3
4// Store active traces — keyed by name
5final Map<String, Trace> _activeTraces = {};
6
7Future startPerfTrace(String traceName) async {
8  final trace = FirebasePerformance.instance.newTrace(traceName);
9  await trace.start();
10  _activeTraces[traceName] = trace;
11}
12
13Future stopPerfTrace(String traceName) async {
14  final trace = _activeTraces[traceName];
15  if (trace != null) {
16    await trace.stop();
17    _activeTraces.remove(traceName);
18  }
19}
20
21// Add custom metric to an active trace
22Future addTraceMetric(
23    String traceName, String metricName, int value) async {
24  _activeTraces[traceName]?.setMetric(metricName, value);
25}

Performance Monitoring tells you about slowness; Crashlytics tells you about crashes. Both together give you a complete app health view. In Firebase Console open Crashlytics and check three metrics: crash-free users rate (should be above 99.5% for a healthy app), crash count trend over the last 30 days, and affected users per issue. Click each issue to see the stack trace, affected device models, and the app version that introduced it. For performance-related crashes (out-of-memory, ANR — Application Not Responding), you will see them in both Crashlytics and as spikes in the Performance > Slow/Frozen frames view. Set up Crashlytics Velocity Alerts to receive an email when a new crash type affects more than 0.1% of your users in one hour.

Firebase Performance Monitoring supports threshold alerts that fire when a metric crosses a value you define. Go to Firebase Console > Performance > Alerts and create a new alert. Select the trace (e.g., _app_start), choose the metric (duration p90), set the threshold (e.g., alert when > 4000ms), and add your email. Create alerts for your three most critical traces: app start time, your highest-traffic screen, and your main Cloud Function's HTTP response time. Also go to Firebase Console > Functions > Dashboard and check the 95th percentile execution time for each Cloud Function. Functions taking more than 5 seconds regularly indicate a query or external API call that needs optimization.