Gestion de Estados en Flutter

Fuente: ESFLUTTER.DEV
A medida que vamos explorando en Flutter, llega un momento en que necesitamos compartir el estado de la aplicación entre pantallas. Hay muchas maneras de hacer esto, y abarcaremos varias de ellas.

Cuando empieza a trabajar con Flutter y vienes desde un framework imperativo (como Android SDK o iOS UIKit), debemos empezar a pensar que el desarrollo de nuestras aplicaciones tendra una nueva perspectiva.

¿Porque?

! Porque Flutter es declarativo. !

Y en un momento hablaremos sobre lo que es declarativo e imperativo.

En Flutter, está bien reconstruir partes de la UI desde cero en lugar de modificarlas. Flutter es lo suficientemente rápido para hacerlo, incluso en cada cuadro si es necesario.

Lenguajes de Programación Declarativos e Imperativos.

---

Fuente: IONOS.ES
Los lenguajes de programación imperativa se distinguen de los lenguajes declarativos en un aspecto básico: la programación imperativa se centra en el “cómo”, y la declarativa, en el “qué”.

¿A que me refiero con esto? Los lenguajes de programación imperativa son por asi decirlo instrucciones paso a paso redactadas para el ordenador y describen de forma explícita qué pasos deben llevarse a cabo y en qué secuencia para alcanzar finalmente la solución deseada y en la programación declarativa se describe directamente el resultado final deseado. IONOS.es nos da un ejemplo para que lo comprendamos mejor asi que, imaginemos que los lenguajes impertavios son los que nos proporcionan la receta de una comida y los declarativos son los que nos proporcionan las fotos de los platillos preparados. Esto empieza a cobrar un poquito mas de sentido, porque a partir de aqui puedes empezar a predecir como funcionan estos dos paradigmas.

Bien, como dato adicional solo para que lo tengan en cuenta la programacion imperativa esta compuesta por:

• Programacion Estructurada, procedimental y modular.

mientras que la programacion declarativa esta compuesta por:

• Programacion logica y funcional.

Tambien nos proporcioan un ejemplo de programacion imperativa con PHP, pero ya no entrare mucho en detalle, esto simplemente era para que comprendieran la diferencia de estos dos porque nos podria dar una mejor idea de como Flutter esta compuesto por asi decirlo.

Diferencia entre estado efímero y estado de app

---

Fuente: ESFLUTTER.DEV
El estado de una aplicación es todo lo que existe en la memoria cuando la aplicación está en ejecución. Esto hace referencia a todas las variables que Flutter mantiene sobre la interfaz de usuario, el estado de la animación, las texturas, las fuentes, etc. Los estados se pueden dividir en dos tipos: El estado efimero y Estado de aplicacion (o Estado Compartido).

Estado Efimero

• El estado efímero (a veces llamado estado UI o estado local) es el estado que puede contener claramente en un único widget.

Ejemplo:

Abajo, puedes ver cómo el elemento actualmente seleccionado en una barra de navegación inferior se mantiene en el campo _índice de la clase _BottomNavigationBarWidget. En este ejemplo, _índice es un estado efímero.

  class BottomNavigationBarWidget extends StatefulWidget {
  @override
  _BottomNavigationBarWidgetState createState() => _BottomNavigationBarWidgetState();
  }

  class _BottomNavigationBarWidgetState extends State<BottomNavigationBarWidget> {
    int _index = 0;

    @override
    Widget build(BuildContext context) {
      return BottomNavigationBar(
        currentIndex: _index,
        onTap: (newIndex) {
          setState(() {
            _index = newIndex;
          });
        },
        // ... items ...
      );
    }
  }

Otras partes del árbol de widgets rara vez necesitan acceder a este tipo de estado. No hay necesidad de serializarlo, y no cambia de manera compleja.

En otras palabras, no es necesario utilizar técnicas de gestión de estado (“ScopedModel”, “Redux”, etc.) en este tipo de estados. Todo lo que necesitas es un “StatefulWidget”.

Aquí, usar setState() y un campo dentro de la clase StatefulWidget es completamente natural. Ninguna otra parte de tu aplicación necesita acceder a _index. La variable sólo cambia dentro del widget MyHomePage. Y, si el usuario cierra y reinicia la aplicación, no te importa que el _índice se restablezca a cero.

---

Estado de la app (Estado Compartido)

Estado que quieres compartir en muchas partes de tu aplicación. (a veces también llamado estado compartido).

Ejemplos de estados de aplicacion:

• Preferencias del usuario.
• Información de inicio de sesión.
• Notificaciones en una aplicación de redes sociales.
• El carrito de compras en una aplicación de comercio electrónico.
• Estado de los artículos leídos/no leídos en una aplicación de noticias.

Para administrar el estado de las aplicaciones, deberá investigar sus opciones. Su elección depende de la complejidad y naturaleza de tu aplicación, de la experiencia previa de tu equipo y de muchos otros aspectos.

Algunos Gestores de Estados:

• Provider.
• Getx.
• Bloc.

No hay una regla clara

No existe una regla clara y universal para distinguir si una variable en particular es efímera o es estado de aplicación. A veces, tendrás que refactorizar uno en otro. Por ejemplo, comenzará con un estado claramente efímero, pero a medida que tu aplicación crezca en características, tendrá que ser movida al estado de aplicación.

Cuando se le preguntó sobre el setState de React vs la store de Redux, el autor de Redux, Dan Abramov, respondió:

“La regla general es: Hacer lo que sea menos torpe.”

---

Gestión Sencilla Del Estado con Consumers Y Providers.