Adding a curve to animations in Flutter

Chaining transformation matrices

In a previous article, I showed how to do a slide-in animation. Each widget slid into place from below (or the side) using a Transform Widget in an AnimatedBuilder.

But what if you want to add a curve to the slide?

And that is what chaining transformation matrices is for.

If you have knowledge of transformation matrices already, you don’t need this article. Go read a good book with a cup of your beverage of choice next to you :)

Enjoy. [Created using Dall-E]

If not, you’ve come to the right place.

We will build on the code from the previous article. In our AnimatedTile, we used the Transform widget with Matrix4.translationValues. It allows us to specify the translation — a.k.a. movement — we want to move the widget x, y, and z.

// Wraps the child in a Transform with the given slide and
// an AnimatedBuilder with the given animation.
class AnimatedTile extends StatelessWidget {
  const AnimatedTile({
    super.key,
    required this.animation,
    required this.slide,
    required this.child,
  });

  final Animation<double> animation;
  final int slide;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: animation,
        child…