¿Cuál es la diferencia entre StatelessWidget y StatefulWidget?

Question

Accepted Answer

Flutter tiene dos tipos fundamentales de widgets: **StatelessWidget** (inmutable, sin estado interno que cambie) y **StatefulWidget** (puede mantener y actualizar estado mutable, reconstruyéndose cuando el estado cambia). Elegir el correcto es fundamental para construir UIs en Flutter. ## StatelessWidget — sin estado cambiante ```dart // a StatelessWidget: just describes UI based on its inputs (immutable, no internal state) class Greeting extends StatelessWidget { final String name; const Greeting(this.name); @override Widget build(BuildContext context) { return Text('Hello, $name'); // UI depends only on inputs, never changes itself } } // → use for UI that doesn't change on its own (static content, displays based on inputs) ``` ## StatefulWidget — tiene estado mutable ```dart // a StatefulWidget: holds STATE that can change → rebuilds the UI when it does class Counter extends StatefulWidget { @override State createState() => _CounterState(); } class _CounterState extends State { int count = 0; // mutable STATE @override Widget build(BuildContext context) { return Column(children: [ Text('Count: $count'), ElevatedButton( onPressed: () => setState(() => count++), // setState → rebuild with new state child: Text('Increment'), ), ]); } } ``` ## setState — la clave de StatefulWidget ```text → setState(() { ... }) tells Flutter the state CHANGED → triggers a REBUILD (build() runs again with the new state, updating the UI) → WITHOUT setState, changing a variable won't update the UI → StatefulWidget = widget config (immutable) + a State object (holds mutable state) ``` ## Eligiendo ```text STATELESS → UI based purely on inputs; doesn't change itself (most widgets; simpler) STATEFUL → needs to hold/change internal state over time (counters, forms, toggles, animations, anything interactive that changes) → Prefer Stateless when possible (simpler); use Stateful when you need changing state. ``` ## Por qué es importante Entender la diferencia entre StatelessWidget y StatefulWidget es fundamental en el desarrollo de Flutter porque elegir el correcto es esencial para construir UIs funcionales, por lo que es conocimiento foundacional que debes dominar. La distinción — **StatelessWidget** (inmutable, describiendo la UI puramente basado en sus inputs, nunca cambiando por sí solo) versus **StatefulWidget** (manteniendo estado mutable que puede cambiar, reconstruyendo la UI cuando lo hace) — es uno de los primeros y más importantes conceptos en Flutter, determinando cómo construyes cualquier widget. Entender que **StatelessWidget** es adecuado para UI que no cambia por sí misma (contenido estático, vistas basadas en inputs — la mayoría de widgets, y más simple) mientras que **StatefulWidget** se necesita para cualquier cosa con estado interno cambiante (contadores, formularios, toggles, elementos interactivos) es esencial para elegir correctamente. Más críticamente, entender **setState** — el mecanismo que le dice a Flutter que el estado ha cambiado, desencadenando una reconstrucción para que la UI se actualice (y que sin él, cambiar una variable no actualizará la UI, un error muy común en principiantes) — es fundamental para hacer que StatefulWidgets funcionen. Entender que un StatefulWidget combina una configuración de widget inmutable con un objeto State separado que mantiene el estado mutable clarifica su estructura. La recomendación de **preferir StatelessWidget cuando sea posible** (más simple) y usar StatefulWidget solo cuando se necesita cambiar estado refleja buena práctica. Dado que prácticamente cada widget de Flutter que construyes es uno de estos dos tipos y elegir correctamente (y usar setState adecuadamente) es esencial para construir UIs funcionales e interactivas, entender StatelessWidget versus StatefulWidget — su diferencia, cuándo usar cada uno, y el papel crítico de setState — es conocimiento esencial y foundacional en Flutter, uno de los conceptos más fundamentales en el desarrollo de Flutter que todo desarrollador de Flutter debe entender para construir interfaces de usuario funcionales.