In Flutter, why stateless children without keys can still work?

Question

I'm learning flutter concept of widget key by this post. I'm confused by the fact that even there is no key in the two stateless child widgets, still they can swap places correctly. Why? Isn't the key is the only way the parent to track which child is which?(so that it can swap their locations). Please checkout the code in dartpad

Answer 1

While waiting for a better answer, I've kinda figured out what has happened out there(As someone new to flutter, I could be wrong):

In stateless case, when you swap the widgets, three facts occur: (1)the two widget instances do have changed the location in the widget tree, but (2)the corresponding element tree stay still(This is because every corresponding widget types has no change). (3)The only thing changed in the element tree are the references to the widgets from the elements(to reflect the order changes in the widget tree). Since stateless widget update the screen all by the information of itself(no external state), this make the swap correctly shown on the screen.

In the case of statefull without key, when you swap the widgets, things happened identically to the above stateless case, ie., all the three facts occur again. But why there is no swap shown on the screen? That's because for stateful widgets, screen updating depends on external objects(ie., states) associated with the corresponding element in the element tree. So even though the widget instances do swaped locations(blue,red --> red,blue), flutter still paint them as (blue,red) since this is the order in the element tree(which never change).

In the case of stateful with key, only the first fact of the three occurs. The other two are not true anymore. What happened here is that the element tree did changed according to the changes of the widget tree. It achieves this by matching the key and the type on the two sides. After this, the swap shows correctly on the screen, since the elements do change from (blue,red) to (red,blue). Remember, element tree, not the widget tree, is boss here. widget tree is just a set of configuration and element tree is the guy who is in charge of painting on the screen.

There's still a puzzle left to me. In stateful cases without a key, Flutter call the build method of the state object everytime a swap happens. But with a key, the build has never been called. why? I guess that's because the references of the element tree changed. Ie., every time a reference changed, flutter call build to rebuild the state of the corresponding widget. On the other hand, if there is a key, the references never change. So it's no need for flutter to rebuild the state.

Looking forward someone can confirm my understanding.