Here is my app for the test:
During the test i will create two screens to display the moving logo, one of them uses the
const constructor of
And the other one without the
The logo is wrapped inside a
AnimatedPositioned widget, and its position is updated once per second.
Then we run the app by using the
--profile flag, and inspect the “performance” and “memory” tab in Dart DevTools.
In each round of the test, I will increase the number of logos in the screen, to study the performance difference with or without using the
Modern devices are too powerful, I will run the test on a fairly old device: Sony Xperia Z2. Actually if the app hits 60 frames per second on this device easily, it proves that Flutter is really fast.
Time to draw each frame
The time it takes to render each frame for 1000 logos is ~80ms, which is ~12.5FPS. I think we may just stop there.
- The time to draw each frame keeps fluctuate, it is difficult to mark all numbers down and take an average. I took the number which appears the most in each case.
- The memory usage in each case keeps increasing, then it drops to a certain point after some time (when garbage collection is triggered), then it increases again. I took the number right after the drop.
We can see that with
const constructor, the FPS is ~8.4% higher, and the memory usage is ~20% less, in the case of 1000 logos. Although the numbers are quite significant, the “smoothness” I perceived during the test is very similar.
Also it is unrealistic to have 1000 widgets in a screen. For an average app there will only be dozens of widgets in each screen, and only a portion of them have the
const constructor. If you really need to render such a great number of objects, you better use
So if you are developing a new app, you may enable the
prefer_const_constructors rule in the linter, to remind yourself to use
const constructors. But for your old apps, it may not be necessary to spend time for it, as the performance gain perceived will not be huge.
If you think this test is not good enough or if you have a better idea on how to test it, please feel free to comment below.
Finally, here is the source code I used for the test, you may clone it and run the test on your devices.
Do you know you can clap up to 50 times for an article? Go give it a try!