In Flutter, how to solve `AnimatedCrossFade` inefficient design?

I'd like to add to Rémi's answer that sometime after asking this question I've published a package to solve it, called AnimatedSizeAndFade:

https://pub.dev/packages/animated_size_and_fade

How does it compare to other similar widgets:

  • With AnimatedCrossFade you must keep both the firstChild and secondChild, which is not necessary with AnimatedSizeAndFade.

  • With AnimatedSwitcher you may simply change its child, but then it only animates the fade, not the size.

  • AnimatedContainer also doesn't work unless you know the size of the children in advance.


This is the expected behavior.

As stated by the dart team, you should expect the build method the be called at any times. build is designed to be cheap and without side effects.

The fact that a widget is built doesn't mean it's rendered on screen. Opacity with an opacity of 0 actually shortcuts the painting process (and have other optimizations when completely opaque).


If this causes a problem then you should instead use AnimatedSwitcher which plays an animation when its child is replaced.