Best place to create and keep the animation objects in Flutter? - performance

Question

If I want to define a custom Animation driven from the AnimationController, which is the best place for doing that?
In case if animation isn't in the same Widget with the controller and the latter is just passed down to it as an argument, it's totally clear that the best place are final class fields, as the animation will be computed on class creation, not in build method. And there's even an example of code implying that.
In the second case, we can have the controller and the driven animations inside the same class. In this case it's not clear for me, which is the best place to initialize my animations:
To make the a class fields and create them in initState
Or to define them as a final local variables in build method
Is there any real difference in performance between these to options?
See the code examples below:
#1
class _AState extends State<A> with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<Color> _animation;
#override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: const Duration(milliseconds: 300));
_animation = ColorTween(begin: Colors.black, end: Colors.white).animate(_controller);
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animation,
builder: (BuildContext context, Widget child) => //...,
);
}
}
#2
class _BState extends State<B> with SingleTickerProviderStateMixin {
AnimationController _controller;
#override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration:const Duration(milliseconds: 300));
}
#override
void dispose(){
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
final Animation<Color> animation = ColorTween(begin: Colors.black, end: Colors.white).animate(_controller);
return AnimatedBuilder(
animation: animation,
builder: (BuildContext context, Widget child) => //...,
);
}
}

Answer 1

If I want to define a custom Animation driven from the AnimationController, which is the best place for doing that?
from the performance perspective, it's absolutely obvious that storing animation objects as class fields is better than having them as build methods variables
Is there any real difference in performance between these to options?
it depends
actually, sometimes it wouldn't have any difference at all, if your widget will not be very often rebuilt, so Animation objects will not be often reinstantiated - in these cases you can safely neglect the ideal approach in favor of:
shorter syntax
better development experience
by better development experience i mean that, for example if you may want to play a bit with parameters of your animation. you can do with hot-reload, if you construct animations in build method, which is not possible if you create animations in initState
however, assume, you plan to use such widget inside ListView, or you just find that you often call setState - in this case you will unarguably want to optimize each item build method as much as possible, and this is one of the most effective ways to save a lot of performance and memory resources