Container auto-rotates itself before reversed TransformRotate

Viewed 30

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
    );
  }
}

0 Answers
Related