At the beginning

In your daily flutter development, do you encounter stutter or frame drops? While Flutter does a great job of building a nice UI so far, it can’t be used badly either

But how do you go back and find out the truth about Catton when it becomes apparent to you? In this case, DevTools is your best helper.

introduce

DevTools is a set of performance testing and bug debugging tools for Dart and Flutter. It is currently in preview form, but is under active development.

Using DevTools you can do the following:

  • Check the UI layout and state of the Flutter app
  • Diagnose UI lag performance problems in Flutter App
  • Source code debugging for the command line application of Flutter or DART
  • Debug memory problems in the Command line application of Flutter or Dart
  • View general logs and diagnostics for running Flutter or Dart command line applications.

In the following, I will give a brief description of DevTools with a use case in conjunction with my Flutter project

Load the DevTools

Devtools opens slightly differently depending on which compiler you’re using

Open it in AndroidStudio

In AndroidStudio, the place to open DevTools is here

Open it in VSCode

In VSCode, the steps to open DevTools are as follows:

First, run Debug > Start Debugging

Then search for devTools

Then open the

Open it on the command line

First make sure that your FLUTTER environment variables are properly configured

In the project directory, type on the command line:

flutter pub global run devtools
Copy the code

You should then see the following output:

Serving DevTools at http://127.0.0.1.9100
Copy the code

Then run it on another command line

flutter run
Copy the code

You’ll see something like this

Fill the following input box with the part of the circle in the figure

Then click “Connect”.

Using DevTools

After DevTools opens on the web page, it looks like this

Next, I’ll take a look at the various features of DevTools

Flutter Inspector

The Flutter inspection tool contains the following contents

Select Widget Mode

With this mode enabled, you can pinpoint the location of the selected control in the WidgetTree

Refresh Tree

You can use it to refresh the Widget tree

Performance Overlay

Performance chart presentation for switching BETWEEN GPU and CPU threads (it is recommended to test in release mode on a real machine)

Slow Animations

Slow down all animations

Debug Paint

Add visual debug hints to the rendering object to show its padding, alignment, spacers, and borders

Paint Baselines

Draw a displayable reference line for each RenderBox text

Repaint Rainbow

When the Widget is repainted, the color that wraps it changes

Debug Mode Banner

Remove the DEBUG banner in the upper right corner in DEBUG mode

Platorm:Android/iOS

Used to switch between different performance of the app on the two platforms, for example

This is about the Flutter Inspector. Here is the TimeLine

TimeLine

TimeLine displays the frame information of the Flutter. It consists of three parts

  • Frame rendering chart
  • Frame event chart
  • CPU analysis

Because the Debug mode of Flutter does not accurately show the actual rendering effect of Flutter, it is recommended to use real + Profile mode for testing

Code:

flutter run --profile
Copy the code

However, if you want to know the cause of flutter dropping frames and stashing, you can also use simulator + DEBUG because the rendering process is the same

In the figure, the bar chart represents the time consumed by the current rendering frame. A normal rendering should be less than 16ms per frame. Most of the bar charts in the figure are red, indicating that the rendering time is too high. Only one dot is blue, indicating that it meets the rendering requirements.

Because it is in debug mode, the above frame rate data cannot be used as the actual result. However, if you want to detect some actual stutters, it is ok to enter the frame detail chart to view it, which will be introduced in detail in the final optimization section.

Memory

It is used to observe and analyze the memory usage of app. It is also recommended to test in the real computer +profile mode

In the official documentation, each part of the image is explained in detail

Memory tools can help you visually analyze Memory usage, so that problems such as Memory leaks can be easily observed.

Performance

It is used to record and analyze the CPU information of an APP operation

Debugger

For debugging the app, because it is a very basic function, about debugging this part will not go into details

Logging

Used to display Dart runtime event logs from the framework level (for example, Flutter) and application level

These tools don’t have to be open on a web page, for example, they can be easily used to compile projects from Android Studio’s run button

So, now comes the optimization part

To optimize the

With a brief introduction to DevTools, how to optimize your app in the real world?

Here is a simple example

You can test your app rendering using Google’s Skia Debugger tool.

First run on the command line:

flutter run --profile --trace-skia
Copy the code

If there is no real machine, remove “–profile”

Record the address

Then, open a new command line window and run:

Flutter screenshot - type = skia - observatory - uri = http://127.0.0.1:59403/1OQax7zfd7A=/Copy the code

Next, SKP files are generated in the project root directory

Next, we can use the Skia Debugger tool provided by Google to perform the test

Open the debugger.skia.org/ address

Import the SKP file

Then you can see how each frame is drawn

Based on these situations, it is obvious to see if there is any improper order of rendering in the layout, and if so, you can adjust the layout (PS: there is no negative example in the above example, and the command of generating SKP file cannot run properly on some real machines, such as Meizu 16X).

For optimization, start with the drawing process of WidgetTree. You can reduce build times by reducing frequent global flushes; Use the RepaintBoundary to separate the layout and reduce the Paint scope for optimization purposes.

For details, you can go to the video address in the appendix, which I believe will be of great help to you;

The appendix

Reference:

Learn more about Flutter’s high-performance graphical rendering

Performance testing and theory of Flutter

If you can’t surf the Internet scientifically, you can go to station B to watch:

(Station B) Performance testing and theory of Flutter

(Station B) Take an in-depth look at Flutter’s high-performance graphical rendering

The project address

The Flutter project addresses used in this article are as follows:

flutter-todos