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.

score 8 · Accepted Answer · answered Apr 26 '21 at 20:29

8

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

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

answered Apr 26 '21 at 20:29

Ben Baldwin

427
1
6
13

Flutter useAnimationController hook doesn't rebuild widget

1 Answers1