Flutter useAnimationController hook doesn't rebuild widget

Question

I'm using the flutter hooks package to animate an element on screen, but I've obviously done something wrong seeing as the element doesn't rebuild to animate. this is the code I have.

class Ball extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final xController = useAnimationController(
      duration: Duration(seconds: 3),
      lowerBound: 0,
      upperBound: 2,
      initialValue: 1,
    );

    final yController = useAnimationController(
      duration: Duration(seconds: 3),
      lowerBound: 0,
      upperBound: 2,
      initialValue: 1,
    );

    useEffect(() {
      xController.repeat(reverse: true);
      yController.repeat(reverse: true);

      return () {};
    });

    return Align(
      alignment: Alignment(
        xController.value - 1,
        yController.value - 1,
      ),
      child: Container(
        width: 12,
        height: 12,
        decoration: BoxDecoration(
          color: Colors.grey[900],
          shape: BoxShape.circle,
        ),
      ),
    );
  }
}

When rendered, this widget is inside of a stack. No errors are thrown at either runtime or buildtime.

Answer 1

For anyone viewing this in the future, you have to do this

final xController = useAnimationController({ ... })
useAnimation(xController)