How animated_shapes Animates Polygons in Flutter
Understand how animated_shapes package works briefly
I recently launched brand new package on pub.dev - animated_shapes. It has a single widget for you - AnimatedPolygon which is designed for animating polygons by morphing between two sets of points-making complex geometric transitions effortless and highly customizable. It simply morphs one shape to another.
What I am most excited about is how clean the API is for you to use. It is just like your other animated widgets - AnimatedContainer, AnimatedPositioned, AnimatedOpacity, etc.
The deep dive is divided into 2 parts, this posts explains the general idea of how it works under the hood and how you can leverage its architecture for your own projects. The 2nd part would be more about how a custom implicit animated widget can be created and how I use it to create AnimatedPolygon widget.
Core Concept: Point-Based Polygon Animation
At its core, animated_shapes animates polygons by interpolating between two lists of Offset points. Each point in the source polygon is matched with a corresponding point in the destination polygon. During the animation, each point moves smoothly from its start to end position, creating a morphing effect between shapes.
Key Features
Custom Polygon Shapes: Define any polygon by specifying its vertices as a list of
Offsetpoints.Full Paint Control: Pass your own
Paintobject to customize fill, stroke, gradients, and more.Flexible Sizing and Timing: Set the widget’s size and animation duration to fit your UI.
Simple API: Minimal setup-just provide the points, paint, size, and duration.
How It Works
1. AnimatedPolygon Widget
The main widget, AnimatedPolygon, takes the following parameters:
points: A list ofOffsetpoints defining the target polygon.paint: APaintobject for rendering.size: The size of the widget’s canvas.duration: The duration of the morph animation1.
2. State Management and Animation
AnimatedPolygon is a ImplicitlyAnimatedWidget just like any other implicit animated widget like AnimatedOpacity, AnimatedContainer, AnimatedPositioned etc. It interpolate between the current and new set of points. When the points parameter changes, the widget triggers an animation from the previous set to the new set.
Read more about technical deep-dive in next article.
3. Interpolating Points
The interpolation logic ensures each corresponding point in the two polygons animates smoothly. If the number of points differs, the package can pad the shorter list so each point has a counterpart, avoiding visual glitches during morphing.
4. Rendering
The widget uses a custom CustomPainter to draw the animated polygon on a Canvas. The painter receives the interpolated points and draws a path connecting them, filled or stroked according to the provided Paint.
Example: Shape Switcher
You can find the sample code on the https://pub.dev/packages/animated_shapes.
This example enables users to morph between four different shapes interactively, demonstrating the package’s flexibility and ease of use.
Here is a glimpse of what you can achieve with this package.
Architecture & Extensibility
Tweening: Uses custom tweens for point interpolation, ensuring smooth transitions.
CustomPainter: Handles efficient, flicker-free rendering.
Stateless API: The widget manages its own animation state, so you can focus on the UI logic.
Composable: Can be nested, combined, or embedded in any widget tree.
Advanced Usage & Next Steps
Custom Curves: Future versions may support custom animation curves for more dynamic effects.
Non-Convex & Complex Shapes: The package is designed to handle any polygon, but best results are achieved when the point order is consistent between shapes.
Community Feedback: Contributions, bug reports, and feature requests are welcome to help shape the roadmap.
Support for curved shapes: Arcs and Circles work is under-progress.
3D shape animations
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.
Try it out, explore the codebase, and let your UI come alive with geometric motion!
For more details, see the package documentation and the visual demo in the GitHub repository.
