AnimatedContainer, expensive or no?

[Scott Stoll]

I want to check to be very clear on something. I've heard it said by people who should know that the AnimatedContainer will try to animate every property it can, not just the ones that have changed. This would mean it would be a very poor choice for people to overuse it for things that could be done by other implicitly animated Widgets, such as AnimatedSize, AnimatedPosition, etc.

What I noticed is that it appears any and all properties that are not null would be animated regardless of if they've changed or not. Or am I misreading this?

/// The [AnimatedContainer] will automatically animate between the old and

/// new values of properties when they change using the provided curve and

/// duration. Properties that are null are not animated. Its child and

/// descendants are not animated.

Notice it does not say properties that are not null and have not been changed won't be animated. If that's true, then that would mean it might be best to avoid using the AnimatedContainer if there is not just another Widget, but even another combination of Animated Widgets that could be nested in order to animate the desired properties.

The main thing that comes to mind is if you have a container that needs to animate two properties but has other properties set you don't want to change. IE, a Container that has a color that does not change, but you still want to animate its size and opacity. Would it be better to use the AnimatedContainer or nest an AnimatedOpacity within an AnimatedSize, as shown here?

AnimatedSize(
  vsync: this,
  duration: const Duration(seconds: 2),
  alignment: Alignment.bottomLeft,
  child: AnimatedOpacity(
    duration: const Duration(seconds: 2),
    opacity: _opacity == 1.0 ? _opacity = 0.1 : _opacity = 1.0,
    child: Container(
      height: _height,
      width: _width,
      color: Colors.blue,
      ...

[Remi Rousselet]

What I noticed is that it appears any and all properties that are not null would be animated regardless of if they've changed or not. Or am I misreading this?

There's a single AnimationController shared between all properties.

So if at least one property is animating, technically all of them are.

But while it sounds bad, it's not.

It's only the Tween part that is needlessly evaluated, which are just simple math operations.

Whereas if we used AnimatedX + AnimatedY, each would use a unique AnimationController.

I haven't made any benchmark. It could be interesting to see it in detail.

My guess would be that having a single AnimatedContainer is more efficient than having multiple AnimatedWhatever

[Scott Stoll]

Good points Remi, thanks!