Comprensión de la sintaxis de los widgets sin estado y con estado.

El estado en Flutter se refiere a la información dinámica que puede cambiar durante la vida útil
de un widget y que afecta su apariencia o comportamiento. En otras palabras, el estado
representa los datos que pueden variar y que impactan en cómo se ve o se comporta un
widget en la interfaz de usuario.
Hay dos tipos principales de estado en Flutter:
Estado Local: Este tipo de estado está asociado directamente con un widget en particular y
puede cambiar independientemente de otros widgets en la interfaz de usuario. Se utiliza
principalmente en widgets StatefulWidget, donde el estado puede cambiar a lo largo del
tiempo en respuesta a eventos de usuario, actualizaciones de datos o cambios en el ciclo de
vida del widget. Por ejemplo, un botón que cambia de color cuando se presiona está utilizando
estado local para controlar su apariencia.
Estado Global: Este tipo de estado se comparte entre múltiples widgets en la jerarquía de
widgets y puede ser accedido y modificado desde cualquier parte de la aplicación. Se utiliza
para almacenar datos que deben ser compartidos y sincronizados entre diferentes partes de la
interfaz de usuario, como el estado de autenticación del usuario, la configuración de la
aplicación o los datos de la aplicación. Para administrar el estado global en Flutter, se suelen
utilizar soluciones como Provider, Bloc o Redux.
El estado en Flutter es fundamental para crear interfaces de usuario dinámicas y receptivas,
ya que permite que los widgets reaccionen a los cambios en los datos o en la interacción del
usuario. Al comprender cómo gestionar y actualizar el estado en Flutter, los desarrolladores
pueden crear aplicaciones móviles más robustas y efectivas que respondan de manera
adecuada a las necesidades de los usuarios.

En una aplicación Flutter, todo es un widget. Toda la aplicación es un árbol de widgets

formado mediante la combinación de widgets como Scaffold, Container, AppBar y muchos
más.
Pero dos de estos widgets principales controlan el estado de los widgets. Son widget sin
estado y widget con estado.
Entonces, ¿qué son estos widgets? Entendámoslo primero antes de sumergirnos directamente
en la sintaxis.
Los widgets sin estado son aquellos cuyo estado no se puede cambiar. Son inmutables.
Esto explica que si desea cambiar el color de un contenedor al tocarlo, entonces no es posible
con Stateless Widget. Pero puede tener widgets de interfaz de usuario, como widgets de
texto y de íconos .
Los widgets con estado, por otro lado, son lo opuesto a lo que vimos anteriormente. Aquí, no
solo se puede cambiar el color sino también cualquier propiedad o valor de un widget
llamando al método setState en la propiedad onTap . Por tanto, es mutable.
 Como las extensiones de Flutter en su editor de código le permiten crear directamente un
widget sin estado/con estado, no podemos tener una idea de qué hace exactamente el bloque
de código. Así que entendámoslo.

Widget sin estado

Entonces, el código comienza extendiendo una clase llamada StatelessWidget . Extender

significa que estamos creando una clase (clase secundaria) que heredará todos los métodos y
propiedades de StatelessWidget (clase principal). En este caso la clase que definimos
es MyApp .
Nota: - StatelessWidget es una clase creada por paquete de material mediante flutter. El
paquete que importamos en cada paquete de la aplicación Flutter: flutter/material.dart nos
brinda la funcionalidad de la clase StatelessWidget .
Antes de pasar al siguiente paso, comprendamos que:
-> Las funciones dentro de una clase se llaman métodos y
las variables dentro de una clase se llaman propiedades
de esa clase.
Ahora tenemos un método dentro de nuestra clase MyApp
extendido desde la clase StatelessWidget .
Tomemos un ejemplo de una función para aclararlo:
 Aquí tenemos una función principal de tipo void ya que no tiene tipo de retorno. También
puede aceptar argumentos/parámetros. Y finalmente el bloque de código que contiene.
De manera similar, tenemos una función de compilación de nombre de tipo Widget ya que
todo es un widget en flutter. Luego tenemos un contexto de parámetro de tipo de
datos BuildContext .

