dart - flutter run function every x amount of seconds

Question

inside my flutter app I want to check my api every 10 seconds. I found this post to run a function every x amount of time and did the following:

class _MainPage extends State<MainPage> {
  int starter = 0;

  void checkForNewSharedLists(){
    // do request here
    setState((){
      // change state according to result of request
    });

  }

  Widget build(BuildContext context) {
    Timer.periodic(Duration(seconds: 15), (Timer t) => checkForNewSharedLists());
  }
} 

Unfortunately the requests pile up: after restarting the app on the first "round" there are two request to the api, the second round it's four requests, the third it's eight and so on...

Does anybody know how to fix this?

Answer 1

build() can and usually will be called more than once and every time a new Timer.periodic is created.

You need to move that code out of build() like

Timer? timer;

@override
void initState() {
  super.initState();
  timer = Timer.periodic(Duration(seconds: 15), (Timer t) => checkForNewSharedLists());
}

@override
void dispose() {
  timer?.cancel();
  super.dispose();
}

Even better would be to move out such code from widgets entirely in an API layer or similar and use a StreamBuilder to have the view updated in case of updated data.