Home / Questions / 520991
Accepted
Lucas Tomic
Asked: 2022-08-17 09:57:27 +0800 CST 2022-08-17 09:57:27 +0800 CST

Timer.periodic does not work correctly in provider

  • 772

I'm trying to use the periodicclass method Timerinside a class that extends from (from the ProviderChangeNotifier package ) by having my variable decrement by one every second .time

This works correctly if I don't add the method NotifyListenersso that it redraws all the widgets that occupy the property time, like so:

class PriceProvider extends ChangeNotifier{
  int _time = 60;

  int get time{
    return _time;
  }

  void cronometer(){//método que activa el timer

    Timer _timer = Timer.periodic(const Duration(seconds: 1), (Timer timer){
      print(DateTime.now());//Imprimo la fecha para que vean cada cuanto tiempo se ejecuta el código
      
      _time += -1;//decrementa time

      if(_time == 0){
        _time = 60;
      } 

      // notifyListeners(); 
    });
  } 

}

Console output (runs every second correctly): console output

On the other hand, if I uncomment the method NotifyListeners, the code begins to execute more and more times per second exponentially (for example, first it executes once, then twice, then 5, then 9 and so on): console output

This is where I call the method cronometer:

class PriceWithClock extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    PriceProvider priceProvider = Provider.of<PriceProvider>(context);
    priceProvider.cronometer();
    return CircularPercentIndicator(
      radius: 100.0,
      lineWidth: 5.0,
      percent: 1-priceProvider.time/60,
      center: Text("00:${priceProvider.time}"),
     ),
    );
  }
}

I create the priceProviderin mainmy project's:

void main() async{
  runApp(    
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => PriceProvider()),
      ],
      child: MyApp(),
    ),
  );
}
flutter

1 Answers

  1. Best Answer

    The problem is that you're creating the Timerevery time it's done rebuild, i.e. every time you use the notifyListenersre-enter the method build, so call cronometerthen re-create anotherTimer.

    The correct way would be Timerto create the timer only once, or you can also create a validation so that it doesn't recreate the timer.

    Your class would look like this:

    class PriceProvider extends ChangeNotifier{
  int _time = 60;
  Timer? _timer;

  int get time{
    return _time;
  }

  void cronometer(){//método que activa el timer
     if(_timer == null){
    _timer = Timer.periodic(const Duration(seconds: 1), (Timer timer){
      print(DateTime.now());//Imprimo la fecha para que vean cada cuanto tiempo se ejecuta el código
      
      _time += -1;//decrementa time

      if(_time == 0){
        _time = 60;
      } 

      notifyListeners(); 
    });
   }
  } 

}

    Another way to solve it, as I was saying, just run the cronometeronce.

    class PriceWithClock extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    PriceProvider priceProvider = Provider.of<PriceProvider>(context);
    // no llamarlo aquí.
    //priceProvider.cronometer();
    return CircularPercentIndicator(
      radius: 100.0,
      lineWidth: 5.0,
      percent: 1-priceProvider.time/60,
      center: Text("00:${priceProvider.time}"),
     ),
    );
  }
}

    Call cronometerwhen the Provider is created.

    void main() async{
  runApp(    
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => PriceProvider()..cronometer()),
      ],
      child: MyApp(),
    ),
  );
}
    • 2