How to animate reversed icon in Flutter?

Question

Found out a strange problem when I was creating a rotation animation for an Icon.

I use RotationTransition to animate Icons.sync. And I also use Transform because I need a mirrored version of the icon. The results is strange - it is not rotating, but moving by circular trajectory and then breaking. Without Transform everything is OK.

How it works now (new clicks on the button doesn't start animation, only page loading starts it):

How it works without Transform (as expexted)

The animated icon widget code:

class _AnimatedSyncIconState extends State<AnimatedSyncIcon>
    with SingleTickerProviderStateMixin {
  late final AnimationController controller;
  late final Animation<double> rotateAnimation;

  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));
    rotateAnimation = CurvedAnimation(parent: controller, curve: Curves.linear);
    _animate();
  }

  @override
  void didUpdateWidget(final AnimatedSyncIcon oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.isActive != oldWidget.isActive) _animate();
  }

  void _animate() {
    if (widget.isActive) {
      controller.repeat();
    } else {
      controller.reset();
    }
  }

  @override
  Widget build(final BuildContext context) {
    return RotationTransition(
      turns: rotateAnimation,
      child: Transform(
        transform: Matrix4.rotationY(pi),
        child: const Icon(Icons.sync),
      ),
    );
  }
}

How to make it work properly with the mirrored icon?

Answer 1

you need one simple change, just transform your icon like this:

  @override
  Widget build(final BuildContext context) {
    return RotationTransition(
      turns: rotateAnimation,
        child: Transform.scale(
        scaleX: -1,
        child: const Icon(
          Icons.sync, 
        ),
      ),
    );
  }

now your icon will be mirrored and rotating correctly and you don't even need to import dart:math anymore