Diferenciar entre State efímero y State de la aplicación

Este documento introduce el State de la aplicación, el State efímero, y cómo podrías gestionar cada uno en una aplicación Flutter.

En el sentido más amplio posible, el State de una aplicación es todo lo que existe en memoria cuando la aplicación se está ejecutando. Esto incluye los recursos (assets) de la aplicación, todas las variables que el framework Flutter mantiene sobre la interfaz de usuario, el estado de las animaciones, texturas, fuentes, etc. Aunque esta definición del State en su sentido más amplio es válida, no resulta muy útil para estructurar la arquitectura de una aplicación.

En primer lugar, ni siquiera gestionas algunos tipos de State (como las texturas). El framework se encarga de ellos por ti. Así que una definición más útil de State es "cualquier dato que necesites para reconstruir tu interfaz de usuario en cualquier momento". En segundo lugar, el State que sí gestionas tú mismo se puede dividir en dos tipos conceptuales: State efímero y State de la aplicación.

El State efímero (a veces llamado State de interfaz de usuario o State local) es el State que puedes contener ordenadamente dentro de un único widget.

Esta es, intencionadamente, una definición vaga, así que aquí hay algunos ejemplos.

• página actual en un PageView
• progreso actual de una animación compleja
• pestaña seleccionada actualmente en un BottomNavigationBar

Otras partes del árbol de widgets rara vez necesitan acceder a este tipo de State. No hay necesidad de serializarlo y no cambia de formas complejas.

En otras palabras, no es necesario utilizar técnicas de State Management (ScopedModel, Redux, etc.) para este tipo de State. Todo lo que necesitas es un StatefulWidget.

A continuación, verás cómo el elemento seleccionado actualmente en una barra de navegación inferior se mantiene en el campo _index de la clase _MyHomepageState. En este ejemplo, _index es State efímero.

class MyHomepage extends StatefulWidget {
  const MyHomepage({super.key});
​
  @override
  State<MyHomepage> createState() => _MyHomepageState();
}
​
class _MyHomepageState extends State<MyHomepage> {
  int _index = 0;
​
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: _index,
      onTap: (newIndex) {
        setState(() {
          _index = newIndex;
        });
      },
      // ... items ...
    );
  }
}

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

El State que no es efímero, que deseas compartir entre muchas partes de tu aplicación y que deseas mantener entre las sesiones de usuario, es lo que llamamos State de la aplicación (a veces también llamado State compartido).

Ejemplos de State de la aplicación:

• 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 leído/no leído de los artículos en una aplicación de noticias

Para gestionar el State de la aplicación, querrás investigar tus opciones. Tu elección dependerá de la complejidad y la naturaleza de tu aplicación, la experiencia previa de tu equipo y muchos otros aspectos. Sigue leyendo.

Para ser claros, puedes usar State y setState() para gestionar todo el State en tu aplicación. De hecho, el equipo de Flutter hace esto en muchos ejemplos sencillos de aplicaciones (incluyendo la aplicación inicial que obtienes con cada flutter create).

También funciona en el otro sentido. Por ejemplo, podrías decidir que, en el contexto de tu aplicación particular, la pestaña seleccionada en una barra de navegación inferior no es State efímero. Es posible que necesites cambiarla desde fuera de la clase, mantenerla entre sesiones, etc. En ese caso, la variable _index es State de la aplicación.

No existe una regla universal y definitiva para distinguir si una variable en particular es State efímero o State de la aplicación. A veces, tendrás que refactorizar una en otra. Por ejemplo, comenzarás con un State claramente efímero, pero a medida que tu aplicación crezca en características, podría ser necesario moverlo al State de la aplicación.

Por esa razón, toma el siguiente diagrama con pinzas (con cautela):

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

"La regla general es: Haz lo que sea menos incómodo."

En resumen, hay dos tipos conceptuales de State en cualquier aplicación Flutter. El State efímero se puede implementar usando State y setState(), y a menudo es local a un único widget. El resto es el State de tu aplicación. Ambos tipos tienen su lugar en cualquier aplicación Flutter, y la división entre los dos depende de tu propia preferencia y de la complejidad de la aplicación.