AnimatedBuilder class

A general-purpose widget for building animations.

AnimatedBuilder is useful for more complex widgets that wish to include an animation as part of a larger build function. To use AnimatedBuilder, simply construct the widget and pass it a builder function.

For simple cases without additional state, consider using AnimatedWidget.

Performance optimizations

If your builder function contains a subtree that does not depend on the animation, it's more efficient to build that subtree once instead of rebuilding it on every animation tick.

If you pass the pre-built subtree as the child parameter, the AnimatedBuilder will pass it back to your builder function so that you can incorporate it into your build.

Using this pre-built child is entirely optional, but can improve performance significantly in some cases and is therefore a good practice.

This code defines a widget called Spinner that spins a green square continually. It is built with an AnimatedBuilder and makes use of the child feature to avoid having to rebuild the Container each time.
class Spinner extends StatefulWidget {
  _SpinnerState createState() => _SpinnerState();

class _SpinnerState extends State<Spinner> with SingleTickerProviderStateMixin {
  AnimationController _controller;

  void initState() {
    _controller = AnimationController(
      duration: const Duration(seconds: 10),
      vsync: this,

  void dispose() {

  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      child: Container(width: 200.0, height: 200.0, color:,
      builder: (BuildContext context, Widget child) {
        return Transform.rotate(
          angle: _controller.value * 2.0 * math.pi,
          child: child,



AnimatedBuilder({Key key, @required Listenable animation, @required TransitionBuilder builder, Widget child })
Creates an animated builder. [...]


builder TransitionBuilder
Called every time the animation changes value.
child Widget
The child widget to pass to the builder. [...]
hashCode int
The hash code for this object. [...]
read-only, inherited
key Key
Controls how one widget replaces another widget in the tree. [...]
final, inherited
listenable Listenable
The Listenable to which this widget is listening. [...]
final, inherited
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited


build(BuildContext context) Widget
Override this method to build widgets that depend on the state of the listenable (e.g., the current value of the animation).
createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree. [...]
createState() → _AnimatedState
Subclasses typically do not override this method.
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. [...]
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a string representation of this object.
toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a string representation of this node and its descendants. [...]
toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a one-line detailed description of the object. [...]
toStringShort() String
A short, textual description of this widget.


operator ==(dynamic other) bool
The equality operator. [...]