One big StatefulWidget or multiple small StatefulWidgets

Question

I have a UI that has 20+ small widgets that need to update simultaneously, while some widgets remain Stateless. I was wondering if it is more efficient to have the whole UI updated rather than having each one updated individually.

In a broader scope, should I always opt out to having multiple, small StatefulWidgets updated rather than the whole UI, regardless of the number of widgets, considering that the widgets will be updated simultaneously? If not, is there any good measurement I can use to know how should I make that decision?

Answer 1

Late reply but it might help someone.

TL;DR; Use multiple smaller widgets.

I'm just working on a game where player has some time based reward boxes to open.

I had a dilemma if I should create:

• one Timer in the "parent" stateful widget and pass down the time to stateless children.

• multiple timers in smaller stateful children widgets

You can see the performance results from dev tools (it was even better after I made some improvements).

Of course please keep in mind that every case might be slightly different and results may vary :)

Answer 2

From the performance perspective, it is always wise to update each widget individually when needed.

Suppose, you have consolidated all widgets into one. Now if you need to update just one single text(and suppose that was a single widget previously), Flutter has to update the whole big widget for just one minimal change. Though Flutter won't complain about that because Flutter is pretty fast in rerendering but it will depend on the mechanism of the widget itself which might result in frame skipping/lag issue.

In another case, if all widgets are separated with their own functionality, Flutter just needs to destroy the individual widget that needs updating and rerender it. So it is a lot faster to render one widget than rendering 20+ widgets at once.

I hope this answers your question.