Animate tab in Tab Bar when scroll/slide tabs - flutter

Question

I'm using flutter_animator 3.2.0 to implement animation when tapped on Tab Bar. Everything is doing fine but when scroll/slide to next Tab. The animation wouldn't work and I've tried with tab controller listener as well as listening to tabcontroller animation, but it wouldn't trigger the immediate playing of animation like when the TabBar is selected.
Edit:
https://imgur.com/a/qNNEQ2g as shown in here, when I tap on the Tab Bar, it animates nicely, while when I scroll/slide to another Tab, it doesn't work properly & instead it animates also the previous Index's tab. I would like to achieve the same way the animation plays (on tap) when scroll/slide to another Tab.
import 'dart:ui' as ui;
import 'package:flutter_animator/flutter_animator.dart';
class Playground extends StatefulWidget {
#override
_PlaygroundState createState() => _PlaygroundState();
}
class _PlaygroundState extends State<Playground> with TickerProviderStateMixin {
late TabController _tabController;
late final List<GlobalKey<AnimatorWidgetState>> _animKeys;
#override
void initState() {
super.initState();
_tabController = TabController(length: 4, vsync: this)
..animation!.addListener(_animationStatus);
_animKeys = List.generate(
4,
(index) => GlobalKey<AnimatorWidgetState>(),
);
}
#override
void dispose() {
_animKeys.forEach((key) {
if (key.currentState != null) {
key.currentState!.dispose();
}
});
super.dispose();
}
void _animationStatus() {
if (_tabController.animation!.status == AnimationStatus.forward) {
print('Going forward');
_animKeys[_tabController.index].currentState!.forward();
}
}
#override
Widget build(BuildContext context) {
List<Widget> _tabs = List.generate(4, (index) {
return ClipRRect(
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 100,
maxHeight: 55,
),
child: Tada(
preferences: AnimationPreferences(
duration: Duration(milliseconds: 1000),
autoPlay: AnimationPlayStates.None,
),
key: _animKeys[index],
child: CustomPaint(
painter: TabPainter(
animation: _tabController.animation!,
index: index,
),
child: Tab(
child: Text(
'Tab $index',
style: TextStyle(color: Colors.black),
),
),
),
),
),
);
});
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
elevation: 0,
title: Text(
'Tab Bar',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
),
),
centerTitle: true,
bottom: TabBar(
onTap: (index) => _animKeys[index].currentState!.forward(),
controller: _tabController,
labelPadding: EdgeInsets.only(top: 5.0, bottom: 2.0),
indicatorColor: Colors.transparent,
tabs: _tabs,
),
),
body: TabBarView(
controller: _tabController,
children: List.generate(
4,
(index) => FittedBox(
child: Text('Tab $index'),
)),
),
);
}
}
class TabPainter extends CustomPainter {
final Animation<double> animation;
final int index;
final tabPaint = Paint();
TabPainter({
required this.animation,
required this.index,
});
#override
void paint(ui.Canvas canvas, ui.Size size) {
if ((animation.value - index).abs() < 1) {
final rect = Offset.zero & size;
canvas.clipRect(rect);
canvas.translate(size.width * (animation.value - index), 0);
final tabRect =
Alignment.bottomCenter.inscribe(Size(size.width, 3), rect);
canvas.drawRect(tabRect, tabPaint..color = Colors.black);
}
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}