Creating animations in Flutter is really fun and easy, but there is one bad practice that might make those animations laggy: setState .

Bad Practice: AnimationController and setState

When using AnimationController in a StatefulWidget , you might be tempted to do the following:

void initState() {

_controller = AnimationController(

vsync: this,

duration: Duration(seconds: 1),

)

..addListener(() => setState(() {}));

}

To animate a Placeholder from left to right by 100 pixels:

Transform.translate(

offset: Offset(100 * _controller.value, 0),

child: Placeholder(key: Key('animated')),

),

This will animate the Placeholder by it will also rebuild all other widgets in the StatefulWidget :

Column(

children: [

Placeholder(key: Key('1')), // rebuilds

Placeholder(key: Key('2')), // rebuilds

Placeholder(key: Key('3')), // rebuilds

Transform.translate( // rebuilds

offset: Offset(100 * _controller.value, 0),

child: Placeholder(key: Key('animated')),

),

],

),

This is the build timeline[1]: