Why use const in Flutter Dart?

You are just starting to learn Flutter, and you tried to create a simple project app. In the process, you found annoying commands like

“Use ‘Const’ with the constructor to improve performance. Try Adding the ‘const’ keyword to the constructor invocation”.

Why does it recommend me to use const? Does it really help to improve the performance? or can I ignore it?

The ‘const’ keyword in Flutter has sparked a debate within the community. Some developers are frustrated with the new linting rules that require them to use ‘const’ in various places in their apps and remove it where unnecessary, while others praise it as a tool for enhancing performance and optimization. In this article, I will share my knowledge and “explored” information that may help drive the point.

Why Should I Care About Const Keyword?

The const keyword is used when the value of the variable is known at compile-time and never changes. In other words, the compiler knows in advance what value is to be stored in that variable.

const num = 1;

// When compiled, the value of num is going to be 1 and it will not be changed later.

Then why the fuss then? If the const keyword just to indicate that the value will be constant, why can i just do the normal way i do? I do not have to use const keyword right? Well, you can do what your normally do as before, but actually there are some differences.

Const keyword is an indicator that tell the compiler “for this variable, it will never be changed in the life time of this code. Just create one copy and if it called, just refence it to the one that you copied before and do not create a new one”

Imagine Flutter have to deal with widgets and that widget does something specific and never change just like this code below.

class SomeWidget extends StatelessWidget {
 final double size;

SomeWidget({Key? key, required this.size}) : super(key: key);

Widget build(BuildContext context) {
   return Container(
     height: size,
     width: size,
     color: Colors.red,
     child: Text("Im a widget!")
   );
 }
}

If you can to create a hundreds of objects, it will be a waste of memory. You could just create one and then when you want to create a new object that have the same size, i could just look up in the cache and refence it right?

If you don’t however add the const keyword in front of the constructor, then even if it satisfies the conditions to be const, it will not be considered as such by Flutter and you can not initialize it with a const.

class SomeWidget extends StatelessWidget {
 final double size;

const SomeWidget({Key? key, required this.size}) : super(key: key);

Widget build(BuildContext context) {
   return Container(
     height: size,
     width: size,
     color: Colors.red,
     child: const Text("Im a widget!")
   );
 }
}

We can take an example to create the same object

a = const SomeWidget(size: 100);

b = const SomeWidget(size: 100);

a == b //returns TRUE

Since they are really pointing to the same object. If you have a const constructor, is because you want to make sure that the fields in the class (normally) never change and that’s why you have to define all the fields with a final keyword, else you have an error.

Why const Widgets are your Secret Weapon

What about widgets? Do I really have to use const too? Well, using ‘const’ widgets in Flutter can greatly enhance your app’s performance and efficiency. It results in faster, smoother, and more memory-efficient apps. Here’s how it achieves these benefits:

1. Accelerating Build Time: When you employ a ‘const’ widget, you’re essentially informing Flutter that this widget won’t change, allowing it to create the widget once and reuse it whenever necessary. This saves considerable time during UI rendering, as it avoids creating new widget instances when the framework rebuilds the widget tree. This, in turn, reduces CPU usage and speeds up widget rendering.
2. Minimizing Memory Usage: ‘Const’ widgets are not just time-savers; they also conserve memory space. In Flutter, every widget is an object, and objects consume memory. By using ‘const’ widgets, you generate a single instance of the widget object that can be reused each time the widget appears in the widget tree. This significantly reduces your app’s overall memory usage.
3. Eliminating Runtime Interruptions: Since ‘const’ widgets are built during compile-time, they are loaded into memory when your app launches. Consequently, these widgets are instantly available during your app’s runtime. There’s no need for on-the-fly object creation or garbage collection associated with these widgets. This results in smoother scrolling and animations, as these operations don’t need to compete with widget building tasks.
4. Predictability and Debugging: ‘Const’ widgets are immutable, meaning they can’t be changed once defined. This immutability adds predictability to your code, making your app more stable. It also simplifies debugging, as you can be certain that once a ‘const’ widget is created, its state remains unaltered, ruling it out as a potential source of state-related bugs.

When to Use the Power of const

Use const constructors on widgets as much as possible, since they allow Flutter to short-circuit most of the rebuild work. But keep in mind, that not all widgets are ripe for the const treatment. Only those widgets that don’t change and those with no mutable properties, it can be made const. In most cases, these are the stateless widgets that rely only on their constructor parameters.

References:

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

https://dev.to/pedromassango/flutter-performance-tips-1-const-constructors-4j41

https://medium.com/flutter-community/the-flutter-const-keyword-demystified-c8d2a2609a80

https://medium.com/nerd-for-tech/flutter-performance-analysis-of-const-constructor-d2a72fd8a043