Does the animations array work?

[MiguelSOliveira]

On WarmupOverlay, there exists a prop called animations, which is an array. Just wondering if that means that we can pass multiple animations to that array and they are run sequentially/in parallel?

I can't seem to get it to work.

I think this is handled on warmup_routine.dart, where I see the following:

class _WarmupAnimationState extends State<WarmupRoutine> {
  int _animationIndex = 0;

  _onWarmupAnimationComplete() {
    if (_animationIndex < widget.animations.length - 2) {
      setState(() {
        _animationIndex += 1;
      });
    } else {
      widget.onComplete();
    }
  }

  @override
  build(context) {
    return WarmupAnimationData(
      onComplete: _onWarmupAnimationComplete,
      child: widget.animations[_animationIndex],
    );
  }
}

I dont understand this line, however if (_animationIndex < widget.animations.length - 2) { ?

Am I missing something?

Thanks for the package, btw!

[danReynolds]

Yea it's running them sequentially, I played around with parallel for things like multiple navigation simultaneously but it didn't seem do-able from my modest understanding of Flutter. Instead I'd put multiple animations into one component and then run that entire component as one warmup animation if you wanted multiple animations warmed up in parallel. It looks like the line you linked is a typo though and should be

_animationIndex < widget.animations.length - 1`

I can fix that tonight.

[MiguelSOliveira]

I think that's not the only problem, from what I'm testing atm (maybe I'm wrong), but here:

class _WarmupAnimationState extends State<WarmupAnimation> {
  int _repeat;

  @override
  initState() {
    super.initState();
    print("InitState: ${widget.repeat}");
    _repeat = widget.repeat;
  }

  _onComplete(onComplete) {
    if (_repeat == 0) {
      onComplete();
    } else {
      setState(() {
        _repeat -= 1;
      });
    }
  }

  @override
  build(context) {
    return Builder(
      key: Key("warmup-animation-$_repeat"),
      builder: (innerContext) {
        final warmupAnimationData = WarmupAnimationData.of(innerContext);
        return widget.builder(
          innerContext,
          () => _onComplete(warmupAnimationData.onComplete),
        );
      },
    );
  }
}

It seems to me that the problem is that this initState is only being called once, even though my animations array has 2 elements, so what ends up happening is that, even though i have an array of animations where the first Animation has a repeat = 10 and the second has also a repeat = 10, since this initState is only setting the _repeat, once, it actually only ends up running only the first position in the animations array.

[danReynolds]

Yea that's because of the issue I showed above, it doesn't move on to the 2nd animation because

_animationIndex < widget.animations.length - 2

evaluates to 0 < 2 - 2. Once that fix to make it

_animationIndex < widget.animations.length - 1

is in I think it'll be fine. If you had 3 animations in the array then it should run twice, it's an off by one error i believe. Let me know if that's not what you're seeing

[MiguelSOliveira]

it isn't, no. I changed it to: if (_animationIndex < widget.animations.length - 1) {, and the problem still occurs. It does call the animation on the second position, but only once.

I'm still trying to navigate and understand the code, but I believe it is because the _repeat variable on the warmup_animation file, is set to 0, when the first position in the animations array ends its repetitions. So when we get to the second position, it reaches the build method of warmup_animation with the _repeat value of the last animation, if that makes sense ?

I'm not sure why the instances of warmup_navigation seem to be shared tho...

[danReynolds]

yea it should be distinct warmup_animation instances passed to the animations list so they shouldn't share the same repeat counter. I'll take a look this evening but that would be unexpected.

[MiguelSOliveira]

Thanks for your time dan, no rush.

Just a little more detail, I've managed to get it working by doing this on the warmup_animation:

class _WarmupAnimationState extends State<WarmupAnimation> {
  int _repeat;
  bool hasReachedZero = false;

  @override
  initState() {
    super.initState();
    _repeat = widget.repeat;
  }

  _onComplete(onComplete) {
    if (_repeat == 0) {

      if (!hasReachedZero) {
        _repeat = 10;
        hasReachedZero = true;
      }

      onComplete();
    } else {
      setState(() {
        _repeat -= 1;
      });
    }
  }

  @override
  build(context) {
    print("Build: $_repeat");
    return Builder(
      key: Key("warmup-animation-$_repeat"),
      builder: (innerContext) {
        final warmupAnimationData = WarmupAnimationData.of(innerContext);
        return widget.builder(
          innerContext,
          () => _onComplete(warmupAnimationData.onComplete),
        );
      },
    );
  }
}

This obviously only works in my case with 2 animations in the array, but it was just for testing purposes.

[reju1021]

@MiguelSOliveira if you set the variable 'hasReachedZero' to false like this in

`} else {

  setState(() {
    if(hasReachedZero && _repeat == 1)
      hasReachedZero = false;
    _repeat -= 1;
  });

}`

it's suitable for more than only two animations (I've tested it).