En el capítulo anterior definimos hablamos de los widgets y de cómo se usan para crear toda la interfaz de cada pantalla en Flutter.
Hoy hablaremos de los dos tipos de widgets que hay, Stateless widget y stateful widget, o lo que es lo mismo, widget sin estado o con estado.
Efectivamente, los widgets pueden tener o no estado, ¿qué significa eso?, muy fácil. Los widgets sin estado son aquellos que no van a cambiar, son inmutables y se pintan una sola vez. Por ejemplo un Text, el widget Text está pensado para mostrar un texto y punto, se puede personalizar el formato y todo lo que queramos, pero una vez que se pinte no cambiará. Los widgets que no tienen estado con clases que heredan de la clase StatelessWidget.
Por otro lado tenemos los widgets con estado que sí pueden subrir cambios durante la visualización de la pantalla. Un ejemplo de este tipo de widgets es TextField, cuyo contenido claramente cambiará cuando lo seleccionemos para excribir un texto. Este tipo de widgets heredan de la clase StatefulWidget.
¿Qué sentido tiene que se separen los widgets en estos tipos?, ¿por qué no hacemos todos los widget con estado y así los podemos cambiar si lo necesitamos?. La respuesta es sencilla, por el rendimiento. Si le decimos a Flutter que un widget no tiene estado, lo pintará una vez y se olvidará, no tendrá que estar mirando si lo tiene que refrescar.
Esta muy bien saber esto para comprender la naturaleza de los widgets que ya nos proporciona Flutter, pero cuando realmente necesitamos esto es a la hora de crear nuestros propios widgets, totalmente necesario si queremos dar funcionalidad a nuestra app.
Las principales diferencias a tener en cuenta a la hora de crear nuestros widgets son las siguientes:
Stateless Widget: Widget sin estado
- Hereda de la clase StatelessWidget
- Hay que sobre-escribir su método build para devolver el árbol de widget que queremos que se pinte
- Podemos pasarle parámetros en su constructor
- Se pintará una sola vez y no volverá a cambiar
Stateful Widget: Widget con estado
- Hereda de la clase StatefulWidget
- Necesita otra objeto que herede de State para controlar el estado del widget
- Hay que sobre-escribir el método createState para devolver este objeto de estado
- También hay que sobre-escribir el método build para devolver el árbol de widgets que se va a pintar, pero esta vez lo hacemos en el objeto de estado.
- Podemos cambiar el estado cuando lo necesitemos a través del método setState para volver a pintar el widget con los cambios que hayamos realizado
Para comprenderlo, hablaremos de la app de ejemplo que se crea en Android Studio cuando iniciamos un nuevo proyecto de Flutter.