How to measure the flutter performance and rendering time

Question

i am a new in flutter.What is mean?red bars.Is it bad?

question from:https://stackoverflow.com/questions/66055220/how-to-measure-the-flutter-performance-and-rendering-time

Answer 1

Performance is a serious concern for many developer, We have do lot of special attention on this part.

Performance is nothing but the if UI and GPU doesn't complete their work in 60ms its cause to performance issue

1. When your analysis the flutter application performance you must to launch the application in flutter profile mode

2. If your using the android studio it's under the run-> Flutter Run in profile mode or If your using the VsCode --> command: flutter run -d [deviceID] --profile

3. In VsCode open the DevTools and enable the --> show performance overlay

4. After enable the overlay it will show like below gif on your realtime device or emulator

6. There is two thing top I GPU and second one is UI

7. While checking you use case the both GPU and CPU shows Red line.

8. If it's show red line in both the GPU and UI its concerns you have to reduce the too much work on certain performing action in your application.

9. If UI alone showing too much red line that also need to consider to reduce the UI rendering in current screen of your application.

10. At last check the memory leak of your application in DevTools

11. Refer the flutter https://flutter.dev/docs/perf/rendering/ui-performance for reference too

12. https://flutter.dev/docs/perf