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

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 鈥渇otograf铆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 鈥渇otograf铆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 42

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 鈥渃olecci贸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 鈥渆s 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:

鈥淢mmmmmmm鈥 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
)```

...

Qu茅 buena clase, clara y de la mano.

Buen curso el de flutter, y luego har茅 el avanado 鉂わ笍

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

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

Yo en estos momentos:

Esta muchacha no sabe de lo que est谩 hablando

Wow, a un estado morir en el intento jajaja

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?

No entend铆 esta clase

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 鈥渆stados鈥 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