Usar WidgetsBindingObserver para detectar cuándo se minimiza y regresa a la APP con Flutter

Tiempo de lectura: 3 minutos

WidgetsBindingObserver es una interfaz en Flutter que permite observar y responder a los cambios en el ciclo de vida de una aplicación. Esto es útil para realizar tareas específicas cuando la aplicación entra en diferentes estados, como cuando pasa a primer plano, se va al segundo plano, o se detiene.

1. Introducción a WidgetsBindingObserver

WidgetsBindingObserver es una clase que proporciona métodos para responder a los cambios en el ciclo de vida de la aplicación. Los principales estados del ciclo de vida son:

• AppLifecycleState.resumed: La aplicación está en primer plano y activa.
• AppLifecycleState.inactive: La aplicación está inactiva, pero no ha sido pausada. Puede ocurrir cuando la aplicación está en el proceso de ser pausada.
• AppLifecycleState.paused: La aplicación está en segundo plano y no es visible para el usuario.
• AppLifecycleState.detached: La aplicación está separada del motor Flutter y no puede estar en primer plano.

2. Configuración de WidgetsBindingObserver

Para usar WidgetsBindingObserver, debes implementar la interfaz en un State de tu widget y sobrescribir el método didChangeAppLifecycleState. A continuación, se muestra cómo hacerlo:

2.1 Implementar WidgetsBindingObserver

Crea un widget con estado que implemente WidgetsBindingObserver y sobrescriba el método didChangeAppLifecycleState.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

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

class _HomeScreenState extends State<HomeScreen> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this); // Agregar el observador
    print("HomeScreen initState");
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    print("Estado de la app: $state");
    // Realiza acciones basadas en el estado de la aplicación
    if (state == AppLifecycleState.resumed) {
      print("La aplicación ha vuelto a primer plano");
    } else if (state == AppLifecycleState.paused) {
      print("La aplicación está en segundo plano");
    }
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this); // Eliminar el observador
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lifecycle Example'),
      ),
      body: Center(
        child: Text('Check console for lifecycle changes.'),
      ),
    );
  }
}

2.2 Agregar y Quitar el Observador

• Agregar el Observador: Usa WidgetsBinding.instance.addObserver(this) en el método initState para comenzar a observar los cambios de estado.
• Eliminar el Observador: Usa WidgetsBinding.instance.removeObserver(this) en el método dispose para dejar de observar los cambios de estado cuando el widget ya no esté en la jerarquía de widgets.

3. Ejemplo Práctico

A continuación, se muestra un ejemplo completo de una aplicación que utiliza WidgetsBindingObserver para responder a los cambios en el ciclo de vida de la aplicación.

3.1 Código del Ejemplo

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

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

class _HomeScreenState extends State<HomeScreen> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this); // Agregar el observador
    print("HomeScreen initState");
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    print("Estado de la app: $state");
    if (state == AppLifecycleState.resumed) {
      // Acción cuando la aplicación vuelve a primer plano
      print("La aplicación ha vuelto a primer plano");
    } else if (state == AppLifecycleState.paused) {
      // Acción cuando la aplicación entra en segundo plano
      print("La aplicación está en segundo plano");
    }
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this); // Eliminar el observador
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lifecycle Example'),
      ),
      body: Center(
        child: Text('Check console for lifecycle changes.'),
      ),
    );
  }
}

3.2 Cómo Probar el Ejemplo

1. Ejecuta la aplicación: Ejecuta la aplicación en un dispositivo físico o emulador.
2. Minimiza la aplicación: Usa el botón de inicio para poner la aplicación en segundo plano y verifica la salida de la consola para ver los mensajes del ciclo de vida.
3. Vuelve a abrir la aplicación: Regresa a la aplicación desde el segundo plano y verifica los mensajes de la consola.

4. Consideraciones Adicionales

• Manejo de Recursos: Usa didChangeAppLifecycleState para manejar recursos y estados de la aplicación, como pausar y reanudar tareas.
• Persistencia: Si necesitas guardar el estado de la aplicación, considera usar un paquete de persistencia como shared_preferences o hive.