Search code examples
flutteranimationstatefulwidget

Differences between AnimatedBuilder and StatefulWidget in Flutter?

From my point of view, all animations continuously render the widget with some often-changed value. For example, a spinning hand on a clock has a value called 'angle' to indicate its position.

In Flutter, it seems that StatefulWidget is enough for it. My question is:

Solution

  • I'll assume that AnimationBuilder is AnimatedBuilder because there is no such class as AnimationBuilder in the Flutter SDK.

    Short answer

    There are no differences besides the class names and the parameters.

    Long answer

    In Flutter, it seems that StatefulWidget is enough for it.

    You are right.

    What functions do AnimatedBuilder/AnimatedWidget have?

    Nothing special, they are classes that exists only to wrap common/boilerplate code, see:

    • AnimatedWidget: flutter/lib/src/widgets/transitions.dart is simply a StatefulWidget that takes a listenable and triggers the setState whenever the listanable notifies a change.
    • The AnimatedBuilder: flutter/lib/src/widgets/transitions.dart is a subclass of ListenableBuilder which is a subclass of AnimatedWidget (!), the only difference is that AnimatedBuilder uses your callback as the build method of AnimatedWidget.

    That being said, lets go to the code:

    • AnimatedBuilder is simply a StatefulWidget that uses your callback function (builder: (...) { }) as build method. It also triggers setState everytime the Listenable (animation) notifies a change.
    Widget build(BuildContext context) {
  return Center( // The [Center] widget instance will not rebuild.
    child: AnimatedBuilder(
      animation: animation,
      builder: (context, child) {
        return /* Widge tree that will rebuild when [animation] changes. */;
      },
    ),
  );
}
    • The equivalent code using AnimatedWidget is:
    Widget build(BuildContext context) {
  return Center( // The [Center] widget instance will not rebuild.
    child: MyAnimatedWidget(animation: animation),
  );
}

// ...

class MyAnimatedWidget extends AnimatedWidget {
  const MyAnimatedWidget({required Listenable animation}) : super(listenable: animation);

  Widget build(BuildContext context) {
    return /* Widge tree that will rebuild when [animation] changes. */;
  }
}

    What are the differences between AnimatedBuilder/AnimatedWidget and StatefulWidget?

    As I said, there is no semantic or real difference. AnimatedWidget and AnimatedBuilder are only abstractions of StatefulWidget.