[firebase_performance] How to collect "Slow rendering" and "Frozen frames" timings for individual screens?

[DeepakSinghRawat]

According to the Firebase Performance Usage documentation

Automatic screen rendering performance monitoring is not possible for individual Flutter screens.

I want to collect these metrics on my own but not sure how to collect frames timings data for each screen.

I thought of using the addTimingsCallback

This API enables applications to monitor their graphics performance. Data from the engine is batched into lists of FrameTiming objects which are reported approximately once a second in release mode and approximately once every 100ms in debug and profile builds. The list is sorted in ascending chronological order (earliest frame first). The timing of the first frame is sent immediately without batching.

But I am not sure how to get the FrameTiming for a particular screen from this API.

I am thinking of logging the metrics to Firebase using the following approach:

• Create a RouteObserver to listen for any route changes just like the FirebaseAnalyticsObserver
• On app start or if any time a route change is detected, start Firebase performance trace and calculate Slow rendering and Frozen frames metrics according to Measuring Load time and Screen Rendering with Firebase Performance
• Also add a addPostFrameCallback which executes a function only one time after the layout is completed.
• Inside addPostFrameCallback stop the trace and log the metrics to Firebase

Please let me know how to collect "Slow rendering" and "Frozen frames" timings for individual screens. Also what's the correct way to detect a screen change so these metrics can be logged to Firebase?

[thipokch]

@DeepakSinghRawat have you had a go at this?