I am trying to achieve story progress animations like in this GIF demo of Instagram.
Instagram loader animation
I am using flutter story display library
Here is the code I am trying when the user clicks on skip or next story.
Next story button click
AnimationController? _progressController;
late Animation<double> _animation;
_progressController = AnimationController(
duration: Duration.zero,
vsync: this,
);
_setAnimation();
void _nextStory() {
List<StoryCard> cards = widget.children[_storyIndex].children;
if (_cardIndex >= cards.length) return;
_progressController?.reset();
cards[_cardIndex].onDispose?.call(_cardIndex);
if (_cardIndex < cards.length - 1) {
_setStoryCardVisited(_storyIndex, _cardIndex, true);
_playStory(isCallVisit: true);
_isTapped = false;
cards[_cardIndex].onNext?.call(_cardIndex);
_setAnimation();
// _progressController?.forward();
} else {
_pageController
?.nextPage(
duration: const Duration(milliseconds: 250),
curve: Curves.easeOut)
.then((_) => cards[_cardIndex].onNext?.call(_cardIndex));
}
void _setAnimation() {
_animation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: _progressController!,
curve: Curves.easeOutBack, // Bounce forward effect
),
)..addStatusListener((status) {
if (status == AnimationStatuspleted) {
_nextStory();
}
});
}
Animated Container
AnimatedBuilder(
animation: widget.animation,
builder: (context, child) {
return Stack(
children: [
LinearProgressIndicator(
value: widget.animation.value,
backgroundColor: Colors.grey,
// color: Colors.white,
valueColor:
AlwaysStoppedAnimation<Color>(Colors.white),
),
],
);
},
)
Thanks in advance.