AnimatedWidget class

A widget that rebuilds when the given Listenable changes value.

AnimatedWidget is most commonly used with Animation objects, which are Listenable, but it can be used with any Listenable, including ChangeNotifier and ValueNotifier.

AnimatedWidget is most useful for widgets that are otherwise stateless. To use AnimatedWidget, simply subclass it and implement the build function.

This code defines a widget called Spinner that spins a green square continually. It is built with an AnimatedWidget.
class Spinner extends StatefulWidget {
  _SpinnerState createState() => _SpinnerState();

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

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

  void dispose() {

  Widget build(BuildContext context) {
    return SpinningContainer(controller: _controller);

class SpinningContainer extends AnimatedWidget {
  const SpinningContainer({Key key, AnimationController controller})
      : super(key: key, listenable: controller);

  Animation<double> get _progress => listenable;

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

For more complex case involving additional state, consider using AnimatedBuilder.

Relationship to ImplicitlyAnimatedWidgets

AnimatedWidgets (and their subclasses) take an explicit Listenable as argument, which is usually an Animation derived from an AnimationController. In most cases, the lifecycle of that AnimationController has to be managed manually by the developer. In contrast to that, ImplicitlyAnimatedWidgets (and their subclasses) automatically manage their own internal AnimationController making those classes easier to use as no external Animation has to be provided by the developer. If you only need to set a target value for the animation and configure its duration/curve, consider using (a subclass of) ImplicitlyAnimatedWidgets instead of (a subclass of) this class.

Common animated widgets

A number of animated widgets ship with the framework. They are usually named FooTransition, where Foo is the name of the non-animated version of that widget. The subclasses of this class should not be confused with subclasses of ImplicitlyAnimatedWidget (see above), which are usually named AnimatedFoo. Commonly used animated widgets include:



AnimatedWidget({Key key, @required Listenable listenable })
Creates a widget that rebuilds when the given listenable changes. [...]


listenable Listenable
The Listenable to which this widget is listening. [...]
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
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).
createState() → _AnimatedState
Subclasses typically do not override this method.
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree. [...]
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
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. [...]