Getting Started With Staggered Animations in Flutter | Kodeco

🎓 Courses & Articles
1

Animations in mobile apps are powerful tools to attract users’ attention. They make transitions between screens and states smoother and more appealing for the user. In this tutorial, you’ll learn how to implement animations in Flutter.

This is a companion discussion topic for the original entry at https://www.kodeco.com/31284650-getting-started-with-staggered-animations-in-flutter
2

Hi friend, thanks for the great and detailed post!. I have a question, do you know if i cant create a multi-property tween when one property is a color ? can we define the interpolate methods as well ?.

3

Hello @velkamhell,

I want to start by welcoming you to the community. Apologies for the delay in responding to this message. I will be tagging @sbel and following up to make sure your question is answered.

Thank you

4

Hi, sorry for the delay.

The difficulty if you wanted to implement it in the custom object example is that you should be able to implement *, + and - for the Color class which is not trivial (it probably doesn’t make sense).

For complex objects like Color, there are custom Tween classes like ColorTween in this case.

Just like this class, you can create a custom Tween in order to animate your properties.

Here is a modified version of the FadeAway class that includes a Color:

class FadeAway {
  final Offset offset;
  final double opacity;
  final Color color;

  const FadeAway(
    this.offset,
    this.opacity,
    this.color,
  );
}

Now, create a new class that extends Tween and override the lerp method:

class MyCustomTween extends Tween<FadeAway> {
  MyCustomTween({
    required FadeAway begin,
    required FadeAway end,
  }) : super(begin: begin, end: end);

  @override
  FadeAway lerp(double t) {
    if (begin == null || end == null) {
      // Handle begin or end null, here just throw
      throw "Cannot lerp between $begin and $end";
    }
    return FadeAway(
      Offset.lerp(begin!.offset, end!.offset, t)!,
      lerpDouble(begin!.opacity, end!.opacity, t)!,
      Color.lerp(begin!.color, end!.color, t)!,
    );
  }
}

Now you can use that Tween for your animations:

MyCustomTween specialTween = MyCustomTween(
  begin: FadeAway(Offset.zero, 0.0, Colors.blue),
  end: FadeAway(Offset(100, 100), 1.0, Colors.red),
);

Hope it helps!