Nota: - No es obligatorio utilizar palabras de contexto. También podemos usar ctx o cntxt .
Depende de la persona. Y cada vez que pasamos un argumento o un parámetro en una
función/método, debemos indicar su tipo de datos. Por ejemplo, int edad, nombre de cadena.

Aquí, flutter llama al método de compilación cada vez que necesita representar algo en la
pantalla. El contexto es un objeto que contiene información sobre nuestro widget y dónde se
encuentra en el árbol de widgets. BuildContext es una notación de tipo para contexto que es
una clase proporcionada por flutter.
Y por último el tipo de devolución. Como el método no es un tipo void, sino un tipo Widget,
debería devolver algo. En este caso, devuelve el widget MaterialApp . Flutter también
proporciona este widget y combina nuestro árbol de widgets y lo representa en nuestra
aplicación completa.

Widget con estado:

Como podemos ver hay 2 clases en este caso. MiAplicación y MiEstadoAplicación . Uno
extiende StatefulWidget y otro extiende State . Al igual que StatelessWidget , estas dos
clases son creadas por el propio flutter.
Ahora bien, ¿por qué tenemos 2 clases? Esto se debe a que cada vez que cambia el estado de
cualquier widget, solo se reconstruye la clase principal (MyApp) y otra (MyAppState)
permanece persistente.
Para una mejor comprensión, recuerde la clase MyApp como clase de widget y la
clase MyAppState como clase de estado.
Además, State es una clase de tipo genérica. Las clases de tipo genérico son aquellas clases
que funcionan en el límite del tipo de datos mencionado. Aquí, le damos el tipo MyApp para
que podamos decirle a Flutter que la clase State es una subclase de MyApp y funcionará bajo
ella.
Este fue el primer paso para conectar ambas clases. Ahora necesitamos implementar el
método createState dentro de nuestra clase de widget.

La imagen de arriba explica cómo implementamos la clase State en la clase MyApp para
conectarlos.
No acepta ningún parámetro, pero tiene un tipo Estado que es la misma clase proporcionada
por flutter. Como es una clase de tipo genérico, acepta la clase StatefulWidget como tipo de
datos. Devuelve la clase secundaria que creamos y que extiende la clase State , es decir, la
clase MyAppState .

Nota: - La principal diferencia entre estas 2 clases es que los datos que están dentro de la
clase Estado no cambian al reconstruir nuestra aplicación. Sólo el widget cambia según su
estado. Entonces, como se mencionó anteriormente, la clase Widget reconstruye, no la clase
Estado.

Y hasta el final, podemos ver la palabra clave @override tanto en los widgets sin
estado como con estado. ¿Pero, qué es esto?
Lo que hace es decirle a Flutter que estamos usando un método de la superclase y que
tenemos la intención de usar ese método deliberadamente.

StatelessWidget:

Un StatelessWidget es una clase inmutable cuya representación visual no cambia una vez
creada.

Se utiliza para widgets cuya apariencia no depende de ningún estado mutable interno.
La clase StatelessWidget solo contiene datos que no cambian y métodos que no tienen efectos
secundarios.

Los widgets Stateless son más eficientes en términos de rendimiento ya que no necesitan
rastrear cambios de estado ni volver a renderizarse cuando el estado cambia.

Ejemplos comunes de StatelessWidget incluyen widgets estáticos como Text, Icon, Container, y
cualquier otro widget cuya apariencia no cambie durante la vida útil de la aplicación.

StatefulWidget:

Un StatefulWidget es una clase mutable cuya representación visual puede cambiar a lo largo
del tiempo.

Se utiliza para widgets cuya apariencia o comportamiento depende de cambios en el estado

interno del widget.

La clase StatefulWidget consta de dos partes: una clase StatefulWidget que es inmutable y una
clase State que es mutable y responsable de mantener el estado del widget y reconstruir la
representación visual del widget cuando el estado cambia.

Los widgets StatefulWidget son útiles cuando la apariencia o el comportamiento de un widget

dependen de factores como la interacción del usuario, actualizaciones de datos o eventos del
sistema.

Ejemplos comunes de StatefulWidget incluyen widgets como botones interactivos, campos de

