Flutter Performance Tips
When I was building a new app, I realized I used every widget and built all the necessary functionalities, but I didn’t think about how my app would perform? Thus, I started searching for what I had to do to optimize the performance of my application and found one video.
I have finally found everything about the performance. In addition to that, the document contains some tips about best practices of flutter apps on the flutter main page (the link is here).
I will explain some tools you can use with your app and provide instructions on how to use them. Have a great read.
DO NOT WORRY GUYS, THE FLUTTER AND DART TEAMS MADE PERFECT OPTIMIZATION FOR US
- Flutter aims to provide 60 frames per second (fps) performance or 120 fps performance on devices capable of 120Hz updates.
- For 60fps, frames need to render approximately every 16ms.
- Every day with new updates flutter changes itself and improves performance
WHAT ARE THE TOOLS THAT WE NEED FOR INCREASING APP PERFORMANCE?
Performance View: The performance view offers timing and performance information for activity in your application. It consists of three parts, each increasing in granularity.
— Flutter frames chart (Flutter apps only)
— Timeline events chart
— CPU profiler
— It comes complex but we need to start to learn. You can learn it from here.
Benchmarking: You can measure and track your app’s performance by writing benchmark tests. The Flutter Driver library provides support for benchmarking. Using this integration test framework, you can generate metrics to track the following:
— Jank
— Download size
— Battery efficiency
— Startup time
LogRocket: Frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
The Flutter plugin for your IDE might be useful. In the Flutter Performance window, enable the Show widget rebuild information check box. This feature helps you detect when frames are being rendered and displayed in more than 16ms. Where possible, the plugin provides a link to a relevant tip.
Which components are expensive?
- Minimizing calls to saveLayer
- Avoid overly large single widgets with a large
build()function. Split them into different widgets based on encapsulation - Minimize the use of opacity and clipping
- Implement grids and lists thoughtfully when building a large grid or list, use the lazy builder methods
- Minimize layout passes caused by intrinsic operations
If your frames are rendering well under 16ms total in profile mode, you likely don’t have to worry about performance even if some performance pitfalls apply. However, you should still aim to build and render a frame as fast as possible. Why?
- Lowering the frame render time below 16ms might not make a visual difference, but it improves battery life and thermal issues.
- It might run fine on your device, but consider performance for the lowest device you are targeting.
- As 120fps devices become more widely available, you’ll want to render frames in under 8ms (total) in order to provide the smoothest experience.
Let’s Make It Easy
- Make use of constant widgets
- Avoid re-building widgets
- Make use of async/await
- Efficiently use operators
- Make use of interpolation techniques: The process of inserting variable values into placeholders in a string literal.
print(‘The word $text has ${text.length} letters’);
- ProGuard and keep rules: ProGuard is a tool to help minify, obfuscate, and optimize your code. It is not only especially useful for reducing the overall size of your Android application as well as removing unused classes and methods that contribute toward the intrinsic 64k method limit of Android applications.
