Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Flutter

Curso de Flutter

Anahí Salgado Díaz de la Vega

Anahí Salgado Díaz de la Vega

Clase StatefulWidget: Cómo se compone

31/38
Recursos

Flutter maneja fundamentalmente dos clases de Widgets, los que heredan (o extienden) sus propiedades y comportamientos a partir de la clase StatelessWidget y los que heredan (o extienden) de la clase StatefulWidget. Comprender la diferencia entre estos dos tipos de Widgets será especialmente importante cuando vayamos a programar la lógica de nuestra aplicación.

Lo primero que debemos comprender es qué significan los términos Stateless y Stateful:

  • Stateless: sin estado. (Que es inmutable. Que no cambia)

  • Stateful: que posee estado. (Que puede cambiar)

El estado es un concepto propio de la programación funcional, y en términos muy generales se refiere al valor o situación de todo el conjunto de variables, métodos y funciones contenidas en una clase en un momento dado. Para ilustrarlo un poco, sería como una “fotografía” de todos los valores asociados a una clase. Lo peculiar de este concepto es que un estado puede ser mutable, que puede cambiar o ser cambiado en algún momento durante la ejecución de la aplicación, dependiendo de algún evento o variable externa; o, por otro lado, pudiera ser inmutable, que nunca cambia, o que sus valores no dependen de ningún elemento o evento externo o interacción con el usuario.

En síntesis, el State es un tipo de clase particular que almacena la situación, o el estado, de un Widget durante la ejecución de la aplicación y, como parte de su comportamiento, presta atención a los eventos o interacciones externas que le sucedan a éste y que puedan generar una modificación o alteración de sus propiedades, métodos o funciones. Como resultado, el State devuelve una nueva “fotografía”, con la nueva situación ya cambiada del Widget y este se vuelve a renderizar en la interfaz.

En las clases siguientes veremos de forma práctica estas diferencias.

Aportes 39

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

esto se descontrolo jaja

Los StatefulWidget son por si mismos, inmutables. La mutabilidad del widget se guarda dentro del objeto que extiende de State. Lo que sucede internamente es que nuestro State, al recibir una interacción, llama otra vez al método build de nuestro widget.

Estoy a un widget de tener un ACV (Accidente cerebro vascular)

Me he dado cuenta que en el intento de explicar la docente muchas veces se equivoca, y a la larga resulta un poquillo molesto, un ejemplo en el min 1:52 donde trata de mencionar que _PlatziTrips extiende de State, el error está en que menciona a PlatziTrips como una “colección”, cuando en realidad la clase State a través de la notación diamante "< > " define que recibe cualquier clase que extienda de StafulWidget, por eso va PlatziTrips, la clase declarada arriba, y no como cito textualmente “es una colección de PlatziTrips”.
Para una persona un poquillo mas avanzada no le afecta, pues se da cuenta, pero en el caso de los que están comenzando puede generar algunos problemillas, no solo en este caso, pues como mencioné ocurre en muchos videos.
Ojala no lo tomen a mal, es solo una observación para poder mejorar.

Para los que quieran saber más sobre la propiedad Alignment del layout Stack, les dejo dos videos de Youtube que explican bastante bien esta parte

Flutter Layouts Walkthrough: Row, Column, Stack, Expanded, Padding

Flutter Layouts for the CSS Developer

Para recordar:

— Estructura estándar de un Scaffold

return Scaffold(
  appBar:               , // --- barra de título
  body:                 , // --- contenido principal
  bottomNavigationBar:  , // --- navigación
  floatingActionButton:   // --- botón de acción
)```

...

Todos al ver esta clase:

“Mmmmmmmm… no te entendí nada, mejor lo veo ya aplicado en código en la siguiente clase 🤓”

Qué buena clase, clara y de la mano.

Buen curso el de flutter, y luego haré el avanado ❤️

Es casi igual que react this.setState({‘clave’:valor}) aqui 100% la influencia de reactJs hacia flutter.
Genial clase.

Esta muchacha no sabe de lo que está hablando

Acá dejo el código de como lo implementé

bool isFavorite = false;

  void _onPressedFav() {
    setState(() {
      isFavorite = !isFavorite;
    });

    String _text = isFavorite ? "Agregaste a tus favoritos" : "Eliminado de tus favoritos";

    Scaffold.of(context).showSnackBar(
      SnackBar(
        content: Text(_text),
      )
    );
  }

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      onPressed: _onPressedFav,
      child: Icon(
        isFavorite ? Icons.favorite :  Icons.favorite_border
      ),
    );
  }

Retornando a react native?..
Porque una coleccion de widget del tipo de la clase que se declara con estado?, es un historial de estados anteriores? algo parecido a como trabaja react?

Una de dos, no sabe de lo que habla o no se sabe explicar.

Wow, a un estado morir en el intento jajaja

¡WTF! ¿Alguien más escuchó el golpe al final del video? 😰

Cómo uso el emulador de iPhone X?

Va quedando espectacular 😉

Va quedando perfecto!

Esto de los estados me recuerda mucho a los eventos en Javascript 🤔

A darle! 😄 😄 😄

Cómo uso el emulador de iPhone X?

es importante lo que comenta acerca de las clases ** _ClassName** que forma parte del widget principal

explicacion de las clases con class _ClassName extends State<ClasePadre>

Genial! 😄

gg

Un cambio tremendo 😮

tengo dudas aun por ejemplo tengo una y es si tengo un menu aparte y el main.dart en otra como uno o como los conecto para que el menu se muestre en el body con los otros elementos que estan hay, hemos visto en clases anteriores cuando todo lo del list view descripcion y el card img se unen para mostralos en la clase principal(main.dart) alguien me explica como se hace o hacerme entender

si quiero que un widget A cambie presionando un widget B, ambos son con estado…?

super

Interesante el comparar los “estados” que podemos contemplar como una fotografía. Excelente explicación!

Buenisimo

Genial

Super!

vamos =)

😮 oh my gosh! comienzo a confundirme

ahora se viene las clases donde más se debe atender.

Mind blowing pero con ejemplos practicos se entiende mucho mejor!

Empieza lo bueno, aunque sigo sin entender lo del codigo dentro de la función setState