The Best Flutter Performance Tips you can Find!

Performance optimization is a very important topic in programming and in Flutter. But it’s often hard to optimize your app. That’s why I show you how to improve your performance drastically and how to measure your performance. Let’s get started!

Note: There are so many performance tips, that I wasn’t able to fit all of them inside this article. But, if you like this article and we reach 100 Claps, there will be a second part for sure!

How to measure your performance

As you may know, Flutter & Dart offer great tools, including the DevTools. They have developed an entire view just for performance. It’s simply called “Performance View” and consists of the parts:

Flutter frames chart (Flutter apps only)
Timeline events chart
CPU Profiler

I won’t give you a detailed introduction to the Performance View, simply because it’s not the main topic of this article.

In Flutter frames chart, you can track the following things:

UI
Raster
Jank (slow frame)
Shader compilation

The timeline events chart shows all event tracing from your application. They show up in a timeline, that can also be sent to your own Timeline events via dart:developer Timeline. You can click an event to view CPU profiling information in the CPU profiler below.

Performance View also has some Enhanced Tracing methods, including that you can track widget builds, layouts, and paints.

Source of this Chapter: https://docs.flutter.dev/development/tools/devtools/performance

The best performance tips

Now, we finally want to take a look at how we can improve our performance.

Use constant widgets

Okay, I am honest, this one is the most basic tip on this list. But it’s still very important, that’s why I will explain to you what the difference between a constant and a normal widget is. Constant widgets will initialize themselves at the compile time. But what’s the advantage of that? It avoids rebuilds. Compile time is when the app fully starts. That’s why the Widget won’t rebuild when your other widgets rebuild.

Use operators the right way

Operators are language-specific features in Flutter. It’s recommended to use operators like null-check operators, nullable operators and others, to reduce development time. It also improves the readability of the code.

Code source: https://blog.logrocket.com/performance-improvements-mobile-apps-flutter/

Split your widgets, but not into methods

Splitting your widgets into smaller widgets is a good practice to maintain code readability and code structure. But many people do this completely wrong. They split widgets into methods and call them. This is a very bad habit, and I will tell you why. When refreshing the big widget that calls all the small widgets (methods), all the widgets in the methods will be rebuilt. That is very bad and reduces performance on a bigger scale drastically. Split your widgets into real widgets (classes) and you won’t have this problem anymore!

Credit goes to Ismail Alam Khan, who is a great Flutter developer and taught me this in my early days.

Avoid StatefulWidgets as much as possible

This is a tip, especially for beginners. You may think: Why not always use StatefulWidget? It has all the features that StatelessWidgets have and can rebuild. That’s true, but because StatefulWidgetcan rebuild itself, it also decreases the performance. That’s why: Always use StatelessWidget and only if necessary StatefulWidget.