Stateless y Stateful Widgets en Flutter
En Flutter existen básicamente dos tipos de widgets, Stateless widgets y Stateful widgets. Si no sabes que son los widgets puedes visitar nuestro artículo Widgets y estructura de árbol de Flutter. Dicho esto vamos a ver la definición y diferencia de cada tipo de widget.
Antes de ver cada definición debemos saber qué es estado mutable. Cuando hablamos de estado mutable en Flutter nos referimos a cualquier propiedad que pueda cambiar en el tiempo. Imagínate esto como una parte de la interfaz del usuario que pueda ser actualizada mediante alguna interacción.
Stateless widgets
Los Stateless widgets son widgets cuyo estado no puede cambiar a través del tiempo. En otras palabras, no contienen ningún estado mutable que se necesite rastrear. Imagina un widget de texto que contiene el nombre del usuario. Si el nombre del usuario no cambia es un candidato perfecto a ser stateless.
Stateful widgets
Los Stateful widgets son widgets cuyo estado puede cambiar a través del tiempo. En otras palabras, contienen algún estado mutable que se necesita rastrear. Imagina un widget de texto que muestra la cantidad de veces que se ha hecho clic en un botón. Dado que el texto que muestra dicha interacción cambia con cada clic es un candidato perfecto a ser stateful.
Hot reload
El hot reload es una característica que permite tener un debug mucho más rápido de la aplicación inyectando los archivos necesarios a la Dart Virtual Machine (VM). Una vez actualizada la VM con los nuevos archivos, Flutter actualizará automáticamente el árbol de widgets permitiendo ver los cambios rápidamente.
Esto es importante ya que no es necesario volver a correr la aplicación desde cero sino simplemente actualizar el archivo modificado (CTRL + S) y automáticamente tendremos los cambios en el debug de la aplicación. Para esto, es importante tener en cuenta que los cambios se verán siempre y cuando los widgets modificados sean stateless. Veamos el siguiente ejemplo:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Home()
));
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Hot reload example'),),
body: Center(
child: Text('Hello World!',
style: TextStyle(fontSize: 40.0)
)
),
);
}
}En esta aplicación creamos un widget llamado Home que extiende de StatelessWidget que coloca en el centro del body el texto Hello World!. Debido a que este widget es stateless cualquier cambio que hagamos sobre él se verá reflejado una vez se guarden los cambios en el archivo. Puedes probar creando una aplicación similar y cambiado alguna parte del texto. Posteriormente debes asegurarte de ejecutar el comando para hacer hot reload, por lo general CTRL + S, no tienes que volver a correr la aplicación completa!.
Por último, no olvides que si una propiedad tiene la particularidad de cambiar en el tiempo entonces el widget que contiene esta propiedad debe ser stateful y no stateless. Hasta la próxima!.