Flutterexperts

On the off chance that you are a mobile application developer, at that point, you may have comprehended what Firebase is. It’s a stage for developing mobile applications claimed by Google in 2014. It offers different highlights like an ML Kit and Cloud storage Authentication, which are significant for developing modern mobile apps. Additionally, It offers different administrations that incorporate performance monitoring, Google Analytics, and Crashlytics to direct you to upgrade the application quality.

In this article, We will have a look at how to use Firebase Performance Monitoring in a Flutter project through the help of Firebase.

Table of Contents:

Firebase Project Setup

Configuring for Andriod

Configuring For iOS

Firebase Performance Monitoring — Introduction

Implementation — Setup Configuration

What is a trace?

How to use in Flutter?

Monitoring network request

Conclusion

---

---

Firebase Project Setup

To use your Flutter application developer with the Firebase, you will have first to add a project or maybe create one.

• Open the Firebase console
• Now click the “Add project” option

• Now click the Project name

• You have anything, for example. What’s more, the Firebase will attach a one of a kind ID to the project name consequently.
• Now choose a Cloud Firestore location
• Now read and acknowledge the Terms and Conditions
• When done, look down and click “Create Project.”

The platform might take some time to go through your application. Once completed, then click the continue option to open the overview page of the project you made.

Configuring for Andriod

• Open the Firebase console, click on your project.
• It will take you to your project screen, click on the android icon.

You have to enter the package name, which is generally your application Id in your app-level build. Gradle. Add the other two optional fields if you wish to add them as well.

Now download the google-services.json. Move the downloaded google-serivces.json file into your Android app module root directory.

• Now add Firebase SDK.

Add your project level build.gradle file

dependencies {
    classpath 'com.android.tools.build:gradle:3.5.0'
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
classpath 'com.google.gms:google-services:4.3.3'
}

Add your project app-level build.gradle file

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.google.firebase:firebase-analytics:17.2.2'

}
apply plugin: 'com.google.gms.google-services'

• Click on Continue to console and wait for few seconds, and your application will be successfully added with Firebase.

Now you have added Firebase to the Flutter app successfully. In spite of having both the Flutter and Firebase from Google awesome,

Configuring For iOS

• Launch the setup wizard for iOS on the project overview page
• You will presently observe the setup wizard and add it to the iOS bundle ID. Check whether the register app is lit up then tap on it.
• Presently you should download the GoogleService — Info. plist config list and add it to the iOS project root file, then proceed the next.
• Simply go with the instructions and afterward include the Firebase SDK and continue the following.
• Make the changes needed in the AppDelegate as suggested by the setup wizard then choose next.
• Presently check the root folder to run the application. After some time, you may see the setup wizard showing that the application has been remembered for Firebase. Then choose “Continue to the Console” to finish the setup.
• Presently check the root organizer to run the application. After some time, you may see the arrangement wizard indicating that the application has been remembered for Firebase. At that point, pick “Proceed to the Console” to finish the arrangement.

Firebase Performance Monitoring

It is a service that encourages you to pick up an understanding of the presentation attributes of your iOS, Android, and web applications.https://www.youtube.com/embed/videoseries?list=PLl-K7zZEsYLmOF_07IayrTntevxtbUxDL

You utilize the Performance Monitoring SDK to gather execution information from your application, at that point survey and investigate that information in the Firebase comfort. Execution Monitoring encourages you to get where and when the presentation of your application can be improved with the goal that you can utilize that data to fix execution issues.

Implementation :

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:

firebase_performance: ^latest version

Step 2: Import

import 'package:firebase_performance/firebase_performance.dart';

Step 3: Run flutter packages get in the root directory of your app.

Step 4: Add the dependencies and Plugin

Add dependencies in the app/build. Gradle file.

dependencies {
  // ...
  implementation 'com.google.firebase:firebase-perf:19.0.7'
}

Add plugin in the app/build. Gradle file.

// Apply the Performance Monitoring plugin
apply plugin: 'com.google.firebase.firebase-perf'

Step 5: Add the Classpath

Add plugin in the build. Gradle file.

dependencies {

// To benefit from the latest Performance Monitoring plugin features,
      // update your Android Gradle Plugin dependency to at least v3.4.0
      classpath 'com.android.tools.build:gradle:3.4.0

// Add the dependency for the Performance Monitoring plugin
      classpath 'com.google.firebase:perf-plugin:1.3.1'  // Performance Monitoring plugin
    }

Note : Results of firebase performance will appear within 12 hours.

You can define your own traces and monitor network requests.

How is the application behaving?

Presently we should see the performance. According to the record, it can break down the application performance glitches that occur on a client’s device. Use trace to follow the performance of certain application parts and experience a summed up to see in the Firebase console. Stay aware of the application startup time and check the HTTP request without taking a shot at the code.

What is a trace?

A follow can record the information between two distinctive execution fragments in your application.

How to use Flutter?

• You can make use of it by initializing tracing.

final Trace trace = _performance.newTrace("test");

• Then, you have to start the trace.

myTrace.start();

• Then, you need to stop the trace.

myTrace.stop();

• You can also use your logic in between the traces.

myTrace.incrementMetric("metric1",16);
myTrace.putAttribute("favorite_color", "blue");

---

Monitoring network request

Make use of the feature plugin that is available known as BaseClient

• Create a class that goes beyond the BaseClient

class _MetricHttpClient extends BaseClient {}

• You will have to override the send method of this class.

@override
Future<StreamedResponse> send(BaseRequest request) async {
}

• Create HttpMetric

final HttpMetric metric = FirebasePerformance.instance
        .newHttpMetric(request.url.toString() // Your Url, HttpMethod.Get);

• Begin the Http Metric

await metric.start();

• Stop the Http Metric

await metric.stop();

---

class _MetricHttpClient extends BaseClient {
  _MetricHttpClient(this._inner);

final Client _inner;

@override
  Future<StreamedResponse> send(BaseRequest request) async {
    final HttpMetric metric = FirebasePerformance.instance
        .newHttpMetric(request.url.toString(), HttpMethod.Get);

await metric.start();

StreamedResponse response;
    try {
      response = await _inner.send(request);
      metric
        ..responsePayloadSize = response.contentLength
        ..responseContentType = response.headers['Content-Type']
        ..requestPayloadSize = request.contentLength
        ..httpResponseCode = response.statusCode;
    } finally {
      await metric.stop();
    }

return response;
  }
}

When clicking our URL, we see some insights data:

Conclusion:

This article would serve as an Exploratory article for Firebase Performance Monitoring in Flutter and its working using Flutter.

I hope this blog will provide you with sufficient information in Trying up Firebase Performance Monitoring in Flutter in your flutter projects. We will describe how to use firebase performance monitoring and setup in our project, and you will use it in your flutter application for performance monitoring, So please try it!!!

❤ ❤ Thanks for reading this article ❤❤

---

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---