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

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.

Answer 2

Depends on your needs

Keep in mind that everything has a price, try to use StatefulWidget only for the dynamic widget. I often use a single StatefulWidget because only on StatefulWidget we can have nice compact state management while using the stateless widget for the children's which doesn't need state management (stateless).

It's worth checking the flutter.dev again to refresh our perspective about how StatefulWidget works https://flutter.dev/docs/development/ui/interactive. Because if you have a concern about performance you also need to avoid using setState() for the small updates while your page contains a lot of children because every setState() fired, your widget tree would be rebuild.

And also if you are building more complex apps, check this out https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple this is way more efficient and performance-friendly because with the provider we can concentrate on the dynamic widget only and leave everything static even everything was written above StatefullWidget.