Uso de Timer en Flutter para llamar cada 30 segundos a una función

Tiempo de lectura: 2 minutos

La función Timer en Flutter nos permitirá ejecutar una función cada X segundos que indiquemos.

Reloj de arena rojo -  Pexels

Pasos para implementarlo:

Configura el Timer en tu StatefulWidget

Define y administra el Timer en el estado del widget para que puedas iniciar, detener y reiniciar el temporizador según el estado del widget.

import 'dart:async';
import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> with WidgetsBindingObserver {
  Timer? _timer;
  bool _isScreenActive = true;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _startTimer();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);

    if (state == AppLifecycleState.resumed) {
      if (!_isScreenActive) {
        _isScreenActive = true;
        _startTimer();
      }
    } else if (state == AppLifecycleState.paused) {
      _stopTimer();
      _isScreenActive = false;
    }
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    final ModalRoute? modalRoute = ModalRoute.of(context);
    if (modalRoute?.isCurrent == true) {
      _isScreenActive = true;
      _startTimer();
    } else {
      _isScreenActive = false;
      _stopTimer();
    }
  }

  @override
  void dispose() {
    _stopTimer();
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  void _startTimer() {
    if (_timer != null && _timer!.isActive) return;
    _timer = Timer.periodic(Duration(seconds: 30), (Timer timer) {
      _myPeriodicFunction();
    });
  }

  void _stopTimer() {
    _timer?.cancel();
  }

  void _myPeriodicFunction() {
    print("Función periódica ejecutada.");
    // Aquí colocas la lógica que deseas ejecutar cada 30 segundos
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => AnotherScreen()),
            );
          },
          child: Text('Ir a otra pantalla'),
        ),
      ),
    );
  }
}

class AnotherScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Otra Pantalla')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Regresar'),
        ),
      ),
    );
  }
}

Explicación del Código

  • Timer: Un Timer se utiliza para ejecutar una función periódicamente cada 30 segundos.
  • _startTimer: Inicia el temporizador si no está ya activo.
  • _stopTimer: Cancela el temporizador si está activo.
  • didChangeAppLifecycleState: Maneja el estado del ciclo de vida de la aplicación. Cuando la aplicación se reanuda (AppLifecycleState.resumed), el temporizador se reinicia. Cuando se pausa (AppLifecycleState.paused), el temporizador se detiene.
  • didChangeDependencies: Verifica si la pantalla actual está activa. Si es así, el temporizador se reinicia; si no, el temporizador se detiene.
  • dispose: Asegura que el temporizador se detenga cuando el widget se elimine.

Deja un comentario