Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add some delay between AnimationController.repeat() in Flutter

I need to add some delay between each iteration of animation gets call to repeat. Something like the following image. enter image description here

I tried to do it by passing value to the period parameter of the repeat method but it was not what I expected.

_controller = AnimationController(vsync: this, duration: widget.period)
      ..addStatusListener((AnimationStatus status) {
        if (status != AnimationStatus.completed) {
          return;
        }
        _count++;
        if (widget.loop <= 0) {
          //_controller.repeat(period: Duration(microseconds: 5000));
          _controller.repeat();
        } else if (_count < widget.loop) {
          _controller.forward(from: 0.0);
        }
      });

I've also tried to add Tween with the animation. That didn't help either. Can you help me clarify where I went wrong?

AnimatedBuilder(
      animation: Tween<double>(begin: 0.0, end: 1.0).animate(
        CurvedAnimation(
          parent: _controller,
          curve: Interval(0.5, 1.0)
        ),
      ),
      child: widget.child,
      builder: (BuildContext context, Widget child) => _Shiner(
        child: child,
        direction: widget.direction,
        gradient: widget.gradient,
        percent: _controller.value,
        enabled: widget.enabled,
      ),
    );
like image 505
SUDESH KUMARA Avatar asked Oct 07 '20 03:10

SUDESH KUMARA


People also ask

What is animationcontroller in flutter and how to use it?

This article walks you through 3 examples of using AnimationController in Flutter. This example shows you how to use AnimationController in the simplest way. It creates an orange box whose size changes over time. Note: AnimationController linearly produces the numbers from 0.0 to 1.0 during a given duration by default.

How to add a delay in flutter?

If you want to add some delay or want to execute your code after a fixed time you can use Future.delayed in Flutter. Future.delayed(const Duration(milliseconds: 500), () { // DO SOMETHING HERE }); Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool

How to execute code after 5 seconds in flutter?

Future.delayed in Flutter. You can achieve the same result using Future.delayed also. See the code snippet given below. import 'dart:async'; Future.delayed(Duration(seconds: 5), { print("This code executes after 5 seconds"); }); Following is the complete example.


Video Answer


1 Answers

Thanks to @pskink Now it's working as I expected. All you have to do is repeat the controller yourself instead of trying to add delay to controller.repeat()

if(status == AnimationStatus.completed){
 Future.delayed(Duration(milliseconds: 5000),(){
   _controller.forward(from: 0.0);
 });
}
like image 167
SUDESH KUMARA Avatar answered Oct 07 '22 12:10

SUDESH KUMARA