esto se descontrolo jaja
Bienvenida e Introducción
¡Renovaremos este curso!
Desarrollando en Flutter
¿Qué es Flutter?
Dart y Flutter
Sintaxis de Dart
¡Renovaremos este curso!
Flutter para desarrolladores Android, iOS y Xamarin.forms
Flutter para desarrolladores React Native
¿Cómo luce una app construída en Flutter?
Primer reto
Creando mi entorno de desarrollo
¡Renovaremos este curso!
Requerimientos de Hardware y Software
Instalando Flutter en Android Studio y Visual Studio Code
Composición de un proyecto en Flutter
Interfaces en Flutter
¡Renovaremos este curso! Te quedan unos días para concluirlo.
Programación Declarativa en Flutter
Estructura de un programa en Flutter
Hola Mundo en Flutter
Widgets básicos
Widgets con estado y sin estado
Análisis de Interfaces de Usuario en Flutter
Definiendo los layouts de nuestra interfaz
Segundo reto
Widgets sin estado en Flutter
¡Renovaremos este curso! Te quedan unos días para concluirlo.
Flutter Widgets: Container, Text, Icon, Row
Flutter Widgets: Column
Recursos en Flutter: Tipografías y Google Fonts
Widget Image
Widget Apilando Textos
Widgets Decorados
Widget Imagen Decorada
Widget Listview
Widget Button, InkWell
Tercer reto
Widgets con estado en Flutter
¡Renovaremos este curso! Te quedan unos días para concluirlo.
Botones en Flutter
Clase StatefulWidget: Cómo se compone
Widget Floating Action Button
Widgets BottomNavigationBar
Generando Navegación en BottomNavigationBar
Personalizando nuestro BottomNavigation Bar a Cupertino iOS BottomBar
Cuarto reto
Fin del Curso
¡Renovaremos este curso!
Conclusiones
¡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
Paga en 4 cuotas sin intereses
Termina en:
Anahí Salgado Díaz de la Vega
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
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
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?