Widgets con estado y sin estado

🎈 Identificando los widgets de Telegram en Android:
StatefulWidget:
Drawer
FloatingActionButton
StatelessWidget:
ListView
Text
CircleAvatar
Image
Container
Row
Column

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.

Analice la app de Spotify para ios
Color Rojo StatefulWidgets,
Color Verde StatelessWidgets

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.

Widgets Stateful : Todos aquellos con los que tiene interacción el usuario.
Widgets Stateless: Son aquellos con los que el usuario no puede interactiar

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.

https://docs.flutter.io/flutter/widgets/InheritedWidget-class.html

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.

Un Text puede ser con estado? Agregarle algún tipo de interacción?

Widget Statefull = rojo
Widget Stateless = verde

si un widget cambia de acuerdo a la acción de otro widget, entonces es con estado o sin 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?

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

Identificando Widgets en Twittter Android:
StatefullWidget
-Button
-Container
StateLessWidget:
-Text
-List View
-CircleBorder
-Icon

widgets con estado:wathapp

Listiview
Tabs
searchbutton

widgets sin estado
text
image

Duolingo:
StatefullWidget

• Button
• Menu
• Input de Texto
• RadioButton

StatelessWidget:

• Icono
• Texto
• Audios??

4 vez que lo veo, ahora ya entendi 😂

En la aplicación de Money Pro:

• StatefulWidget => con estado (azul).

• StatelessWidget => sin estado (rojo).
  

  

Cuando tomé la clase de Dart no tenía mucha motivación aunque sabía que era una gran oportunidad, ahora con este curso realmente se siente como el lenguaje del futuro
Muy emocionante futuro

Yo creo que del wasap, el slider… Creo!! 😃

Identifique 😃
StatefulWidget:
Drawer
BottomNavigationBar
RaisedButton
StatelessWidget:
Text
Image
Container
Row
Column
Stack

Resumen del tema de Widgets Básicos

1.- Texto
2.- Row
3.- Columna
4.- Stack
5.- Container

Existen 2 tipo de Widgets:
1.- Widgets con estado
2.- Widgets sin estado

En la app de platzi hay muchos StatefulWidgets

En instagram, los widgets con estado serían el muro (scroll) el botón de like comentar compartir. Los widget sin estado quizás el texto de la descripción en un perfil ya que no se puede hacer tap.

Al estar avanzando en la comprensión de los conceptos de Flutter, estoy impresionado en la manera en la que se asemeja a React.js . Es una suerte que por razones laborales haya tenido que aprender React hace unos meses y ahora me está resultando muy útil, ya que acorta mucho la curva de aprendizaje.
Hasta ahora estoy muy entusiasmado con Flutter. Pienso implementarlo en mis proyectos personales.
Sigamos con el curso!

En Telegram (en la UI de la conversación) parece que casi todo es interactivo excepto las secciones en sí, que agrupan a los widgets, pero como también son widgets (porque en Flutter TODO es un widget), pues deben ser del tipo Stateless.

INSTAGRAM

Widget con estado(StateFulWisget):

• Botón de guardar
• Botón de Me gusta
• Buscador
• Botón de Enviar

Widget sin estado (StateLessWidget)

• Biografía.
• Logo de instagram.
• Descripción de un post.
• Foto de perfil.

Hola comunidad, la lista que identifico:

Stateless
Íconos,
Textos,
Imágenes

Statefull
botones,
menú,
lista

StatefulWidget
StatelessWidget

identificando los widgets de Instagram en Android
StatefullWidget
Botones de Like, save, share, cambios de pestaña o ventanas
Circulos de story (FloatinsActionButton)
ListView
StatelessWidget
Descripcion de imagen, texto, icono Text

En la app de mi gimnasio, pude encontrar los elementos señalados de verde como StateLessWidgets ya que no poseen alguna interacción. Por otro lado los de color rojo los identifico como StateFulWidgets debido a que son botones con los que puedo interactuar

Widget con Estado
StateFulWidget (El Usuario interactua con él)
Checkbox
Radio
Slider
Form

Widget Sin Estado:
StateLessWidget ()
Icon
Text
Conteiner

Widgets de HBO Max:
Stateful Widgets:

• Slider
• Las cards de las películas en continuar viendo

Stateless Widgets:

• Stack
• SideMenu
• ListView
• Container
• Icon
• Text
• Image
• Row
• Column
• Cards

El que más uso en YouTube es la barra de navegación que está en la parte inferior de la aplicación.

Nunca he pensado en los elementos como elementos accionables o elementos estáticos. Para mí esa es la diferencia entre estos dos tipos de widgets, aquellos con los que el usuario final puede interactuar (statefull) y aquellos que el usuario final va a visualizar pero no generar ninguna acción en nuestra aplicación (stateless).

EXCELENTE! Ann explica muy bien, todo entendido.

¡Genial, esta muy clara la explicación!
StateFulWidgets: inputs como areas de texto de entrada, botones, formularios.
StateLessWidgets: contenido estático como imagen, color, texto, icono.

Excelente!!

Buena comparaciòn entre los tipos de wiggets.

A lo que entiendo los Widget tienen la forma(estructura) de un xml o json, aunque más se parece a un json con herencias.

StatelessWidget = Widgets estáticos
StatefulWidget = Widgets dinámicos

En Whatsapp todo tiene interacción excepto el título.

Me va quedando claro! Sigamos…