entrada de texto, listas de elementos cambiantes, y cualquier otro widget cuya apariencia o
comportamiento pueda variar en función de las acciones del usuario o los datos recibidos.

En resumen, los StatelessWidget son ideales para representar elementos estáticos y sin
cambios, mientras que los StatefulWidget son útiles para widgets dinámicos cuya apariencia o
comportamiento dependen de cambios en el estado interno. Comprender cuándo y cómo
utilizar cada tipo de widget es esencial para diseñar interfaces de usuario efectivas y eficientes
en Flutter.

En Flutter, los widgets son los componentes básicos de construcción de la interfaz de usuario.
Representan desde elementos simples, como texto o imágenes, hasta elementos más
complejos, como listas desplegables o formularios interactivos. Flutter proporciona dos tipos
principales de widgets para construir aplicaciones: StatelessWidget y StatefulWidget.

StatelessWidget:

Como su nombre indica, un StatelessWidget es un widget que no tiene estado mutable interno.
Esto significa que una vez que se crea, su representación visual no cambia.
Los StatelessWidget son inmutables y, por lo tanto, más simples en términos de su
implementación y rendimiento. Son ideales para representar elementos estáticos y sin cambios
en la interfaz de usuario.

Ejemplos comunes de StatelessWidget incluyen widgets como Text, Icon, Container, Row,
Column, entre otros. Estos widgets representan elementos visuales que permanecen constantes
durante la vida útil de la aplicación.

StatefulWidget:

Por otro lado, un StatefulWidget es un widget mutable cuya representación visual puede
cambiar a lo largo del tiempo en respuesta a cambios en su estado interno.

Los StatefulWidget constan de dos partes: una clase StatefulWidget inmutable y una clase State
mutable. La clase StatefulWidget es responsable de crear el objeto State correspondiente, que
es el que mantiene el estado mutable y reconstruye la representación visual del widget cuando
es necesario.

Los StatefulWidget son útiles cuando la apariencia o el comportamiento del widget dependen
de cambios en su estado interno. Por ejemplo, un botón interactivo que cambia de color
cuando se presiona sería un StatefulWidget, ya que su apariencia cambia en respuesta a una
acción del usuario.

En resumen, los StatelessWidget y StatefulWidget son los dos tipos básicos de widgets en
Flutter, cada uno con sus propias características y casos de uso específicos. Comprender la
diferencia entre estos dos tipos de widgets es fundamental para diseñar interfaces de usuario
efectivas y reactivas en Flutter.

Cuando se dice que "el código comienza extendiendo una clase", se está haciendo referencia al
concepto de herencia en la programación orientada a objetos.

En el contexto de Flutter (y también en muchos otros lenguajes de programación), para crear

un nuevo widget, normalmente se crea una nueva clase que extiende una clase base
proporcionada por el framework. Por ejemplo, en el caso de Flutter:

Para crear un widget que no mantenga un estado mutable interno y sea estático, se puede
extender la clase StatelessWidget.

Para crear un widget que mantenga un estado mutable interno y pueda cambiar su apariencia
o comportamiento a lo largo del tiempo, se puede extender la clase StatefulWidget.

Cuando se extiende una clase, la nueva clase hereda todas las propiedades y métodos de la
clase base, y se puede agregar funcionalidad adicional o modificar el comportamiento según
sea necesario. Esto permite crear widgets personalizados que se adapten a las necesidades
específicas de la aplicación.

Por ejemplo, al crear un nuevo widget en Flutter, podría comenzar así:

class MiWidget extends StatelessWidget {

// Implementación del widget...
}

En este caso, estamos definiendo una nueva clase llamada MiWidget que extiende la clase
StatelessWidget. Esto significa que MiWidget heredará todas las características de StatelessWidget y
podemos agregar la lógica necesaria dentro de MiWidget para definir su apariencia y
comportamiento.

El concepto de widget en Flutter es fundamental para comprender cómo se construye la

interfaz de usuario en esta plataforma de desarrollo de aplicaciones móviles. Permíteme
ampliar este concepto lo más posible.

