Bienvenida e Introducción

1

¡Renovaremos este curso!

2

Desarrollando en Flutter

3

¿Qué es Flutter?

4

Dart y Flutter

5

Sintaxis de Dart

6

¡Renovaremos este curso!

7

Flutter para desarrolladores Android, iOS y Xamarin.forms

8

Flutter para desarrolladores React Native

9

¿Cómo luce una app construída en Flutter?

10

Primer reto

Creando mi entorno de desarrollo

11

¡Renovaremos este curso!

12

Requerimientos de Hardware y Software

13

Instalando Flutter en Android Studio y Visual Studio Code

14

Composición de un proyecto en Flutter

Interfaces en Flutter

15

¡Renovaremos este curso! Te quedan unos días para concluirlo.

16

Programación Declarativa en Flutter

17

Estructura de un programa en Flutter

18

Hola Mundo en Flutter

19

Widgets básicos

20

Widgets con estado y sin estado

21

Análisis de Interfaces de Usuario en Flutter

22

Definiendo los layouts de nuestra interfaz

23

Segundo reto

Widgets sin estado en Flutter

24

¡Renovaremos este curso! Te quedan unos días para concluirlo.

25

Flutter Widgets: Container, Text, Icon, Row

26

Flutter Widgets: Column

27

Recursos en Flutter: Tipografías y Google Fonts

28

Widget Image

29

Widget Apilando Textos

30

Widgets Decorados

31

Widget Imagen Decorada

32

Widget Listview

33

Widget Button, InkWell

34

Tercer reto

Widgets con estado en Flutter

35

¡Renovaremos este curso! Te quedan unos días para concluirlo.

36

Botones en Flutter

37

Clase StatefulWidget: Cómo se compone

38

Widget Floating Action Button

39

Widgets BottomNavigationBar

40

Generando Navegación en BottomNavigationBar

41

Personalizando nuestro BottomNavigation Bar a Cupertino iOS BottomBar

42

Cuarto reto

Fin del Curso

43

¡Renovaremos este curso!

44

Conclusiones

45

¡Terminamos!

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Convierte tus certificados en títulos universitarios en USA

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

19 Días
17 Hrs
40 Min
36 Seg
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

37/45
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 41

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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.

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.

Todos al ver esta clase:

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

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
)```

...

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

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.

Wow, a un estado morir en el intento jajaja

Yo en estos momentos:

Esta muchacha no sabe de lo que está hablando

No entendí esta clase

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?

Para esos que se quejan de que no entendieron, ¿Todo bien en casa? Lo explicó bien sencillo, hahaha, xd

Si les cuesta entender un callback dentro de una clase, va a estar mortal lo que sigue, haha.

Pero ya en serio, intenten complementar en youtube o documentación oficial, no se queden con la duda!

¡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