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.

Further reading & Conclusion

In this article, you have seen the best performance tips that are extremely useful.

Did you know that I have many tips like this? Check them out here.

In the following few articles, I will introduce more great tips & repositories. If you don’t want to miss this, I recommend you to follow me. I tried my best to collect the best performance tips that everyone likes. If you appreciate this work, I would be very grateful if you could support this quality content and give me some claps! If this article gets 100 Claps, I will introduce more Performance tips in the following articles!

Thanks for reading, have a great day!

Sources:

https://docs.flutter.dev/perf/best-practices

https://docs.flutter.dev/development/tools/devtools/performance

https://blog.codemagic.io/how-to-improve-the-performance-of-your-flutter-app./

https://www.bacancytechnology.com/blog/flutter-performance

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

--

--

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
Tomic Riedel

Tomic Riedel

3.7K Followers

Flutter, Dart & Appwrite Developer | Livelong learner | Happy about sharing my knowledge