En Flutter, un widget es cualquier objeto visual o de diseño que conforma la interfaz de usuario
de una aplicación. Los widgets en Flutter son más que simples elementos visuales; son los
bloques de construcción básicos de la interfaz de usuario y pueden representar desde
elementos simples como texto o imágenes hasta elementos más complejos como listas
desplegables, formularios interactivos y animaciones sofisticadas.

Aquí hay algunos aspectos clave del concepto de widget en Flutter:

Componentes Reutilizables: Los widgets en Flutter son componentes reutilizables que

encapsulan la lógica y la apariencia de un elemento de la interfaz de usuario. Esto promueve la
modularidad y facilita la construcción de interfaces de usuario complejas al dividirlas en
componentes más pequeños y manejables.

Composición Jerárquica: Los widgets en Flutter se organizan en una jerarquía de árbol, donde
cada widget puede tener cero o más widgets secundarios. Esta estructura de árbol de widgets
permite componer interfaces de usuario complejas combinando widgets simples en estructuras
más complejas.

Estado y Construcción Declarativa: Flutter sigue un enfoque de construcción declarativa, lo que

significa que la interfaz de usuario se describe en términos de su estado y cómo debería verse
en función de ese estado. Los widgets en Flutter son inmutables y se reconstruyen cuando
cambia su estado, lo que hace que la construcción de interfaces de usuario sea más predecible
y fácil de razonar.

Personalización y Estilo: Los widgets en Flutter son altamente personalizables y admiten una
amplia gama de estilos y temas. Esto se logra mediante la combinación de widgets básicos y la
aplicación de propiedades de estilo, como colores, fuentes y márgenes, para adaptarse a los
requisitos de diseño específicos de la aplicación.

Eventos y Gestión de Interacciones: Los widgets en Flutter pueden responder a eventos de

entrada, como toques, desplazamientos y gestos, mediante el uso de controladores de eventos
y gestores de interacción. Esto permite crear interfaces de usuario interactivas y receptivas que
respondan a las acciones del usuario de manera adecuada.

En resumen, en Flutter, los widgets son los bloques de construcción básicos de la interfaz de
usuario, que permiten crear aplicaciones móviles con interfaces de usuario sofisticadas y
receptivas. Su naturaleza reutilizable, su composición jerárquica y su enfoque declarativo hacen
que Flutter sea una plataforma poderosa y flexible para el desarrollo de aplicaciones móviles.

El método build() es uno de los conceptos fundamentales en Flutter y es central para entender
cómo se construyen y actualizan los widgets en la interfaz de usuario. Permíteme explicarte
este método con un poco más de detalle.

En el contexto de Flutter, el método build() es un método que debe ser implementado por
cualquier clase que extienda StatelessWidget o StatefulWidget. Este método es responsable de
construir y devolver la representación visual del widget en la pantalla.

Aquí hay una descripción paso a paso del proceso que ocurre cuando se llama al método
build():

Invocación: El método build() es llamado por el framework de Flutter cuando el widget necesita
ser construido o reconstruido. Esto puede ocurrir inicialmente cuando se inserta en el árbol de
widgets, o cuando su estado cambia y necesita ser actualizado.

Construcción del Widget: Dentro del método build(), se crea una jerarquía de widgets que
define la apariencia y el comportamiento del widget en la interfaz de usuario. Esto
generalmente implica la creación de widgets hijos y su configuración, definiendo cómo se
disponen en la pantalla y cómo responden a eventos de entrada.

Devolver Widget: Una vez que se ha construido la jerarquía de widgets, el método build()
devuelve un objeto de tipo Widget que representa el widget en la pantalla. Este widget se
renderizará en la interfaz de usuario según las especificaciones definidas en el método build().

Es importante destacar que el método build() debe ser puro (pure) y no tener efectos
secundarios. Esto significa que no debe realizar operaciones que cambien el estado interno del
widget o tengan efectos secundarios en la aplicación. El propósito del método build() es
simplemente describir la apariencia del widget en función de su estado actual, sin realizar
ningún cambio real en el estado.

En resumen, el método build() es esencial en Flutter ya que define cómo se construye y

actualiza visualmente un widget en la interfaz de usuario. Es llamado automáticamente por el
framework cuando sea necesario y debe devolver una jerarquía de widgets que represente la
apariencia y el comportamiento del widget en la pantalla.