How to use useSingleTickerProvider to create a widget that updates every frame?

[elliotwaite]

I'm trying to create a widget that updates every frame, but I'm not sure how to use useSingleTickerProvider to do this.

For example, this code, which doesn't use useSingleTickerProvider, renders a Text widget of the current time every frame:

class CurrentTime extends StatefulWidget {
  @override
  CurrentTimeState createState() => CurrentTimeState();
}

class CurrentTimeState extends State<CurrentTime>
    with SingleTickerProviderStateMixin<CurrentTime> {
  late String _currentTime;
  late Ticker _ticker;

  @override
  void initState() {
    super.initState();
    _currentTime = DateTime.now().toString();
    _ticker = createTicker((_) {
      setState(() {
        _currentTime = DateTime.now().toString();
      });
    });
    _ticker.start();
  }

  @override
  void dispose() {
    _ticker.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Text(_currentTime);
  }
}

But when I try to update that code to use useSingleTickerProvider like this:

class CurrentTime extends HookWidget {
  const CurrentTime({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final currentTime = useState(DateTime.now().toString());
    final tickerProvider = useSingleTickerProvider();
    final ticker = tickerProvider.createTicker((_) {
      currentTime.value = DateTime.now().toString();
    });
    ticker.start();
    return Text(currentTime.value);
  }
}

... I get the following error:

CurrentTime attempted to use a useSingleTickerProvider multiple times.

So it seems I'm doing something wrong, but I haven't been able to figure out what I need to change. I am hoping someone could point me in the right direction.

[davidmartos96]

You are creating a ticker each frame. Try placing the logic inside an useEffect with the provider as key (equivalent to a initState)

useEffect(() {
    final ticker = tickerProvider.createTicker(...)
    ticker.start();
    return () {
        // logic to dispose the ticker
        ticker.dispose();
    };
}, [tickerProvider]);

[elliotwaite]

Ah, that's it 🙌. Thanks for the help! Here's the updated working version:

class CurrentTime extends HookWidget {
  const CurrentTime({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final currentTime = useState(DateTime.now().toString());
    final tickerProvider = useSingleTickerProvider();
    useEffect(() {
      final ticker = tickerProvider.createTicker((_) {
        currentTime.value = DateTime.now().toString();
      });
      ticker.start();
      return ticker.dispose;
    }, [tickerProvider]);
    return Text(currentTime.value);
  }
}