Image for post
Image for post

Flutter: Performance analysis of `const` constructor

Everyone says using const constructors improves the performance of your app, but how much? I haven’t found any analysis on the internet, so I decide to do it myself.

Image for post
Image for post
An app display a random moving Flutter logo

Method

During the test i will create two screens to display the moving logo, one of them uses the const constructor of Image widget:

const Image(
width: 100,
height: 100,
image: AssetImage('assets/logo.png'),
)
Image for post
Image for post
Performance overlay of Flutter

Testing device

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.

Image for post
Image for post
Running the app on Sony Xperia Z2

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.

Memory usage

Note

  1. 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.
  2. 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.
Image for post
Image for post
Memory usage chart

Conclusion

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.

Written by

A JavaScript/Node/Flutter developer who love technical stuffs.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store