1

Estoy intentando utilizar el método periodic de la clase Timer dentro de una clase que extiende de ChangeNotifier (del paquete Provider) haciendo que cada segundo decremente en uno mi variable time.

Esta funciona correctamente si no agrego el método NotifyListeners para que redibuje todos los widgets que ocupan la propiedad time, de la siguiente forma:

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(); 
    });
  } 

}

Salida por consola (se ejecuta cada un segundo correctamente): Salida por consola

En cambio si descomento el método NotifyListeners el código se empieza a ejecutar cada vez más veces por segundo de manera exponencial (por ejemplo, primero se ejecuta una vez, después dos, luego 5, luego 9 y así): Salida por consola

Aquí es donde llamo al método 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}"),
     ),
    );
  }
}

Creo el priceProvider en el main de mi proyecto:

void main() async{
  runApp(    
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => PriceProvider()),
      ],
      child: MyApp(),
    ),
  );
} 
3
  • puedes agregar el código como llamas a cronometer() Commented el 16 mar. 2022 a las 18:02
  • @diegoveloper ya lo he agregado Commented el 16 mar. 2022 a las 18:06
  • ok, en que parte añades el ChangeNotifierProvider? es decir en que parte creas el PriceProvider ,añade eso también para poner mi respuesta Commented el 16 mar. 2022 a las 18:09

1 respuesta 1

2

El problema es que estás creando el Timer cada vez que se hace rebuild, es decir, cada vez que usas el notifyListeners vuelve a entrar al método build, por lo tanto llama a cronometer entonces vuelve a crear otro Timer.

La manera correcta sería crear el Timer solo una vez, o también puedes crear una validación para que no vuelva a crear el timer.

Tu clase quedaría así:

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(); 
    });
   }
  } 

}

Otra forma de solucionarlo, como te decía, solo ejecutar el cronometer una vez.

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}"),
     ),
    );
  }
}

Llamar al cronometer cuando se crea el Provider.

void main() async{
  runApp(    
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => PriceProvider()..cronometer()),
      ],
      child: MyApp(),
    ),
  );
} 
4
  • Excelente respuesta, gracias Commented el 16 mar. 2022 a las 18:17
  • 1
    igual lo ideal sería llamar a cronometer solo una vez, por eso te decía si puedes añadir como creas el provider para darte más indicaciones Commented el 16 mar. 2022 a las 18:20
  • Ya lo he agregado para que puedas darme más indicaciones Commented el 16 mar. 2022 a las 18:22
  • 1
    listo, ya lo actualicé Commented el 16 mar. 2022 a las 18:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.