Stateless vs stateful en Flutter
Lección del curso gratis de Flutter de Thomas Viana: entiendes la diferencia entre los dos tipos de widget y haces que un texto cambie de color con setState.
El vídeo empieza en el minuto de esta lección y sigue con el resto del curso. Ver el curso completo con su índice · Ver en YouTube
La diferencia entre stateless y stateful en Flutter es que un widget stateless no tiene estado y no puede cambiar por sí mismo, mientras que un widget stateful tiene estado y puede actualizarse, por ejemplo al pulsar un botón. En esta lección del curso de Flutter gratis, publicado en agosto de 2024, Thomas Viana lo explica con una analogía y un ejercicio en el que tres botones cambian el color de un texto.
La analogía del cubo de color
Thomas lo explica con un cubo rojo. Si es stateless, no puedes cambiarle el color: para tener uno azul, tienes que quitarlo y poner otro. Si es stateful, es como un cubo que se ilumina por dentro y tiene un botón: lo pulsas y cambia de color sin que tengas que sustituirlo. El estado es eso: cómo cambian y se actualizan los elementos de la interfaz con los que interactúas.
El ejercicio: tres botones que cambian un texto
En Visual Studio Code, Thomas crea un proyecto nuevo y un widget stateless llamado HomePage con un atajo del editor. Dentro pone un Scaffold con un texto centrado y, debajo, una fila con tres cuadrados de color hechos con Container. Para que respondan al toque, los envuelve en un GestureDetector, el widget que detecta toques, dobles toques o pulsaciones largas.
- Column para el texto y la fila de botones.
- Row con alineación space evenly para repartir los cuadrados.
- GestureDetector con onTap en cada cuadrado.
Convertir el widget en stateful
El color del texto pasa a ser una variable, así que hay que quitar la palabra const, que indica que algo no cambia. Pero en un widget stateless no se puede llamar a setState. La solución es convertirlo con la opción del editor «Convert to StatefulWidget». Después se crea una función que recibe un color y lo asigna dentro de setState. Así, cada botón cambia el color del texto.
Qué hace setState
setState le dice a Flutter que algo ha cambiado y vuelve a ejecutar el método build, que es el que dibuja el widget. Por dentro, marca lo que debe cambiar para actualizar solo eso. Thomas aclara que setState es una forma de gestionar el estado, pero no la única ni la más recomendable en apps grandes; más adelante el curso enseña otras.
Dudas sobre esta lección
¿Cuándo usar un StatelessWidget y cuándo un StatefulWidget?
Usa un StatelessWidget cuando lo que muestras no cambia mientras el usuario está en la pantalla, como un texto fijo o un icono. Usa un StatefulWidget cuando algo debe actualizarse por una acción, como un contador que sube o un texto que cambia de color al pulsar un botón.
¿Para qué sirve setState en Flutter?
setState avisa a Flutter de que un valor ha cambiado y hace que se vuelva a ejecutar el método build del widget, para que la pantalla muestre el valor nuevo. Si cambias una variable sin llamar a setState, el dato cambia pero la pantalla no se actualiza.
¿Cómo convertir un StatelessWidget en StatefulWidget?
En Visual Studio Code, colócate sobre la palabra StatelessWidget, abre las acciones rápidas y elige «Convert to StatefulWidget». El editor añade la clase del estado y ya puedes usar setState dentro de ella. El editor hace la conversión por ti, sin que tengas que escribir la estructura a mano.
¿setState es la mejor forma de manejar el estado?
Según Thomas Viana, setState funciona, pero no es la mejor práctica cuando la app crece. En la parte del proyecto final del curso de Flutter gratis explica otras formas de gestionar el estado, como Provider. Para empezar, sirve para entender qué es el estado.
Más lecciones de este curso
- Provider en Flutter: gestión de estado paso a pasoEmpieza en el 08:02:54
- Cómo subir un proyecto a GitHub paso a pasoEmpieza en el 09:45:31
- Cómo hacer un perfil de LinkedIn que atraiga a reclutadoresEmpieza en el 10:39:03
- Widgets en Flutter: cómo se construye una pantallaEmpieza en el 19:44
Lecciones relacionadas de otros cursos
- Bucles en Python: for y while con ejemplosLección · Curso gratis de Python desde cero en español
- Cómo instalar Python y preparar tu editorLección · Curso gratis de Python desde cero en español
- Condicionales en Python: if, elif y elseLección · Curso gratis de Python desde cero en español
- Rank Math tutorial: SEO básico para tu web en WordPressLección · Curso gratis de WordPress: crea una página web profesional
