Flutter useAnimationController hook doesn't rebuild widget

Issue

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.

Solution

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

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

Answered By – Ben Baldwin

Answer Checked By – Katrina (FlutterFixes Volunteer)