Flutter Performance Profiling — Jank issue

Generate performance metrics and record the timeline by integration tests

Evan Fang

--

I’ve been looking for a way to monitor the app performance by generating the metrics automatically for each build. Thus I can make sure any improvement does enhance the app.

Performance issues can be divided into many categories, including speed, memory, app size, and energy. Today, let’s focus on the speed issue(jank) and find a way to trace them. According to the official documentation, there are 2 ways to achieve it:

Table of contents

  1. Firebase Performance SDK
  2. Integration Test
    2.1 How to run it?
    2.2 Results
    2.3 Important metrics
    2.4 Troubleshooting
  3. References
    3.1 How to write the integration test?
    3.2 Metrics

Firebase Performance SDK

A fast way to trace performance is to leverage Firebase performance SDK. Only need to add the SDK to your project, and let it handle all the rest. (Before you begin, remember to configure and initialize Firebase in your Flutter project.)

flutter pub add firebase_performance

Here is the introduction of Firebase Performance SDK.

You can check out the metrics on the Firebase Performance dashboard. There are several data related to your app’s lifecycle, such as app start time, app in background time, app in foreground time.

Screenshot of Firebase Performance console

On Flutter, automatic screen rendering performance monitoring is not possible for individual Flutter screens. A single view controller encapsulates your entire Flutter application natively so the underlying native Firebase SDK is not aware of screen transitions.

However, according to the documentation, a big problem is that Firebase cannot monitor Flutter screens automatically. Because slow rendering…

--

--

Evan Fang

An Android/Flutter engineer at LINE Corporation.