Flutter: Delayed Animation with TweenAnimationBuilder

Question

Hello flutter developers,

I want to create a delayed animation with list of Widgets (each resulting in a singleListTile === customized ListTile) and TweenAnimationBuilder .

I'm using Opacity so each item will fade in after some time. In my current solution the duration just streches, which is bad. My desired solution is a delay for each animation.

My goal is to have a very simple and efficient way to use a delay within TweenAnimationBuilder.

My guess is that a customized function or curve is necessary to simulate this kind of delay.

Please consider that i want to stay within or around TweenAnimationBuilder . I do not want to create StaggeredAnimations or other objects outside it.

Here is the current code:

Column buildContent(BuildContext context) => Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    for (var i = 0; i < itemList.length; i++)
      TweenAnimationBuilder(
          duration: Duration(milliseconds: 560 + 140 * i),
          tween: Tween<double>(begin: 0.0, end: 1.0),
          builder: (context, value, child) =>
              Opacity(opacity: value, child: child),
          child: singleListTile(itemList[i], context)),
  ],
);

In the image below you can see what happens in the code (left side) and what the desired solution (with delays) should look like.

I look forward to your creative responses.

Answer 1

I use another TweenAnimationBuilder to do delay animation.

TweenAnimationBuilder<double>(
        tween: Tween<double>(begin: 0, end: 1),
        duration: Duration(milliseconds: 100 * i),
        builder: (context, animatedValue, child) {
          if (animatedValue == 1) {
            return AnimatedChild;
          }
          return Container();
        },
      )

Answer 2

I found a solution that might answer this. However, it's not very customizable and maybe requires more tweaks:

Column buildContent(BuildContext context) => Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    for (var i = 0; i < itemList.length; i++)
      TweenAnimationBuilder(
          duration: Duration(milliseconds: 560 + 140 * i),
          curve: Curves.easeInCubic,
          tween: Tween<double>(begin: 0.0, end: 1.0),
          builder: (context, value, child) => Opacity(
              opacity: delayedProgress(animationValue, i),
              child: child),
          child: singleListTile(itemList[i], context)),
  ],
);

The function

...

  double delayedProgress(double animationValue, int i) =>
      ((animationValue * completedExercises.length.toDouble()) -
              (i / completedExercises.length))
          .clamp(0, 1)
          .toDouble();
...

The function basically forces values only in the range of 0 and 1 with clamp , is multiplied by animation.value and the itemList.length and is finally removed by the current index divided by the maximum length (for smoothness).