Skip to main content

Flutter Firebase Performance Examples

Flutter Firebase Performance - How To Examples

Introduction​

Flutter is a popular cross-platform framework for building mobile applications, and Firebase is a comprehensive platform for building, managing, and scaling mobile and web applications. Firebase Performance Monitoring is a feature of Firebase that allows you to measure the performance of your app on real devices.

In this tutorial, we will explore various examples of using the firebase_performance package in Flutter to monitor and improve the performance of your app. We will cover the installation process, initialization, and demonstrate how to track custom traces and network requests.

Installation​

To get started with Flutter Firebase Performance, you need to add the firebase_performance package as a dependency in your Flutter project. Follow these steps:

  1. Open your project's pubspec.yaml file.

  2. Add the following line under the dependencies section:

    firebase_performance: ^1.0.0

  3. Save the file, and run the following command in your terminal:

    flutter pub get

Now that you have installed the package, let's proceed to the examples.

Example 1: Initializing Firebase Performance​

To start using Firebase Performance, you need to initialize it with your Firebase project credentials. Follow these steps:

  1. Import the firebase_performance package in your Dart file:

    import 'package:firebase_performance/firebase_performance.dart';

  2. Add the following code to initialize Firebase Performance:

    FirebasePerformance.instance.isPerformanceCollectionEnabled = true;

    This enables the collection of performance data on the device.

Example 2: Tracking Custom Traces​

Firebase Performance allows you to track custom traces to measure the duration of specific operations in your app. Here's an example:

void performCustomOperation() {
  final Trace myTrace = FirebasePerformance.instance.newTrace('custom_trace');
  myTrace.start();

  // Perform your custom operation here

  myTrace.stop();
}

In this example, we create a custom trace named custom_trace and start and stop it around the custom operation. This allows you to measure the performance of the operation using the Firebase console.

Example 3: Tracking Network Requests​

You can also track network requests made by your app using Firebase Performance. Here's an example of tracking a network request:

void makeNetworkRequest() async {
  final Trace myTrace = FirebasePerformance.instance.newTrace('network_request');
  myTrace.start();

  final response = await http.get('https://example.com/api/data');

  myTrace.stop();
}

In this example, we create a trace named network_request and start and stop it around the network request. This allows you to measure the performance of network requests and identify any bottlenecks.

Example 4: Measuring App Startup Time​

Firebase Performance also provides a way to measure the time it takes for your app to start up. Here's an example:

void main() async {
  final Performance performance = FirebasePerformance.instance;
  final Trace startupTrace = performance.newTrace('app_startup');
  startupTrace.start();

  // Perform app initialization tasks here

  startupTrace.stop();
  runApp(MyApp());
}

In this example, we create a trace named app_startup and start and stop it around the app initialization tasks. This allows you to measure the time it takes for your app to start up and identify any areas for optimization.

Example 5: Enabling Debug Mode​

You can enable debug mode in Firebase Performance to get more detailed performance data during development. Here's an example:

FirebasePerformance.instance.setPerformanceCollectionEnabled(true);
FirebasePerformance.instance.setPerformanceCollectionEnabledInDebugMode(true);

By enabling debug mode, you can get more granular performance data, such as network response times, network error rates, and more.

Example 6: Customizing Metric Collection​

Firebase Performance allows you to customize which metrics are collected for your app. Here's an example:

FirebasePerformance.instance.setPerformanceCollectionEnabled(true);
FirebasePerformance.instance.setMetricsCollectionEnabled(true);

By enabling metrics collection, you can track additional performance data, such as CPU usage, memory usage, and screen rendering times.

Example 7: Customizing HTTP Metric Collection​

You can customize which HTTP metrics are collected by Firebase Performance. Here's an example:

FirebasePerformance.instance.setPerformanceCollectionEnabled(true);
FirebasePerformance.instance.setHttpMetricCollectionEnabled(true);

By enabling HTTP metric collection, you can track additional performance data, such as network response times, request and response sizes, and more.

Example 8: Setting Performance Attribute​

You can set custom attributes for your performance traces in Firebase Performance. Here's an example:

final Trace myTrace = FirebasePerformance.instance.newTrace('custom_trace');
myTrace.start();
myTrace.putAttribute('custom_attribute', 'value');

In this example, we set a custom attribute named custom_attribute with the value value. This allows you to add additional context to your performance traces.

Example 9: Logging Performance Events​

Firebase Performance allows you to log custom performance events to track specific operations in your app. Here's an example:

FirebasePerformance.instance.logEvent(name: 'custom_event', parameters: {
  'param1': 'value1',
  'param2': 'value2',
});

In this example, we log a custom event named custom_event with two parameters, param1 and param2. This allows you to track specific operations and their performance.

Example 10: Customizing Performance Monitoring URL​

You can customize the URL to which Firebase Performance sends its data. Here's an example:

FirebasePerformance.instance.setPerformanceCollectionEnabled(true);
FirebasePerformance.instance.setPerformanceCollectionUrl('https://example.com/performance');

By customizing the URL, you can send performance data to your own server or a different Firebase project.

Conclusion​

In this tutorial, we explored various examples of using the firebase_performance package in Flutter to monitor and improve the performance of your app. We covered the installation process, initialization, tracking custom traces and network requests, measuring app startup time, enabling debug mode, customizing metric collection, setting performance attributes, logging performance events, and customizing the performance monitoring URL.

Firebase Performance Monitoring is a powerful tool that allows you to identify and optimize performance bottlenecks in your Flutter app. By using these examples, you can start monitoring the performance of your app and make data-driven decisions to improve its responsiveness and user experience.