How can I see when a Widget rebuilds?

Question

Is there any trick to know that a widget has been rebuilt?

As a demonstration, i.e. if we randomly colored the widgets on every rebuild, it would look like this:

I'm learning BloC, so I want see widget rebuild status visually to mark sure my logic is correct. — CH Wing, Dec 24 '19 at 22:17

score 9 · Answer 1 · answered Dec 25 '19 at 01:30

Flutter actually has built-in functionality for exactly what you are trying to achieve in the DevTools inspector:

This is called the Repaint Rainbow and it can be enabled in Android Studio, i.e. IntelliJ, as demonstrated above or directly in Dart DevTools:

Repaint Rainbow

Shows rotating colors on layers when repainting.

^{From the linked article}

Notes

There can be many reasons for repaints and seeing a widget rebuild does not inherently mean that you triggered the rebuild as it can also come from somewhere else in the tree.
You cannot know if a widget has been rebuilt in code because that is against how the framework works - you can obviously catch any build or paint calls by integrating that into your build or paint function, but you should really not do that because builds and paints should be idempotent.

Thanks for your detailed answer, but I don't know why I cannot expect results (like a gif) in [flutter_timer](https://github.com/felangel/Bloc/tree/master/examples/flutter_timer), maybe because not using `StatefulWidget`? — CH Wing, Dec 25 '19 at 02:40
@CHWing I am afraid to say that I do not understand what you are trying to say. — creativecreatorormaybenot, Dec 25 '19 at 09:38

score 6 · Answer 2 · answered Oct 21 '20 at 14:26

6

If you use android studio you can open Flutter Performance and checked Track widgets rebuild in Widget rebuild stats

answered Oct 21 '20 at 14:26

Tokiniaina Eddy Andriamiandris

1,139
11
9

My Android Studio's Flutter Performance doesn't show the file name in the location it only shows the Line number . Any Fixes ?Thanks in Advance – Nithin Francis Nov 19 '21 at 18:41
This is an important tool and it is only available through IntelliJ IDE at the moment. – Alex.F Dec 14 '21 at 09:39

score 2 · Answer 3 · answered Dec 25 '19 at 06:32

2

Every time the widgets are rebuild ,the build() is called So You can write a print() in your build() and track when the widgets are getting rebuilt

answered Dec 25 '19 at 06:32

Guru Prasad mohapatra

1,809
13
19

score 0 · Answer 4 · answered Dec 24 '19 at 16:05

0

You can't know it, and should not build a word around to obtain that value yourself either.

This is anti pattern, as the number of times a widget rebuilt should never have an impact on the output.

answered Dec 24 '19 at 16:05

Rémi Rousselet

256,336
79
519
432

I agree. You might also want to check my answer regarding the random colors on rebuild :) – creativecreatorormaybenot Dec 25 '19 at 01:30
Isn't it affecting performance? I faced kind of the same problem - the ListView items are repainted each time one of the items is changed. And I can't really trace where it comes from which might be useful to understand how to prevent it. – mexanichp Oct 09 '20 at 14:28

How can I see when a Widget rebuilds?

4 Answers4

Repaint Rainbow

Notes