8.3. Gestión de estados en Flutter: setState()

La gestión del estado es una parte crucial del desarrollo de cualquier aplicación. Determina cómo se almacenan y manipulan los datos a lo largo del tiempo y cómo afectan a la interfaz de usuario. En Flutter, una de las formas más básicas de gestionar el estado es mediante el método setState().

Para entender el método setState(), es importante entender primero qué es "estado". El estado es simplemente información que puede cambiar con el tiempo. Por ejemplo, si tiene una aplicación de lista de tareas pendientes, las tareas de la lista se considerarán parte del estado de la aplicación.

Flutter está diseñado en torno a la idea de los widgets, que son los componentes básicos de la interfaz de usuario. Cada widget puede tener su propio estado, que se gestiona en un objeto Estado. Cuando el estado de un widget cambia, es necesario reconstruirlo para reflejar ese cambio. Aquí es donde entra en juego el método setState().

El método setState() se llama para indicarle a Flutter que el estado de un widget ha cambiado y que el widget necesita ser reconstruido. Se necesita una función de devolución de llamada que realiza la actualización del estado. Por ejemplo, si tiene un widget que muestra un recuento y un botón que incrementa el recuento, puede usar el método setState() para incrementar el recuento y reconstruir el widget con el nuevo recuento.

Aquí hay un ejemplo de cómo se podría hacer esto:

clase MyWidget extiende StatefulWidget {
  @anular
  _MyWidgetState createState() => _MyWidgetState();
}

clase _MyWidgetState extiende Estado {
  int _cuenta = 0;

  vacío _incrementCount() {
    establecerEstado(() {
      _cuenta++;
    });
  }

  @anular
  Construcción de widgets (contexto BuildContext) {
    columna de retorno (
      niños: [
        Texto('Recuento: $_recuento'),
        Botón elevado(
          onPressed: _incrementCount,
          niño: Texto('Incremento'),
        ),
      ],
    );
  }
}

En este ejemplo, el estado del widget es la variable _count. Cuando se presiona el botón, se llama al método _incrementCount, que a su vez llama a setState(). Dentro de la función de devolución de llamada pasada a setState(), se incrementa _count. Esto le indica a Flutter que el estado del widget ha cambiado y que es necesario reconstruirlo. Luego, el widget se reconstruye con el nuevo recuento, que se muestra en la interfaz de usuario.

Si bien el método setState() es una forma simple y efectiva de administrar el estado, puede resultar engorroso usarlo en aplicaciones más grandes con muchos widgets interdependientes. En estos casos, puede resultar útil utilizar una de las muchas bibliotecas de gestión estatal disponibles para Flutter, como Provider, Riverpod, Bloc, etc.

Estas bibliotecas proporcionan formas más potentes y flexibles de gestionar el estado, lo que le permite separar la lógica de estado de la lógica de la interfaz de usuario y compartir el estado entre varios widgets. Sin embargo, incluso cuando se utilizan estas bibliotecas, el concepto básico de actualizar el estado y reconstruir los widgets sigue siendo el mismo.

En resumen, el método setState() es una herramienta fundamental para la gestión del estado en Flutter. Le permite actualizar el estado de un widget y reconstruirlo para reflejar ese cambio. Al usar setState(), es importante recordar llamar al método dentro de una función de devolución de llamada que realiza la actualización del estado, para indicarle a Flutter que el estado ha cambiado y que el widget necesita ser reconstruido.

Siguiente página del libro electrónico gratuito:

105Gestión de estados en Flutter: Gestión de estados con proveedor

4 minutos