En flutter podemos definir que widget va administrar el estado.En la documentación lo explica.Aquí les anexo el link.
https://flutter-es.io/tutorials/interactive/#managing-state

Me encontraba analizando Alibabay literalmente todo tiene estado, unicamente el SplashScreen es la que no tiene estado, ya que solo muestra logo tipo y nombre de la aplicación, quedandose estática mientras carga completamente para ingresar a la app, de resto todo, barra de busquedas, contenedores de productos, productos como tal… Y analicé esta aplicación porque Google alardea de que Alibaba utiliza flutter como Framework de desarrollo

Sin embargo los textos no tienen estado y unos cuantos iconos

Estaba viendo iFood… sin estado sería la pantalla de cargando y varios de los textos… porque con estado sería casi todo; casi todo es de interacción: las fotos de comida, cada entrada que se muestra, barra de búsqueda, dirección, botones, etc.

Lo que entendi de la clase es basicamente que un Wildgets con estado es aquel con el cual el usuario puede interactuar, mientras que los sin estado son aquellos que basicamente son mera estetica pero en casos especiales puede evolucionar a con estado

Rojo = stateless
Azul = stateful

widget con estado : interactuan con el usuario como lo son: checkbox,listbox,scrollview
widget sin estado : no interactuan con el usuario, como lo son: imagenes, textos…

Super!!

Widget con estado: interactuan con el usuario, en mi caso una aplicación que utilizo serian los botones.
Widget sin estado: no interactuan con el usuario, en mi caso una aplicación que muestra el icono que no forma parte de la interacción con el usuario

Viendo whatsapp en una conversación, los mensajes como tal interactuo con ellos, la caja para escribir, el clip, el cosod e imagen, el boton para grabar audio, el boton de emoticons, la barra superior al apacharla se despliega el contacto, el telefono para llamar y los tres puntos para abrir otras opciones

si no entendí mal, sucede como en react native cuando se pone setState los widgets con estado, con razón decía que está inspirado en react native 😄

Podrian ser los emojis de facebook o los me encanta de INSTAGRAM

Un StatefulWidgets puede ser un boton, un radio que realice una acción, mientras que StatelessWidgets puede ser un texto o icono que solo muestre información o una imagen respectivamente.

En resumen, un widget con estado (StatefulWidgets) puede contener widgets sin estado(StatelessWidgets) y viceversa.

Mi app favorita es Platzi en ella encuentro:

• Widgets con estado: icono de buscar, icono para transmitir en TV, botones en forma de texto, botones en forma de imagenes, etc.
• Widgets sin estado: titulos, subtitulos, textos, imagenes, etc.

segun lo que entendi,

los widgets con estado, son todos aquellos donde el usuario interactuan y estos generan una acción ya sea ir a la sig. pantalla o mostrar un mensaje.

sin estado, son los elementos fijos que no interactuan con el usuario como los iconos, textos.

Con estado: Botones, inputs, selectores, iconos, scroll,
Sin estado: Imagenes, textos

Con estado: El ícono para entrar a una app, botón de llamar, botón botón de cerrar chats.
Sin estado: Texto con el nombre de la app, imágenes.

como quedaria un widget anidado con otro widget?
por ejemplo un widget con estado dentro de uno Sin Estado.
se podra esto?

En cuanto a la app de Spotify considero que un ejemplo de los widgets con estado pueden ser:

1. Los sliders donde aparecen la lista de canciones escuchadas recientemente y las sugerencias de canciones para escuchar.

2. El botón de configuración que aparece en la parte superior derecha.

Los widgets sin estado en este caso serian:
Por ejemplo la imagen referente al álbum o al artista que estoy escuchando.

Ya voy 3 clases y Android Studio me sigue diciendo “Running Gradle task ‘assembleDebug’”… jeje

Servicio de paqueteria, da a conocer la ubicación de tu pedido

En resumen sería que los Widgets con estado son los que al momento de interactuar con ellos lanzan alguna función como abrir algo, cambiar el color, etc. Y los Widgets sin estado son con los que el usuario no puede interactuar como los textos, bordes, iconos, etc.

La aplicación que escogí es la de colpatria en Colombia en la pantalla de carga tiene varias animaciones y en la pantalla de inicio tiene varios widget que supongo que son container y la barra de navegación en la parte inferior.

En redes sociales, lo más usado son las cajas de textos (inputs) para crear estados o comentar y el botón (button) para publicar dicho estado, esos serian widgets con estado.

Genial!

Con estado: Aquellos que se heredan de stateFulWidget con los que el usuario interactua.
- Checkbox, radio, slider, form, button.

Sin estado: Aquellos que se heredan de stateLessWidget y no interactua.
- Icono, texto, contenedor con color

En android un usuario puede interactuar de manera predeterminada con elementos como Buttom, EditText, FloatingActionBottom, ImageBottom.
Excelente clase. Entendi muy bien la definicion de stateful u statless

En Forest casi todos los objetos permiten llevar a otras vistas, cambiar configuraciones, etc.
Todos los naranjas serían StateFulWidget, como el slider, el menu bar, en este caso incluso la imagen permite interacción y acceso a otros features.
Los únicos StateLessWidget serían los textos en blanco y las monedas

build es a print en flutter como lo es en dart?

En el instagran los botones

Otros elementos son el Botón, la caja de texto, el botón desplegable, entre otros.

y que pasa con los gesto, son considerados widgets con estado o sin estado?