Flutter dipone principalmente de dos tipos de Widgets:
Widgets con estado o StatefulWidgets
Son todos los widgets con los que el usuario de la aplicación puede tener una interacción directa. Por ejemplo: Checkbox, Radio, Slider, Form. Este tipo de widgets por lo general disparan algún evento, acción o comportamiento determinado como respuesta a la interacción con el usuario.
Widgets sin estado o StatelessWidgets
Los widgets de este tipo no reaccionan ante el intento de interacción con el usuario. No tienen asociado una acción o comportamiento particular. Son estáticos en la interfaz. Por ejemplo: Icono, Texto, Contendor con color, entre otros.
Ambos tipos de widgets heredan sus características y comportamientos de una clase principal Widget.
🎈 Identificando los widgets de Telegram en Android:
StatefulWidget:
Drawer
FloatingActionButton
StatelessWidget:
ListView
Text
CircleAvatar
Image
Container
Row
Column
Muy buena
Gracias
La diferencia que más me ha servido para entender estos conceptos es la similitud que hay entre los conceptos Stateful y Stateless de Angular, o Componentes Presentacionales y Componentes Stateful.
La principal diferencia es que un componente presentacional o stateless simplemente se limita a recibir una entrada, y ante una misma entrada, devolverá una misma salida, es decir, no guardan un estado internamente, ni lo reciben para modificarlo internamente y tras el procesado enviar una salida modificada. Simplemente se limitan a mostrar la información que reciben de una forma u otra.
A diferencia los componentes Stateful o widgets en el caso de flutter permiten contener elementos que sí cambiarán con el ciclo de vida de dicho Widget y por ende de la aplicación, por tanto modificarán su estado (del propio widget) o de algún widget padre que lo inyecte en dicho widget hijo, cambiando dicho estado en el ciclo de vida del widget a través de la propia funcionalidad del mismo.
gracias, buen aporte!
excelente aportacion
Analice la app de Spotify para ios
Color Rojo StatefulWidgets,
Color Verde StatelessWidgets
Justo iba a usar esta app jaja, muy bien!!!
Gracias amigo, al final cuál analizaste?
En la app de Platzi casi todo seria con estado salvo la parte donde ponen titulos o descripcipnes el resto todo tiene una interación. 😄
Azul sin estado y lo rojo con estado.
Excelente aporte!
Trata de ir más al fondo analizando cada Widget anidado 😃
buen ejercicio compañero.
Widgets Stateful : Todos aquellos con los que tiene interacción el usuario.
Widgets Stateless: Son aquellos con los que el usuario no puede interactiar
Para los widgets Stafeul no necesariamente tiene que interactuar el usuario con ellos. Por ejemplo: puede ser una animación de carga que consulta datos externos y luego al terminar de cargarlos cambia a otra pantalla o habilita otro widget.
La app de Platzi.
Verde: Widgets con estado o SatatefulWidget
Rojo: Widgets sin estado o StatelessWidgets
Otro widget que sirve mucho en desarrollo es el InheritedWidget 😄
Este nos permite acceder a lo que declaremos en este, desde hijos no directos de nuestro árbol de widgets.
Este video lo resume muy bien estos widgets: InheritedWidget:
InheritedModel:
Genial, gracias por compartirlo.
Esta diferenciación de Widgets me recuerda mucho a los dos tipos de componentes que maneja React: los componentes funcionales y los componentes que extienden de React.Component; con la salvedad de que aquellos tienen que ver con la disponibilidad de los eventos / métodos asociados al ciclo de vida de los componentes, más que con la interacción.
pues si como dijo al principio esta inspirado en react
Yo no tengo telefono por ahora pero busque un template en internet y aqui dejo mi analisis.
Los recuadros de negro son StatefulWidget
Muy buen análisis, gracias por compartir tus aportes :D
Un Text puede ser con estado? Agregarle algún tipo de interacción?
Puedes agregar eventos pero al elemento TextField
Aqui puedes ver que otros eventos son soportados
Sí te refieres a un texto plano en la pantalla , SI , tendrias que crear un stateful Widget al cual le aplicas eventos para que cambie de estado , y el texto dentro de tu Text seria una variable la cual cambie al cambiar de estado
Widget Statefull = rojo
Widget Stateless = verde
al revez, los verdes son StateFull
si un widget cambia de acuerdo a la acción de otro widget, entonces es con estado o sin estado?
No tengo respuesta a tu pregunta, pero me surge una duda respecto a las preguntas.- Estas preguntas no pueden ser respondidas por el staff de platzi ?, o por Anncode ? que pasa si nadie sabe la respuesta? quedara esta pregunta sin resolver por meses y meses ?
Con estado mi gran amigo.
Como recordaremos los Widget que te permiten tomar acciones frente a algún evento son llamados widget con estado, independientemente quien sea el emisor de este evento de propagación al cambio de estado.
Los mas complejos que vi fueron: StatefulWidgets:
Administrador de tareas/aplicaciones activas
Patron de acceso
Menu de aplicaciones
Identificando los Widgets de Pinterest:
Los de color rojo son los statefulwidgets
Los color azul son los statelesswidgets
Tiene que ser una interacción directa del Widget con el usuario, algunos textos(Widgets ) cambian por que el usuario interactua con otro componente. ¿ se podría considerar StatefulWidget?
Hola, puede tener interacción con otros componentes, pero siempre y cuando tenga estado puedes considerarlo como StatefulWidget.
Para mi un StatelessWidget es como una página .html estática y un StatefulWidget es como una página .php, en la cual le puedo añadir contenido dinámico (Reactivo si añado VUE pero es otro tema). Se entiende la idea, creo que sería así, igual estoy abierto a comentarios
Identificando tipos de widget de Opensea
StatefulWidgets | De color violeta
StatelessWidgets | De color verde
StatelessWidget es estatic no interactua con el usuario
StatefulWidget es dinamico, interactua con el usuario