I have a gradient container that i made to rotate 360 degrees, than rotate back 180, my problem is that when it needs to rotate back, right before starting the animation, it instantly rotates another 180 degrees, i believe to compensate for those 180 degrees missing from the reversed, but i would like it to not do that aditional rotation.
Visual Representation
My Code:
bool currentLocation = true;
class _loadingAnimationState extends State<loadingAnimation> with TickerProviderStateMixin {
late final AnimationController _spinningController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 500)
)..forward();
@override
void initState() {
super.initState();
_spinningController.addListener(() async{
if(_spinningController.isCompleted) {
await Future.delayed(Duration(seconds: 3));
_spinningController.reverse();
currentLocation = false;
} else if (_spinningController.isDismissed) {
await Future.delayed(Duration(seconds: 3));
_spinningController.forward();
currentLocation = true;
}
});
}
@override
void dispose() {
_spinningController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SpinningContainer(
controller: _spinningController,
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.red,
Colors.black
]
)
),
)
)
),
);
}
}
class SpinningContainer extends AnimatedWidget {
const SpinningContainer({
Key? key,
required this.child,
required AnimationController controller,
}) : super(key: key, listenable: controller);
final Widget child;
Animation<double> get _progress => listenable as Animation<double>;
@override
Widget build(BuildContext context) {
return Transform.rotate(
angle: currentLocation ? _progress.value * 2.0 * pi : _progress.value * 1.0 * pi,
child: child
);
}
}