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?

Solution

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.

Comments

[Mol0ko]

Hi! I guess multiple widgets is better than one big widget in terms of code style. As for efficiency and performance, you can measure it using performance view from devtools. But i guess there is no any significant difference. flutter.dev/docs/development/tools/devtools/performance