In the desktop application I am working on, there is a need to display over a thousand small graphical elements on the screen. The user manipulates these nodes using the mouse and keyboard. Currently the nodes are represented in a long list of widgets that is a child within a widget. If the state of only one node in the list changes, I want to ensure that only the minimum of rebuilding takes place. Is there a way to minimise rebuilding when the grahical elements are in a list?
1 Like
How do you know if a widget needs rebuilding? Is it strictly spatial, or are there data relationships between nodes?
It is a wysiwyg editor, so anything selected or changed or moved would need to be updated. Elements can be connected, and they can be marked when necessary, so there is a change of the elements’s state. Other unconnected elements would need to be redrawn if they are in the way of other elements moving, but I don’t know if this happens through rebuilding at the Flutter level or redrawing at the Impeller level. I’ve read the Flutter tutorials on the three trees but not sure how to make it work with minimal rebuilding.
1 Like
Afaik, you can avoid re-build in this scenario only by using const widgets. But I’m sure that’s not practical in your case.
That said: build() is generally not expensive. And the state is not created anew as long as it’s the same widget at the same index of the list.
If you want and you really see performance problems from these rebuilds, you could try having several stacks (instead of one sttack with 1000 widgets, you have 2 with 500). But that definitely needs to be perf tested. It’s possible the effect would be negligible or you would trade the rebuild times for something worse (compositing?).
The ultimate solution, if you really have performance problems, is going lower than the widget layer. Create your own render object and such. You could have a look at how data table is implemented. It’s lower level than widgets, but still miles above something like Skia, all Dart, and well documented.