“This is the 10th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Functional view

So today we’re going to see how frame detection works, and as usual we’re going to see how frame detection works, and when we click on frame detection, we’re going to see a floating window, okay

The floating window is divided into two columns. The first column represents GPU thread and the second column represents UI thread.

The vertical axis represents time, and each graph is divided into three cells, each cell representing 16ms. If the graph exceeds one of these three lines, then the running frame rate is less than 60 frames

The horizontal axis represents frames, which are only updated during drawing, the bar represents the current frame, the green bar only moves during drawing, and the most recent 300 frames are drawn.

Of course, the current frame is not always green, but when the current frame is larger than 16ms, it turns red, and you need to check the code

The source code to view

Today’s code is in the Flutter_ume_kit_perf package, which also includes CPU detection. It is currently android only, so I won’t cover it later. Today’s code is in the performance. No too much code in the method, when the build directly call the PerformanceOverlay. AllEnabled ()

Widget build(BuildContext context) {
  return Container(
      alignment: Alignment.topCenter,
      margin: const EdgeInsets.only(top: 20),
      child: SizedBox(
          child: PerformanceOverlay.allEnabled(),
          width: MediaQuery.of(context).size.width));
}
Copy the code

Take a look at the PerformanceOverlay constructor

const PerformanceOverlay({
  Key? key,
  this.optionsMask = 0,
  this.rasterizerThreshold = 0,
  this.checkerboardRasterCacheImages = false,
  this.checkerboardOffscreenLayers = false,
}) : super(key: key);
Copy the code

This constructor has four main attributes and does not provide many attributes

optionsMask

A flag bit used for marking, with four flag bits

. / / the rasterizer, statistics PerformanceOverlayOption displayRasterizerStatistics. Index / / visualization rasterizer, statistics PerformanceOverlayOption. VisualizeRasterizerStatistics. Index / / display engine statistics PerformanceOverlayOption. DisplayEngineStatistics. Index / / statistical visualization engine PerformanceOverlayOption.visualizeEngineStatistics.indexCopy the code
rasterizerThreshold

Rasterized threshold, the SkPicture trace that the user captures for further analysis, defaults to 0

checkerboardRasterCacheImages

Check the cache of images

checkerboardOffscreenLayers

Check for unnecessary setLayer

conclusion

Well today’s source code view is over here, tomorrow will be the last issue of our UME series, if there is anything to see the source code please comment below, we look at the source code, learn together

As a primary student of Flutter, I hope you can give me more advice and discuss with me if there is any problem