AnimatedPolygon: Stateless by Design

How the AnimatedPolygon widget achieves smooth animations while remaining stateless in your widget tree.

Introduction: The Power of animated_shapes

Recently on TechFront, I wrote about how polygons are animated in animated_shapes package. The package lets you animate between any two polygons by simply providing their points, making it easy to add expressive, geometric transitions to your UI.

How animated_shapes Animates Polygons in Flutter

If you missed the previous article, I covered the motivation behind animated_shapes, its core features, and how to get started with basic and interactive shape morphing. Check it out for an overview and practical usage examples.

In this follow-up, I want to dive deep into one of the most interesting architectural choices in animated_shapes: how the core widget, AnimatedPolygon, achieves smooth animations while remaining stateless in your widget tree.

---

AnimatedPolygon: Stateless by Design

A common question about animated_shapes is:
“How does AnimatedPolygon animate polygons if it’s not a StatefulWidget?”

The answer lies in the clever use of Flutter’s animation architecture.

StatelessWidget + AnimatedWidget = Stateless Animation

If you look at the animated_polygon.dart source, you’ll see that AnimatedPolygon extends ImplicitlyAnimatedWidget, not StatefulWidget:

class AnimatedPolygon extends ImplicitlyAnimatedWidget {
  // ...
}

This is a key Flutter pattern for building custom animated widgets that are stateless from the user’s perspective, but still manage animation state internally.

How Does It Work?

• ImplicitlyAnimatedWidget is the base class for widgets like AnimatedContainer, AnimatedOpacity, etc.

• When any property of an ImplicitlyAnimatedWidget changes (like the points in AnimatedPolygon), Flutter automatically triggers an animation from the old value to the new value85.

• The actual animation state is managed by the associated AnimatedWidgetBaseState, not by you or the widget’s user6.

In AnimatedPolygon:

• The widget itself is stateless: it just describes what you want (the target points, paint, size, duration).

• Internally, it creates an _AnimatedPolygonState (which extends AnimatedWidgetBaseState<AnimatedPolygon>).

• This state class uses a custom Tween<List<Offset>> to interpolate between the old and new points.

• The animation runs automatically whenever the points property changes.

Why Is This Better?

• Cleaner API: No need for manual controllers or state management in your widget tree.

• Predictable: Behaves just like other Flutter animated widgets.

• Declarative: You describe the end state; Flutter handles the animation.

Example: How It’s Used

You simply declare:

AnimatedPolygon(
  points: myPoints,
  paint: myPaint,
  size: Size(200, 200),
  duration: Duration(seconds: 1),
)

Whenever you update myPoints, the widget animates from the current shape to the new one-no extra code or state management required.

Under the Hood: Key Snippet

From the code (see here):

@override
_AnimatedPolygonState createState() => _AnimatedPolygonState();

class _AnimatedPolygonState extends AnimatedWidgetBaseState<AnimatedPolygon> {
  ListTween? _pointsTween;

  @override
  void forEachTween(TweenVisitor<dynamic> visitor) {
    _pointsTween = visitor(
      _pointsTween,
      widget.points,
      (dynamic value) => ListTween(begin: value as List<Offset>),
    ) as ListTween?;
  }

  @override
  Widget build(BuildContext context) {
    final points = _pointsTween?.evaluate(animation) ?? widget.points;
    // ... painting logic ...
  }
}

• The ListTween smoothly interpolates between the old and new list of points.

• The animation is managed internally by Flutter.

---

Summary

• AnimatedPolygon is not a StatefulWidget-it’s an ImplicitlyAnimatedWidget.

• Animation state is managed internally by Flutter, not by you.

• You get a clean, declarative API for animated polygons, just like other built-in Flutter animated widgets.

This design keeps your UI code simple and idiomatic, while still delivering smooth, customizable polygon morphing animations.

If you want to see this in action, check out the visual demos in the GitHub README or revisit the previous article for usage examples. In upcoming articles, I’ll explore more advanced customization and animation techniques with animated_shapes - arcs and 3D shapes.

animated_shapes makes it trivial to add expressive, animated polygons to your Flutter apps-whether you’re building playful UIs, interactive data visualizations, or creative transitions.