Mira el bicho, se viene Flader, saludos de Colombia
Si amigos, hoy vamos a hacer Flader desde cero
He pedido enlaces, a ver si alguien me ponía enlaces de donde, como debería empezar
Ya veo que nadie me ha hecho ni puñetera caso
Pero bueno, Flader, para el que no sepa lo que es Flader
Pues como decís, vamos a empezar desde cero
Así que si no sabes Flader, no te preocupes
Yo tampoco tengo ni puñetera idea, es la primera vez que voy a hacer Flader en mi vida
De hecho, espero, espero y deseo que funcione todo bien
Porque con el tema de tener Silicon, muchas veces esto da problemas
Así que nada, vamos a darle cañita y vamos a ver que es Flader
Flader o Flutter
Sobre todo Flutter lo he escuchado aquí en España, que lo dicen mucho
Creo que no es la pronunciación correcta
Pero justamente dicen esto, le dicen Flutter aquí en España
Pero es Flader, ¿vale?
Entonces, ¿qué es esto de Flutter?
A ver, Flutter es un framework de Google
Que lo que nos permite es construir aplicaciones para cualquier pantalla
Me encanta esta descripción
Es muy chula esta descripción
Porque, ¿qué quiere decir esto de para cualquier pantalla?
Lo que quiere decir es que podemos hacer aplicaciones nativas
Tanto en iOS como en Android
Como escritorio, por ejemplo en MacOS, en Windows
Y también ahora podemos hacer páginas web con la misma exacta tecnología
La verdad es que tremendo, ¿no?
O sea, esto quiere decir que con un solo código
Pues podemos hacer diferentes tipos de aplicaciones
¿Esto a qué te suena?
¿A qué te suena?
¿Te suena a React Native, verdad?
Y es que Flutter, y esto es una cosa que al menos yo he leído
He leído por Google
Que se basó mucho en React
Cuando veamos un poco Flutter, cómo es su API y todo esto y el código
Vamos a ver que tiene un poco de inspiración a esa programación declarativa
Que traía React, el tema de los componentes
Aunque aquí se llama creo que widgets y cosas así, ¿vale?
Entonces, eso sería un poco la idea de Flutter
Hacer pues con un solo código
Aunque luego ya veremos que obviamente puedes mejorar
Y yo que sé, pues toquetear cosas de cada código
No creo que hoy lo veamos
Pues lo que podemos hacer es crear diferentes aplicaciones
Para todo tipo de pantallas
De móviles, aplicaciones nativas, de escritorio y tal
Hay gente que dice, ¿cuál es la diferencia entre React Native y Flutter?
A ver, el objetivo de ambas es lo mismo
Tanto Flutter como React Native lo que quieren es
Justamente que tú escribas una vez
Y puedas exportar esa aplicación en diferentes sitios
Pero es verdad que Flutter utiliza su propio lenguaje de programación
No utiliza JavaScript, sino utiliza Dart
Dart, por si no lo sabes
Y esto es muy interesante
Aunque podría estar hablando todo el día de la historia de Dart
Dart es la respuesta que tiene Google
Un poco para como trasladar Java
¿Vale?
Desplazar Java del ecosistema Android
¿Qué pasa?
Pues que de alguna forma la comunidad ha traído Kotlin
¿Vale?
Pero Google la idea que tenía en realidad
Era que Flutter
Ay, Flutter
Dart fuese el lenguaje de programación como oficial
Para lo que se viene del futuro de Android
Así que como vais a ver poco a poco
Le van a dar bastante y bastante más cancha
Y por eso Flutter solo y exclusivamente utiliza Dart
Yo no tengo ni puñetera idea de Dart
Espero que no sea muy difícil
Me imagino que no
Pero como puedes ver
Es un lenguaje de programación que puedes utilizar
Por sí solo
Y lo puedes utilizar también en la parte del servidor
Obviamente, mira
Está optimizado para la UI
Es parecida a JavaScript
A la vez es también
Esto de hecho creo que es
Si no me equivoco
Esto es Flutter
O sea que está un poquito
De hecho puedes compilar para JavaScript
Utilizando Dart
Mira aquí tendríamos un ejemplo
Main, print, hello world
Le darías aquí al run
Y aquí lo tienes
Y aquí tienes diferentes ejemplos
Por si lo quieres ver
Con funciones y tal
Nunca he hecho Dart
Así que también, por supuesto
Vamos a tener que aprender un poquito de Dart
Sobre la marcha
¿Vale?
A ver que me dice
Dart es muy parecido a JavaScript
Dart nació para matar a JavaScript
No creo que Dart naciera para matar a JavaScript
Creo que mató
Ha nacido para matar a Java
En Android
Para matar JavaScript
Lo tiene muy complicado
O sea
No puede
No puede
¿Sabes?
A no ser que ahora diga que Chrome
Chrome le va a dar soporte nativo
Sea un poco raro
Pero ya te digo que no
Si sabes Java
Sabes Dart
Es idéntico
Solo quizá por un poco de azúcar sintáctico
Vale
Pues no sé Java
O sea que no sé
No sé
Otro que dice que es muy parecido a TypeScript
Y otro tema importante
Es que Ubuntu ya está integrando Flutter
En los configuradores
Ah mira va
¿Cuándo vas a crear tu propio lenguaje de programación?
Hombre
Aún me queda
¿Es similar a JavaScript y Go?
Bueno
Como podéis ver
Tiene un montón de similitudes a un montón de sitios
Dice
No matemos a Java que me dedico a ello
Dice Isma
Yo no lo mato
Digo que Google
Como si no lo sabéis
Google ha tenido muchos problemas con Java
Muchísimos
Por temas de licencia
Por eso
Ha querido
Desplazar Java
De su ecosistema
Por si no sabéis
Esa es la razón
Por la que Google
Básicamente está haciendo esto
¿Vale?
Entonces
Vamos a continuar con esto de Flutter
Vamos a bajar un poquito
A ver qué nos cuenta
Dice
Flutter transforma el desarrollo de aplicaciones
El proceso del desarrollo de aplicaciones
La construcción
El testing
Despliegue
De bonitas aplicaciones móvil
Web y de desktop
¿Vale?
Flutter es open source
De Google
Por si no lo había dicho
Pero es de Google
Y bueno
Esto otra vez
Me encanta
Building
Beautiful
Bonitas
Nativas
Compiladas nativamente
Multiplataforma
Aplicaciones
Multiplataforma
Es rápido
Productivo
Y flexible
¿Vale?
Me gusta
¿Vale?
¿Qué más?
Rich users on everything
Esto que es multiplataforma
Que tiene una experiencia de desarrollo muy chula
Vamos
Eso lo veremos ahora
Que confían bastantes
De hecho arriba hemos visto ya
Un montón de aplicaciones
Que están hechas con Flutter
Por ejemplo esta es de
Bueno claro
De Google
Google Stadia
Esta creo que es la de Philips
De las luces
Pero bueno
Ya podemos ver que hay unas cuantas aplicaciones
Y a ver qué más
Developer Story
Bueno aquí todas las marcas
Que están utilizando Flutter
Y que utiliza Dart
¿Vale?
Aquí tendríamos las últimas noticias
Y venga
Los APK de Flutter
Son muy pesados
Ya es que eso es uno de los problemas
Get started
Venga vamos a empezar con Flutter
Vamos a ver si somos capaces
De instalarlo
En nuestro procesador Silicon
Tenemos Windows
Mac
Linus
Chrome OS
Pues yo quiero Mac OS
¿Vale?
Mira si estamos en China
Pone que hay que hacer algo
Mac OS install
System and requirements
Ojalá y espero
Y deseo
Que funcione todo bien
¿Vale?
Me voy a descargar esto
¿Vale?
Esto es valentísimo
Valentísimo esto
Hay servidores de Google
Bueno
Aquí dice
Descárgate este bundle
Para tener la última release
Estable de Flutter SDK
¿Vale?
Pues ya tenemos
Flutter SDK
Lo descomprimimos
Lee el cuadrado amarillo
Ya
Dice
Si estás instalando en un Mac
Con el último procesador
Del Apple M1
Que soy yo
Igual necesitas estas notas
Suplementarias
Útiles
Para leer
Para completar
Soporte
La arquitectura
Apple
Buenas Midu
Hola
Hola José
Buenas buenas
Vale
Aquí hay unas notas
Y dice
Dicen estas notas
Dice dos cositas
Dice
Por un lado
Dice que
Tenemos que tener
El sudo software update
Esto ya lo tengo hecho
¿Vale?
Esto ya lo tengo hecho
Básicamente
Esto se necesita
Porque Rosetta
Para mi procesador
Es el que se encarga
De
Traducir
Binarios
Que todavía
No están soportados
En Silicon
Y hace como
La transformación
Al vuelo
¿Vale?
¿Vale?
¿Vale?
Using Macos
Para desarrollar
Aplicaciones de Flutter
Dice
Puedes utilizar
Apple Silicon
Sin problemas
Según esto
¿Vale?
Según esto
Funciona bien
O sea
Lo único que
Puede ser
Que no vaya
No vaya del todo
Fino
En cuanto a que
No aproveche
Toda la potencia
¿Vale?
Pero según esto
Funciona bien
Y desarrollando
Flutter
Aplicaciones
Para Macos
¿Vale?
Como Target
Aquí pone que como Target
Si que es verdad que da problemas
Como Target no lo vamos a tener
Así que no me importa
Directamente
¿Vale?
Esto es
Host
Es que vamos a desarrollar
Desde Macos
Y Target
Es que vamos a compilar
A Macos
En nuestro caso
No vamos a compilar
A Macos
Así que no me importa
Esto
Y voy a abrir
Esto por aquí
Vale
Que tengo ya aquí
La carpeta Flutter
Y aquí nos dice
Que
Add Flutter
Tool
To your path
Vale
Pues lo que voy a hacer
Vamos a abrir aquí
Una nueva
Uy uy uy
Uy uy uy
Una nueva
En
Middle Dep
De hecho creo que
¿Ves?
Ya tenía por ahí
Instalado Flutter
Vale
Flutter
Middle Dep
Hola
Le daba
Ah vale
Es que sale aquí
Vale
Ya existe
Sí
Reemplazar
Pues reemplacemos
Vale
Pues se está reemplazando
Perfecto
Vale
He dejado esto por aquí
Y
Vale
Vamos a ver
¿Qué más tenemos por aquí?
Vale
Ahora ha terminado
Que ya se ha escuchado
¿Vale?
Add Flutter
Tool
To your path
Vale
Pues nos vamos a
Item
Lo he dejado aquí
Justamente donde está el usuario
Y aquí tenemos justamente
Flutter
Que es esto
Cookies sin consentimientos
Esto debe ser una
Screenshot que hice en algún momento
Y se quedó ahí por siempre jamás
Vale
Pues nos vamos a
Bueno pone
Que lo único que hay que hacer
Es exportar el path
Vale
Export path
No sé qué
No sé cuánto
Esto es donde estamos ahora
Flutter bin
Vale
Flutter
Verse
Versión
Vale
Esto es para que podamos utilizar
El binario desde cualquier sitio
¿Vale?
Y ahora ya pues estamos justamente
Ejecutando el binario de Flutter
O sea que ahora ya tenemos bien
La instalación se supone
¿Eh?
Todo bien
Vale
Empieza bien
Vamos a ver qué más nos dice por aquí
Bueno
Nos dice
Claro
Si yo ahora abro una nueva pestaña
Y intento ejecutar Flutter
Seguramente va a petar
Ah no
Ah no
Es que ha entrado
Ha entrado en el
Ha entrado en el
En el directorio
Si pongo esto
¿Ves?
Ha petado
Para arreglar esto
Debería ponerme
ZSHconfig este
A ver
Vamos a abrir una nueva ventana
Visual Studio Code
Por aquí
Y te voy a enseñar
Cómo voy a arreglar esto
Porque básicamente
Necesito arreglar esto
Porque si no
Voy a estar aquí todo el día
Vale
Tengo aquí
Bueno esta piquilla no funciona
Vale
Es que todos los secrets
Que tengo aquí
No sirven ya para nada
Vamos a poner
Espectacle
Bueno
Vamos a poner esto por aquí
Esto por aquí
Y aquí lo que podríamos hacer directamente
Vamos a poner esto
Eh eh eh
Que lo he puesto dos veces
Que ha hecho aquí
Vale
Vale
Pues con esto ya lo tendríamos
No os preocupéis
Esas secret keys son
No sirven
Eh
Las tengo de
Las tenía de prueba
O sea que
Tengo instalado Flutter
Tengo instalado el Android Toolchain
Tengo la It's Code
Tengo el Chrome
Tengo Android Studio
Visual Studio Code
¿Para qué mira Visual Studio Code?
¿Qué tiene sentido esto?
¿Para qué mira Visual Studio Code?
Justamente
¿Me he perdido mucho?
No te has perdido mucho
Eh
Lo del ZSH
Lo que tenía
No era para el prompt
Como tal
Eh
Lo que tenía justamente
Era para
Es como
Tengo algunos plugins
Y cosas así
Pero vais a ver
Que justamente
Eso no
O sea no sirve
O sea ya
Ya te viene por defecto
Cuando instale ZSH
Ya te lo
Te lo pone
Vale
Dice
Eso es lo que nos quieres hacer
Creer
Pruébala
Mira la YouTube
Apikí
Y pruébala
Ya verás como no funciona
Si funciona
Te doy una sub
Va
Pruébala
Corre
Y ya verás como no funciona
Lo sé porque la he probado
La he probado
Eso lo tenía cuando estuve desarrollando en local
La
El ritme de GitHub
¿Vale?
Cuando estuve desarrollando en local
El ritme de GitHub
Y muchas veces me pongo
Me pongo las apikis ahí
Y luego las borro
Y lo sé porque me conozco
Entonces
Aquí tenía estos vídeos de YouTube
Y ya verás
Porque
Hace poco
Intenté ejecutar en local
Y la apikí me decía
¿A qué no funcionan?
¿Ves cómo no funcionan?
¿Eh?
Que decían
Eso es lo que quiere hacerme creer
Ay
Las has probado y todo
¿Eh?
Gente más rata, ¿eh?
Que tenéis cuidado con esta gente
La leche
Vale
Pues bueno
Dicho esto
A mí me funcionan
Sí, sí
¿Y qué más?
¿Y qué más?
No te lo crees ni tú
Te lo crees ni tú
Vale
Pues venga
Ya que lo tenemos todo listo
Vamos a darle cañita
Ya vamos por aquí
Todo
Todo bien
Así que
Hasta aquí todo bien
No, esto nada
Flutter Precaché
¿Esto para qué sirve?
Flutter
Vale
Flutter va a descargar
Los binarios necesarios
Esto nada
Update your path
Esto ya lo hemos hecho
Platform setup
En este caso
Aquí depende un poco
De
De lo que queramos
O sea, si estamos en IOS
Si queremos
Trabajar con IOS
O lo que sea
Yo esto ya lo tengo
Porque eso es
Esto es instalar Xcode
Que ya lo tengo instalado
Esto creo que ya lo tengo
Creo que esto también lo tengo
Si no, ahora me
Se me quejará
Y esto sería para abrir el simulador
Voy a abrir
Mira, lo tengo aquí abierto justamente
Mira
Esto es porque antes
Estaba mirando que
Que se tenía algo de Flutter
De cuando lo tengo instalado
Y justamente tenía una aplicación
Así que
Justo la estaba eliminando
Porque ya instalé Flutter
Lo que pasa es que tiene una versión
Bastante antigua
Y he dicho
Bueno, empezaremos desde una
Y ya está
Vale
Pues Apple Simulator
Perfecto
Hardware device
Make sure your simulator
Is using 64 bit device
Vale
Eso sí
Depende de
¿Devolver machine
Screen side?
No sé qué
No sé cuánto
Pixel accurate
Bueno, esto da igual
Vamos a crear nuestra primera aplicación de Flutter
Y luego iremos viendo esto
¿Dónde estamos?
Aquí
Pues vamos a crear nuestra
¿Cómo le llamamos?
Vamos a intentar
A ver
Sé que no me va a dar tiempo
Ni en broma
¿Vale?
Pero vamos a intentar
Hacer una aplicación
Que se vea algo
¿Vale?
Así que
Hacker News App
Por si somos capaces
De hacer algo de esto
Cosa que dudo
Pero bueno
Todavía hay mucho que aprender
Así que
No, este no es el curso
Ah, no
No le gusta este nombre
Pues nada
Hacker News
Vamos a ponerlo todo junto
No, este no es el curso de NXJS
El curso de NXJS
Lo vamos a hacer
Si un clon de TikTok
¿Te imaginas?
Con lo que me costó hacer el otro
Hacer uno aquí
El curso de NXJS
Lo vamos a intentar
Lo vamos a intentar
No, lo vamos a hacer en febrero
Ya lo digo yo
Que lo vamos a hacer en febrero
CD Hacker News
Y vale
Pues voy a levantar el editor
Espero que nos reviente todo
Vale
Parece que todo ha ido bien
Vamos a ver un poco
Qué es lo que nos ha puesto aquí
En los directorios
Vale
Tenemos una carpeta
Dart Tool
Que esto lo que hace
No sé qué es
No sé para qué sirve esto
Pero me imagino que es algo
Bastante importante
Que no nos tenemos que preocupar
O sea, esta es la
La versión de Dart
¿Vale?
Idea
Esto creo que
Si no me equivoco
Esto es para
Intel EJ
¿No?
Creo que esto es
Como configuración para
Intel EJ
Android
Esto es donde tiene
Pues el manifiesto
Para la aplicación
De Android
Si queremos
Pues tener algo
Específico
Para la versión de Android
Todos los manifestos
Todos los iconos
Para la aplicación de Android
Todo esto
¿Vale?
IOS
Pues lo mismo
Pero para IOS
Básicamente sería eso
Y tendrías el proyecto
De Xcode
Tendrías también
Los manifiestos
Las configuraciones
Y todo esto
Lib
Aquí tendríamos
Entiendo
Que el punto de entrada
De nuestra aplicación
Con Dart
¿Vale?
Así que aquí
Sí que estaría
Nuestro código
Que podríamos empezar
A toquetear
Y aquí
Ahora sí
Tendríamos que
Cambiar cosas
Madre mía
La sintaxis
No me entero de nada
No me entero de nada
Bueno bueno
Menos mal que estoy aquí
Para aprender
Que si no
Vale aquí
Test
Y esta sería
La versión web
Vale vale
O sea que tiene
La versión web
Oye pues igual
Si la podemos levantar
En versión web
Igual la hacemos
En versión web
Que malda
Mi Mac mini
Tiene 8
16
Tiene 16
Tiene 16
Y si pudiera tener 32
Los hubiera puesto
Pero es verdad
Que no podía
Tener 32
La extensión de Flutter
Yo creo que la tengo
Es que ya os digo
Que Flutter
Lo instalé
Y no pasé
De nada
No hice nada
¿Ves?
La tengo aquí
Instalada
Flutter
Flutter support
Entiendo que es esta
Así que
Espero que funcione
De hecho
Vale vale
Si que tiene aquí
Como información
Vale pues también
Tendría aquí la versión web
Que más podemos ver
Por aquí
A ver no sé
Si lo llegáis a ver
Pero creo que
El más interesante
Si no me equivoco
Es este
Papspec.yaml
Los que vengáis
De
Node
Proyectos
Frontend
Y todo esto
Pues esto es como
El packet json
Entiendo que aquí
Es donde están
Las dependencias
Y todo esto
Por ejemplo
Tienes el nombre
La descripción
O sea como el packet json
Solo que no es json
Es jml
Aquí tendríamos
La versión
Del
O sea
Del proyecto
Y aquí tendríamos
Las dependencias
De Flutter
De SDK
De Flutter
Cupertino
Icons
Las dependencias
De desarrollo
Aquí tendríamos
Lo del inter
Para usar material design
Lo tenemos en true
Podemos poner
Los assets
Las fuentes
Y todo esto
Vale
Y luego
Los que están aquí
De punto
La verdad
Es que no tengo ni idea
Este dice
Que traquea
Las propiedades
Del proyecto
De Flutter
Vale
Usado por Flutter
Para las compatibilidades
Y actualizaciones
Y tal
Y este archivo
Pone que está
Depecated
O sea que
Ya está
Así de claro
Analysis options
Ni este ni idea
Pero también me imagino
Que es algo de configuración
Porque también es un jml
Y esto pues un xml
Que también tiene información
Para saber
Dónde están
Todos los recursos
Vale
O sea que ya lo hemos visto
Un poco todo
Y este pubspec
El punto log
Es parecido
Al package log
Vale
Donde tendríamos
Un poco como
Una imagen
De las dependencias
Que se han instalado
¿Ok?
Bueno
Pues no está mal
No está mal
Hasta ahora
Bien
Hasta ahora ha ido bien
La cosa
¿Vale?
Dice
Cd my app
Hemos visto ya
Lo que nos ha instalado
Flutter run
Si
Dice
To launch the app
In the simulator
Ensure that the simulator
Is running
And enter
Vale
Y si
A ver
Web setup
Has support for building
No sé qué
Cualquier aplicación creada
Con Flutter 2
Automáticamente
Se construye
Para la web
Para añadirle
Soporte a tu
A tu aplicación existente
No sé qué
No sé cuánto
Bueno
Vamos a intentar
Vamos a intentar
¿Vale?
A ver si funciona bien
Con el simulador
¿Vale?
Y si funciona bien
Con el simulador
Lo haremos en el simulador
Si por lo que sea
Funciona mal
Pues nada
Le echaremos un vistazo
De otra forma
Y ya está
Creo que haciendo run
Ya debería
Ya que tenemos aquí
El simulador abierto
Deberíamos ver aquí
Vamos a ver
Si funciona bien
Bien
Y si no
Pues lo haremos
De otra forma
Por ahora
¿Cómo va?
Está petando ya
El stream
Launching
Lib
Barra
Puede ser que
La compilación
Vaya más lenta
Por culpa
Del tema
De
De que estoy
Streameando
O sea que
Vamos bien
¿Sí?
Porque yo he escuchado
Cortes de la
Petó ¿Verdad?
Yo estoy
Escuchando cortes
De
Sí
Estoy escuchando cortes
Del audio
Hola
Hola
Hola
Damián
¿Cómo va?
¿Está petando todavía?
¿Va bien?
Peta un poco el audio
Bueno
Pues nada
Puede ser que tarde un poco más de lo normal
Porque lo malo
Lo malo de esto es cuando compilas
Claro que al final
El hot reload es muy chulo en Flutter
Pero
Deberá ser parecido
¿No?
No peta
Vale
Aguantemos
Mira
Terminado ya
Bueno
30 segundos
Hostia
En web es más ligero
Puedes hacer Flutter Run
Menos de Chrome
Vale
Si vemos que peta así
Lo
Lo cambiamos
¿Vale?
Así
Creo que el M
No puede streamear
Y corre una máquina virtual
Bueno
Bueno
Nosotros lo estamos haciendo
Lo estamos haciendo
Vale
Pues aquí tenemos nuestro
Hola mundo
La demo
¿No?
De Flutter
Básicamente
En la que tenemos aquí un botoncito
Que bueno
No lo estáis viendo
Pero os lo enseño ahora
Aquí lo tenemos
Donde le vas dando al más
Y se va incrementando
Lo que peta el stream
Es la barra
Del versus a la derecha
¿Qué?
¿El cómo?
Voy bien
Vale
Gracias
Gracias por avisar
Entonces
Tenemos esto
¿No?
Que le damos al más
Y se va incrementando
Vamos a ver si somos capaces
De entender el código
Vamos a jugar un poco con él
Y luego
Si os parece
Pues lo que podríamos hacer
Es tener
Ah
El Visual Studio
Barra de versus
Sí
Vale
Multiplatform
Learn
Ah mira
Development
Learn
Any way you want
Coin
Ostras
Esto está muy chulo
Start the beginning
Este soy yo
Vale
Esto ya lo he hecho
While you're installing
Sample gallery
Introduction to
Gidgets
Bueno
Building your first
Flutter app
Esto me parece
Me parece interesante
Me parece interesante
¿No?
Hacemos este
¿No?
Directamente
Podemos hacer este
Vale
Esto ya lo he hecho
Create the start
Vale
Esto más o menos
Ya lo he hecho
Tendríamos que empezar aquí
Vale
Vale
Pues podemos seguir este curso
¿No?
Me parece que la documentación
Está bastante chula
Y mira
Son 27 minutos
Me parece bien
Pues si os parece
Hacemos este
Vale
Pues vamos a entender
Primero el código
Y seguiremos luego
Este curso que tenemos
Por aquí
Vale
Vamos a poner esto
Vamos a ver si lo entendemos
Lo que yo entiendo
Pensad que yo no tengo ni idea
De dart
Es la primera vez que lo miro
Y ya está
Se puede quitar el label
De debug con una propiedad
Inicial del widget
Vale
Pues ahora lo miramos
Vale
Debug show
Inbook
Debug
¿Dónde dices que pone?
En material app
Material app
Material app
Material app
Está el material app
Aquí
Material app
Y decís que aquí
Le puedo poner
Le puedo poner
Le puedo poner
Hostia
Es que ha escrito
Un montón de gente
De repente
Debug
Vale
O sea con esto
Se supone que
Se debería eliminar
Vale
Sigue apareciendo
Entiendo que el reload
Aquí he visto
Antes que tenga
Home reload
Con la R
O sea que hay que darle
Vale
Ahora sí que se ha eliminado
Perfecto
Lo que sí que veo
Es que hay que darle
Aquí a la R
Creo que hay una forma
De hacer esto
Iniciando el debugger
Pero bueno
Lo haremos después
¿Vale?
Por si acaso
Venga
Por ello
Lo que vamos a hacer
Import package
Flutter
Material app
Vale
Primero lo que estamos
Haciendo aquí
Es importar un paquete
O sea que esto viene
Como de las dependencias
Y tendríamos
Flutter
Barra
Material
Dar
Esto entiendo que son
Todos los widgets
Entendemos por widgets
En Flutter
Lo mismo que componentes
Básicamente
En React
¿Vale?
Y los widgets
Que implementan
Material Design
Esto
Digamos que es opcional
¿Vale?
Pero vamos a
Lo vamos a mantener
Para trabajar con ello
Void
Main
Y run app
Bla bla bla
Vale
Esto
Este método
Entiendo que es el punto
De entrada
De nuestra aplicación
Esta es la función
Que se va a ejecutar
Cuando iniciamos
Nuestro programa
Esto con Dart
¿Vale?
Recordad que todo esto
Es Dart
Así que aquí
Cualquier cosa
Que pongamos aquí
Sería lo que
Se iniciaría el programa
Con esto
Si yo pongo aquí
Lo del print
Ese que hemos visto antes
Pues justamente
Lo que tendríamos
Hola mundo
¿Vale?
Pues lo que entiendo
Que tendríamos aquí
Es que empezaría con esto
Avoid print call
Sin production code
Vale
Gracias
Perdón
Entonces
Run app
Aquí es una cosa
Que tengo que decir
Que no me gusta mucho
Por lo que estoy viendo
Es la magia
De donde sale esto
¿Sabes?
De donde sale este run app
Vale
Pues aquí podemos ver
Que viene de este paquete
Pero visualmente
No lo vemos
¿No?
Y este run app
Sería como el render
El react-down.render
Para que lo entendamos
¿Vale?
Y aquí este const
My app
Es que lo que queremos es
Ejecutar la aplicación
Que es justamente esta
Ya os he dicho antes
Que yo he leído bastante
Que el tema de Flutter
Se han basado mucho en React
Así que deberíamos entender
Que estos
Son como componentes
Estos dos de aquí
Este es un poco más especial
Que no tengo ni puñetera idea
De lo que es
Pero lo vamos a descubrir
Y tendríamos estos dos
Que serían como componentes
Y aquí tendríamos un componente
Que no tiene estado
Y aquí que sí que tiene estado
En el que no tiene
No tiene estado
Que es stateless
Tendríamos aquí
Const
My app
Llamando al super
Y le pasa como key
El key
¿Vale?
O sea, no entiendo muy bien
Esta
No entiendo muy bien
Esto de aquí a la izquierda
¿Qué quiere decir esto?
Esto exactamente
La verdad
Esto me ha dejado un poco loco
Esto sí que lo entiendo
Porque super
Es que llama al constructor
De select widget
Y como la propiedad key
Le pasa a la key
Lo que no he entendido muy bien
Es esta
Porque parece un objeto
Que tiene key
Que la key como que es opcional
Y le pasa a esta key
Esto no lo he entendido muy bien
La verdad es que ahí
Me ha dejado un poco loco
Esto no lo he entendido
Ya lo entenderemos
No pasa nada
¿Vale?
This widget is the root of your application
¿Vale?
Está haciendo aquí un override
Esto sí que se parece justamente
Al tema de Java
Que al final
Esta anotación
Lo que nos quiere decir
Es que estamos
Sobre escribiendo
Justamente
El método build
De widget
Que esto viene
Porque estamos extendiendo
De esta clase
Esto es programación orientada a objetos
¿Vale?
Pero bueno
Que no pasa nada
Esto es como que
Estamos
Esto tiene que tener
Un build por defecto
Y nosotros lo que estamos haciendo es
Vale
Hemos extendido
De la clase esta
Y vamos a sobre escribir
Justamente
Esto de aquí
¿Vale?
Y queremos que renderice esto
¿Qué es lo que estamos haciendo
De renderice?
Aquí tenemos como una especie
No es jcx
¿Vale?
Pero es como parecido
¿Vale?
Es como parecido
Esto es como si fuese así
Para que nos hagamos una idea
Para la gente que sabe React
Como yo
Pues esto sería algo parecido así
Y esto serían como
Las props
Que le estamos pasando
¿Vale?
Entonces
Lo que estamos consiguiendo con esto
Entiendo que es inicializar
Nuestra aplicación
Para que tenga todo
Como un provider
De todo lo de material
Le pasamos el title
Que aquí le podemos poner
El title que queremos
Por ejemplo
Vamos a poner
Hacker News App
Bueno
Vamos a seguir el curso
O sea que en este caso
Mira aquí ya de hecho
Nos dice
Welcome to Flutter
Pues vamos a dejar el
Welcome to Flutter
Y aquí en el theme
Tenemos la información
Del theme
Que entiendo que
Por ejemplo
Los colores y tal
De hecho con Autocomplete
Podríamos ver
El accent color
Todo lo que tenga que ver
Con el theme
Pues aquí le podríamos
Cambiar los colores
Lo que sea
¿Vale?
En este caso
Vamos a quitar
El primary swatch
Este
Vamos a
Todo esto lo vamos a quitar
Y el primary swatch
Vamos a ponerle otro color
Vamos a poner
Por ejemplo
Para que veamos la diferencia
Uy que bonito
Este Autocomplete
Que me salen los colores
Ahí a saco y todo
Que bonito ¿No?
Punto
Mira mira
Todos los colores ahí
Pam pam pam
Venga vamos a ponerlo
De color lima
Creo que también
De alguna forma
Se puede poner hexadecimales
No tengo ni idea
Pero entiendo que se puede
A ver
Color selection
Punto
Ah mira
Y se pueden utilizar
Como colores específicos
Dentro de
O sea
Una vez que tú pones el green
Tú aquí le puedes poner 50
Ah pues no
Pues pensaba que se podía
Pero no
¿Por qué?
¿Qué dice?
Llega el momento
Que no pienso
De tu primer material color
Ah
Porque tiene que ser
Justamente
Tiene que ser
Justamente uno de los
Ah que pena
Pensaba que se podía
Vale
Vale
Y aquí se le puede poner
Un hexadecimal en concreto
Pero entiendo
Que
Para el material design
Tiene que ser un color
En concreto
O sea
Uno de los colores
Como
De
De los
De los
Principales
¿Sabes?
Como que no puedes poner
Que a ver
Que hay un montón
Pero igualmente
Me sorprende
Vale
¿Qué más tenemos por aquí?
Material app
Home
Que entiendo que
Home sería como
La ruta por defecto
Cuando vamos a iniciar
Nuestra aplicación
Ah el 50 no existe
Que tenía que ser 100
Vale vale
Perdona
Vale
Pues home sería como
La ruta principal
Y aquí lo que estamos
Utilizando es justamente
El widget
O componente
En este caso
El widget
My homepage
Que le estamos pasando
Una propiedad
En este caso
Title
Con este string de aquí
¿Vale?
Aquí tendríamos el componente
My homepage
Otra vez con el tema este
Que la verdad es que
No entiendo
Aquí
Is an identifier
For widgets
Elements
And semantic nodes
Any widgets
Will only be used
To update
An existing element
Y si la key
Es la misma key
Del widget asociado
¿Vale?
O sea que esto es
Bastante parecido
Al tema de
Al tema de las keys
En React
¿Vale?
Es como para identificar
Justamente este widget
Lo que es eso
Que la
La sintaxis
Es un poco rara
Esta sintaxis
No ha terminado
De entender
La verdad
Es un poco rara
Este widget
¿Vale?
Da igual
No pasa nada
Vamos a seguir
Este widget
Es la
Vale
Esto es la ruta
Por defecto
¿Vale?
Este widget
Es pues
Homepages
De tu aplicación
Stateful
Significa que tiene
Un objeto
State
Que está definido
Más abajo
Que ahora lo veremos
Y esta clase
Es la configuración
Para el State
Guarda los valores
Al final el State
Es muy parecido
A lo que tenemos
En React Native
Y se usa
Con el método
Build
Del State
Cada campo
En el widget
Subclass
Están llamados
Como
Final
Que entiendo
Que quiere decir
Que final
Es como una constante
Que nunca va a cambiar
Su valor
O algo
Final
¿Vale?
Y aquí tenemos
El State
CreateState
Esto es un método
Que al final
Se devuelve esto
Que tenemos otra clase
Aquí
Que también
Vuelve a hacer lo mismo
Y aquí es donde
Tenemos justamente
El contador
¿Vale?
Hay una cosa
Que me sorprende
CreateState
Que en el CreateState
Tengas
De alguna forma
O sea
Porque aquí tienes
Overwrite
El State
O sea
Esto es como
Para la lógica
Del estado
Pero este estado
Que tiene aquí
Al final
También renderiza
Porque veis aquí
Que tiene
Scaffold
Y aquí también
Está renderizando
Cosas
Esto es muy raro
No es lo que esperaba
La verdad
O sea
No he esperado
Que MyHomePageState
Tuviese también
Todo el build
Del widget
Esto me
Me deja un poco raro
Me deja un poco raro
Empieza por Dart
Bueno
Vamos a intentar
Seguir más o menos
El curso
Y iré entendiendo
Dart un poco
Y si no
Ya iremos mejorando
No pasa nada
Muchas gracias
Por tu contenido
Tan didáctico
Yo estoy en mi segundo año
De desarrollo web
Y se agradece
A muchos canales así
Muchas gracias
Hombre
Drek
TMR
Bienvenido
Y a tope
Dale mucha cañita
Justo yo en mi trabajo
Empecé a desarrollar
Una aplicación de Google
Flutter
Pues mira yo también
El MyHomePage
Retornaría solamente
El State
Ya verdad
Pero es muy raro
Esto
Pero no es raro
Que a lo mejor
Se hace de otra forma
Si haces
Comando F5
Se inicia la app
De Visual Studio Code
Y cuando hay cambios
Guardas
Se utiliza la app
A ver
Para el hot reload
Lo que entiendo
Que hay que hacer
Es esto
De run and debug
Que es lo que dices
A ver si esto
No peta
Al stream
Ahora me dice
Si peta
Al stream o no
Puedes hacer un run
Sin el debug
Ah vale
Pues yo he puesto
El debug ahí
Yo he puesto
El debug
A tope
Ah porque este
Este ya no hace falta
¿No?
Vale
Ya está
Porque entiendo
Que si hacemos el run
Este
Bueno que claro
El debug no hacía falta
¿Qué es este?
Hot reload
Mira este sería
Hot reload
Stop
Open dev tools
Restart
Bueno vamos a ver
Si termina la build
Que eran unos 30 segundos
Y seguimos dándole
Bueno más o menos
Ya hemos entendido
Más o menos
Hemos entendido
Por encima el tema
Vale
Mira ya se ha puesto así
En verde
Ahora entiendo
Que si le pongo otro color
Yo que sé
Si le pongo red
Por decir algo
Y guardo
Verá
Ya tenemos hot reload
¿Vale?
Perfecto
¿Ha explotado?
¿Ha explotado o no?
¿Ha explotado?
Espero que no hombre
Bueno pues ya está
Ya tenemos más o menos esto
Vamos a darle
Vamos con el curso
Y así de esta forma
Entiendo que lo irá explicando
Un poquito más
Poco a poco
Y nos irá
Mira
User external package
Y todo esto
A ver vamos a poner esto por aquí
Voy a poner el chat
Para teneros
Vigilados siempre
Va bien
Vale no ha petado
Vale
Vale
Pues nos dice
Reemplaza el contenido
De leave main dark
Vale vamos a reemplazarlo
Voy a poner esto
Por aquí
Vamos a poner esto por aquí
Vamos a poner esto por aquí
Y esto lo vamos a poner
Por acá
Vale
Os pongo por aquí
Vale
Y esto lo ponemos por aquí
Vale nos dice que
Que hagamos otro contenido
Y tal
Que nos lo petemos todo
La verdad que tiene sentido
Porque así
Pues lo vamos a entender
Desde cero
Así que vamos a quitar
Todo esto
Vale
Y aquí ya
Ah que bien que tenga el linter
Ya lo tenga
Como configurado
O sea me parece
Fantástico
Ya no hay que hacer nada más
Vale
En home
Ahora lo que vamos a hacer
Es justamente
Poner esto del scaffold
Vale
Que el scaffold
Si no me equivoco
Es como
Como
Como definiría en castellano
Scaffold
Es como un
No es como un template
Pero sería como una plantilla
¿No?
Sería como una plantilla
Entiendo
Scaffold
Es como
Como todas las partes
Que tiene una cosa
Es como una plantilla
En la que tú le vas a decir
Tienes esto
Tienes lo otro
Y tal
De hecho lo que veo
Es que puedes decirle
El upbar
Que sería la parte de arriba
Y aquí
Podríamos pasarle
El upbar
Que nosotros queramos que tenga
Como le decía
Esqueleto
Es que el esqueleto me gusta
Lo que sostiene
Es verdad
La estructura
Estructura también
¿Vale?
El andamio
El andamio no está mal
Vale
Pues entonces
Aquí en scaffold
Como podemos ver
Mira
De hecho
Guija Copaleno nos dice
Tendríamos el upbar
El body
De hecho
El upbar sería la parte de arriba
El body sería lo de abajo
Y entiendo que tendríamos más cosas
Como por ejemplo
A ver
Drower
Pues un menú
Tendríamos por ahí
El floating action button
Sería el botón abajo a la derecha
Cosas así
Por ahora vamos a empezar
Con el upbar
¿Vale?
Y vamos a justamente poner esto
Upbar
Y le vamos a poner
Un title
Que va a ser
No sé por qué
Se pone este
Const text
Ah
Const text
Claro
Ahora entiendo
Ya os voy a decir el por qué
¿Vale?
Welcome to Flutter
Vale
Hasta aquí esto
Esto debería funcionar
No es muy bonito
¿Vale?
Pero esto
Deberíamos ir al simulador
Y aquí tenemos
Welcome to Flutter
Si le ponemos
Welcome to Midu
Y guardamos
Pues aquí
Welcome to Midu
¿Vale?
O sea que el upbar
Sería la parte de arriba
Ahora lo que vamos a hacer
Es cambiar justamente
Hostia
Lo que no me gusta mucho
Es como lo
Como lo pone todo
Como lo pone todo
Dios
Es un poco raro
Es un poco raro
¿Sabes que lo pone todo ahí?
Venga
Además una cosa que me raya un poco
Es el tema este
De estos comentarios de mentira
Que me pone aquí
Este comentario no lo he puesto yo
Sino que se pone directamente
Es un poco raro
Si es que no quiero que lo vuelva a reformatear
Porque me lo pone solo en uno
¿Vale?
Entonces
Lo que ha hecho aquí
Es ponerle el título
Y aquí tendríamos
También un primitivo
Que tenemos
Y utilizamos como widget
Es el de texto
Le pasamos un string
Y con esto tendríamos el texto
Que estamos viendo aquí
¿Vale?
O sea text
Es una cosa que ya te viene
Aquí puesta
De hecho vamos a poner otro
Pero aquí
Y aquí lo que vamos a utilizar
Es el center
El center lo que hace
Es centrar justamente
Un widget
Que centra a sus hijos
¿Vale?
Pues le vamos a pasar
El hijo que queremos centrar
Que en este caso
Pues sería
No sé para qué sirve
Este const text
La verdad
Ahora de luego
Lo
Porque yo entiendo
Que esto debería funcionar igual
¿No?
Ah
Prefer const
With constant constructors
Vale
No entendió
Bueno
Hola
Mido
¿Qué tal?
Vale
Const
Body
Esto sería body
¿No?
Espérate
Vale
Es que me está liando
Las
Este es el center
Vale
Es que veis como
¿Por qué lo pone aquí?
¿Sabes?
Porque quedaría mucho mejor abajo
Pero el tío me lo está poniendo
Cuando lo guardo
Me lo está formateando
Y me lo está formateando
Súper raro
Me lo está formateando
Súper raro
Me lo formatea
Y me los deja aquí
No sé
¿Sabes por qué?
Pon comas
Si tengo la coma ahí
Ah
Dices que ponga la coma
Al final del title
O sea
Que ponga la coma
Aquí
Anda
Vale
Interesante
Muy bien
Pongo al final
Para que no lo ponga
En una sola línea
Vale
Vale
Muy bien
Gracias
O sea
Hay que poner la coma aquí
Y entonces
Te lo separa mejor
Bastante raro
No nos vamos a engañar
Pero bueno
Vale
Ahora me lo ha dejado mejor
Creo
Me falta alguna coma
En algún sitio
Hay que poner comas
En todo sitio
Vale
Si vamos a nuestra aplicación
Vale
Tenemos el welcome to midu
Y aquí hello midu
Que tal
Esto como podemos ver
El app
El app bar
Es esta parte de app bar
Que es un widget app bar
Que tiene como título
El texto
Tal
Y en el body
Que sería el cuerpo de toda aplicación
Tenemos
Utilizamos lo del center
Esto
Lo que me tiene un poco rayado
Es porque algunos necesitan center
Y otros no
Pero a ver
No pasa nada
Porque justamente nos lo comenta
O sea
Es como que el primero
Necesita
Decirle constante center
Es como un poco raro
Que luego aquí el child
Pues por ejemplo
No necesito
De hecho
Avoid const keyword
Me tiene un poco confundido eso
Vale
El tema es que hasta aquí
Ya lo tenemos bien
Ya lo vemos todo perfecto
Fantástico
Entonces
Cosas que parecen interesantes
Vemos que tiene un estilo
Muy material design
Vale
Que la aplicación
Está extendiendo
De stainless widget
Porque justamente
Obvio
No tiene ningún estado
Al menos por ahora
Casi todo lo que no tenga estado
O sea
Por ejemplo
Cosas que el usuario
No va a interactuar
Por ejemplo
Yo que sé
Una imagen
Un icono
Entiendo que será
Extender de un stainless widget
Un texto
Por ejemplo
Cosas así
El scaffold
Como hemos visto antes
Este scaffold
Que tenemos aquí
Es el que tiene el esqueleto
Los andamios
Como habéis dicho vosotros
¿Vale?
El de los andamios
Y aquí pues podemos poner
El app bar
El título
Un body
Entiendo que también
El navigation
Que va abajo del todo
Y también el botón típico
El material design
Para que lo
Bueno
Igual lo podemos hacer después
Y luego el body
Justamente que es el cuerpo
De nuestra aplicación
Estamos centrando
El child
Que es el texto
Y por eso
Queda todo así
Vale
Perfecto
Así que
Vamos a ver
Que más nos tiene por aquí
Ya nos dice
Que podemos utilizar
Un paquete externo
¿Vale?
Estoy siguiendo el curso ese
Que os he enseñado antes
Y ya está
Dice
En este
Este paso
Vamos a utilizar
Un paquete
De código abierto
Llamado
English words
Que contiene
Unas cuantas miles
De palabras usadas
En inglés
Más algunas utilidades
Para hacer esto
Tenemos que abrir
Este
Pub.dev
Que sería como el NPM
Básicamente
Y ya está
¿Soy yo o es mi internet?
¿Qué ha pasado?
¿Qué he hecho yo?
No, va bien, ¿no?
¿O no?
¿Crees que es mejor Flutter
O React Native?
Pero si todavía no
No lo sé
No sabría decirte
Hombre, yo todavía
Yo diría
Yo diría que
Un poco pronto para decirlo
Pero
Creo que depende
De tus conocimientos
¿No?
Creo que depende
Un poco de tus conocimientos
Vale
English words
Flutter tiene buena pinta
La verdad
Pero como no tengo ni idea
Prefiero no compararlos
English words
Vale
English words
Vale
Veo que es muy parecido
Es súper parecido
A NPM
Súper parecido
Vale
Este sería el paquete
Que básicamente
Quieren que utilicemos
No sé
No sé
Vale
Entiendo que tendríamos
Que ir aquí
Tendríamos que ejecutar
Flutter
Pub
Oh que bueno
Que tengo los autocomplete
También de
Enfic
Es una
Fic
Es una maravilla
Add
Y aquí vamos a poner
English words
Esto es como el
NPM install
Vale
Así que añadimos
Nuestra primera dependencia
Vale
Se ha cambiado
La dependencia
Y ya tenemos
Dispuesto nuestro proyecto
Así que ahora
Lo que deberíamos hacer
Es volver a nuestro código
Y en nuestro código
Vamos a
Utilizar
Este nuevo paquete
Vamos a hacer un import
Y aquí
Package
Dos puntos
English words
English start
Vale
Punto y coma
Importante
Vale
Me dice que no estoy utilizando
Este import
Obviamente
Vale
Bien visto
Pero esto es el import
Hostia
Comentario chino
Comentario chino
Si pongo un comentario
Tiene que ser chino
Vale
Perfecto
Entonces ahora se queja
Porque no estamos usando
Pues nada
Vamos a utilizarlo
Y vamos a ver
Cuál es la gracia
De cómo se utilizan
Los paquetes
Y tal
Una cosa que veo
Que la verdad
Que me sorprende
Es el hecho
Que claro
Cuando tú importas
Es un import
Muy implícito
O sea
Si implícito
De forma que
Tú no sabes
Qué es lo que te está
Extrayendo
Es un poco raro
O sea
Entiendo que ahora
Si escribo por aquí
Por ejemplo
WordPair
Vale
Pues ya tengo aquí
Este WordPair
Que viene justamente
De este paquete
Pero qué pasa
Si importan dos paquetes
Que justamente
Tienen lo mismo
Entiendo que habrá
Alguna forma de arreglarlo
Pero bueno
Que en este caso
Pues me sorprende
Vale
Venga
Pues vamos a ver
En el widget
Vamos a crear
Un final
Y vamos a tener
Aquí
WordPair
Como veo
No es obligatorio
Que pongas
En las variables
En dar
Que pongas
De qué tipo son
Entiendo que
Lo infiere
Y luego
O tendrás que decirle
Que lo vas a cambiar
O no lo cambia
Vamos a poner
Random
Vale
Punto y coma
Y aquí
Deberíamos tener
Un WordPair
Y con este
WordPair
Vamos a utilizarlo aquí
En lugar de utilizar
El hello me
Do y todo esto
Vamos a poner
WordPair
Punto
Pascal case
Vale
Ya me dice que
Me acueste
Porque
Invalid constant value
Return on a simple string
Which one
Can be assigned
To a parameter
Of type string
In a const constructor
Try using a subtype
Or remove the keyword const
Vale
O sea
Ahora dice
Que quitas este
Vale
Ahora creo entender mejor
El tema de por qué
Necesitamos el const
Y todo esto
Entiendo que el const
Claro
Es que esto es una constante
O sea
Si le pasas el string
Esto no va a cambiar nunca
Entonces entiendo
Que es una forma de decirle
Siempre va a ser así
Pero en cambio aquí
Cuando ya le estás pasando
Un parámetro
Claro
Esto en realidad
Puede ir cambiando
Y por lo tanto
Esto se tiene que poder
Puede ser
O puede ir cambiando
Puede ser diferente
Entonces ya por eso
No te permite hacerlo
Porque el valor este
Puede ser nulo
Puede ser otro valor
Entiendo que van por ahí los otros
Cuando le dices const
Ya no lo re-renderiza
Claro
Le dices que así se quedará
Claro
Cuando era el texto
Que era
El texto siempre es ese
Pues te dice
Vale
Pues lo dejas así
Y ya está
Claro
Es muy interesante
Por un tema de rendimiento
Tiene sentido
Es que antes
Como que no lo entendía
Digo
Pero por qué es este const
Y no entendía la diferencia
Pero bueno
Ahora lo entiendo
Gracias por esto
De esta forma
Pues ahora
Entiendo que será
Que se lo re-renderizará
Cada vez que cambie
Lo guardamos
Vale
Y bueno
Aquí tenemos nuestra palabra
Withbox
Bueno
Perfecto
As Pascal case
Por si no lo sabéis
Significa que va a ser
La primera en mayúscula
Cada palabra
O sea
En camel case
Sería esto
En minúscula
Y esto en mayúscula
Pascal case
Como los componentes de React
Muy bien
Ya tenemos aquí
Nuestra palabra
Vamos a ver
Qué más nos dice
Vamos a por el siguiente
Siguiente clase
Vamos a añadir
Un stateful widget
Vale
Los stateful widgets
Son inmutables
Este stateful widget
Tenemos aquí
Esto es inmutable
Esto lo que significa
Es que las propiedades
No pueden cambiar
Que los valores
Son todos finales
Los stateful widgets
Mantienen un estado interno
Esto es exactamente
Lo mismo
Que los componentes de React
Vale
Implementar un stateful widget
Requiere como
Mínimo dos clases
O sea
Requiere dos clases
Joder
Y la leche
La leche
Es bastante trabajo
O sea
Tienes que hacer
Requieres dos clases
El stateful widget
Que crea una instancia
De la clase state
Y el stateful widget
O sea
Claro
Necesitas el state
Y lo que renderiza
Vale
Entonces nos dice
Que tenemos que crear
Todo el boilerplate
Create boilerplate code
For stateful widget
Hostia
Hostia
Como que
La verdad es que esto
Si que parece bastante boilerplate
Me sorprende incluso
Que no
Que sea tanto
Lo que hay que hacer
Vale
Aquí ahora nos dice
Que vamos a hacer
Como un estado
Para mostrar palabras
Random
Vale
Pues vamos a hacer
Joder
Me lo está chivando
El giga copilot
Vale
Extends
Stateful widget
Vale
Vamos a añadir
Nuestro estado
Del random words
Vamos a tener
Extendemos
The stateful widget
Random words
Y hacemos el override
Y del override
Como estamos extendiendo
The stateful widget
Podemos hacer el override
De
Vamos a poner
Random words
State
Words
State
Y aquí
Creamos el state
Creamos el state
Con la función
Random words
State
Vale
Esta es la clase
Que ahora vamos a tener que crear
Así que vamos a crear
La clase
Random words
State
Que esto tiene que extender
Del state
Que va a tener
Random words
Vale
Que es justamente
Lo que acabamos de crear aquí
De esta clase
La tenemos por aquí
Y ahora
Missing concrete implementation
Of state build
Hostia
Molaría mucho
Que esto lo hiciese automáticamente
¿No?
Porque es obvio
Uy
Pensaba que grabando
Me lo iba a arreglar
A ver
Y si le doy aquí
Mira
Quick fix
Oh
Me imaginaba que lo iba a hacer
Mira
Si te pones aquí encima
Y le das a comando punto
Te salen todas las soluciones
Que te da
Obviamente
Podrías poner
Que sea abstracta
Crear
No switch method
Pero bueno
Entiendo que la gracia
Es crear
El override
Que le falta
Justamente
El que se queja
Veis aquí
Que pone
Missing concrete implementation
Of state build
Intenta implementar
El método que falta
O haz que la clase
Sea abstracta
En este caso
Lo que queremos
Es implementarla
Así que
Vamos a solucionarlo
Hacemos el
Create one missing
No se que
Widget build
Y entonces
El build context
Que esto tampoco
Me ha quedado muy claro
Todavía
Que es
A handle to the location
Of a widget
In the widget tree
This class
Representa a set of methods
That can be used
From methods
No se que
Vale
O sea que
Aquí lo que hay
Es como diferentes
Métodos
Que se pueden ejecutar
Dentro de este método
Y que son
Del contexto
De
Can change
Location over time
As the widget
Move around
To the tree
This class
Should not
Scatch
No puedes
Cachear los métodos
Porque pueden cambiar
Vale
Vale
Vamos a implementar esto
Entonces
Esto ahora
Lo que nos dice
Que ejecutemos
Que podemos hacer esto
Que básicamente
Es nada
O sea
Cose null to return
Ay
Return
Que he puesto
Y el punto y coma
O sea
Aquí lo que estamos haciendo
Es
Ay no he puesto el
Bueno
Aquí aunque me pone esto
Vale
Lo del aquí
Importante
Pero no hay mucho boilerplate
O es cosa misma
El context es el lugar
En el árbol
De renderizado
De los widgets
Claro
Que puede cambiar
En cualquier momento
Porque se puede mover por ahí
Vale
Interesante
Visto
No hay mucho boilerplate
O es cosa mía
O esto luego cambia
Cuando lo dominas
O sea
Es que me parece
Mucho boilerplate
Para hacer esto
Me parece demasiado
No sé
No sé
Imagino que habrá
Alguna forma fácil
Y luego te lo comentan
Pero
Como que
Solo quiero poner un estado
No sé
Una línea
No quiero hacer tanta cosa
Y encima
Todo esto
Parece un trasto
Y lo que es más raro
Todavía
Es el hecho este
De boilerplate
Sí
Bueno
Sabéis lo que es el boilerplate
¿No?
A que yo estoy diciendo aquí
Boilerplate
Toiletplate
¿Qué es el toiletplate?
Boiler
Boilerplate
Hay mucho boilerplate
Porque Flutter
Tira mucho de
Programación orientada
Objetos con herencia
Y polimorfismo
Ya ¿no?
Sí pero claro
Teniendo la oportunidad
De hacerlo de otra forma
Me sorprende
Que la hayan hecho así
Me parece que Java
Es menos tanto boilerplate
Constantemente
Pues sinceramente amigos
Sinceramente amigos
Esto no me está gustando
Esto no me está gustando
A mí todo lo que sea
Escribir de más
Me causa pereza
Por eso yo no
Mira ¿Qué es boilerplate?
Boilerplate
Te explico lo que es el boilerplate
El boilerplate básicamente
Es ese código repetitivo
Que tienes que generar
Normalmente además
De forma manual
Para hacer algo
¿Vale?
Y algo que normalmente
Es necesario
O algo que vas a hacer
Muchas veces
En tu aplicación
En este caso
Estamos viendo boilerplate
A la hora de generar
Un estado
A nuestro widget
Porque cada vez
Que queremos hacer un estado
Como hemos visto
Tenemos que generar
Dos clases
Una que le tenemos que decir
Pues que es un widget
Que tiene estado
Y luego tenemos que generar
Justamente
La clase
Del estado
Que ahí va a extender
Del widget
O sea vamos a poder
Hacer el widget build
O sea como que son
Muchas líneas de código
Para algo
Un concepto que debería ser
Bastante sencillo
¿No?
Y como podemos ver
Pues es bastante
¿Midu ya queréis ir a dormir?
No hombre
No me quiero ir a dormir
Pero que me sorprende
A ver las cosas como son
Las cosas como son
Bueno otro
Lo intentamos
Vamos allá
No no
Vamos a seguir adelante
Hombre
Vamos adelante
No sin miedo
A ver
Hay que aprenderlo
Esto hasta infinito
Vale
Entonces
En este
Al final aquí lo que tenemos
Es lo que vamos a renderizar
¿Vale?
Lo que vamos a hacer aquí
Pues es justamente
Lo que estábamos haciendo antes
¿No?
O sea este
Final words
Esto que tenemos por aquí
Me lo voy a
Me lo voy a traer
Y
Vamos a
Vamos a cortar esto
¿Vale?
Me lo voy a traer
Me lo voy a traer aquí
Y aquí este text
También
Este text
Me lo voy a traer
Dentro de este container
Bueno a ver
No hace falta
En el container
¿No?
O sea se puede devolver así
Tenemos el punto y coma
Y dentro de este body
Que tenemos el word pair
Vale
Pues aquí lo que queremos
Justamente ahora
Es ejecutar el random words
Que hemos creado
Prefer const
¿Por qué?
Const with const
Vale
O sea el const
Debe ser aquí
Ahora
Vale
Y guardamos los cambios
Y nos vamos a simulador
Y todo parece que está igual
¿No?
O sea
Todo parece igual
Todo parece igual
Pero bueno
Ahora le daremos una vuelta
Justamente para ver
Cuál es la gracia
Entiendo
A lo mejor del estado
Este
¿Vale?
Este sería con state
Pero claro
Es que ahora mismo
Bueno
Supongo que hacer una lista
O algo
¿Vale?
Vamos a verlo en el curso
A ver qué tal
Y vamos con el siguiente
Mira
Create an infinity scrolling list view
En este paso
Vamos a expander
Nuestro random word state
Para generar
Y mostrar
Una lista de palabras
Me gusta
Como el usuario scrollea
La lista
Va a estar creciendo
De forma indefinida
Infinita
The builder factory
Constructor
En el list view
The builder
O sea
El builder es una propiedad
Ahora lo veremos
Te permite
Construir de forma lazy
O sea que
Conforme lo va necesitando
Va a ir creando
Estas palabras infinitas
Así que vamos a crear
Nuevas variables
Aquí en el random word state
Primero para darle
El estado
Porque es que ahora mismo
No maneja nada
Del tema del estado
Así que vamos a manejarlo
¿Vale?
Vamos a tener aquí el final
Suggestions
Y vamos a poner word pair
¿Vale?
Y aquí un array
De word pairs
¿Vale?
Word pair
Básicamente la representación
Esta de dos palabras
La primera y la segunda
Y esto viene
Este tipo
Viene de este package
English words
La verdad es que es un poco
Me sorprende
Que tiene cosas
Que son muy mágicas
Como el traerse
Estos tipos
Este tipo se lo ha traído
De forma mágica
Al importar este paquete
Pero luego tiene otras cosas
Que son súper verbosas
La cual me sorprende un montón
¿Vale?
Final
Bigger font
Si es que esto funciona solo
Const text style
Vamos a poner esto
The value fill
No es usado
No es usado
¿Vale?
Esto lo vamos a usar ahora
¿Vale?
Entonces
Widget
Vamos a crear
Una nueva función aquí
Del widget
Que le vamos a llamar
Build suggestion
Y esta función
Vamos a devolver
Me encanta
¿Sabéis que?
Me encanta
Que el keyhackopilot este
Se la sabe
Porque debe ser
El típico ejemplo
Que todo el mundo hace
¿No?
Todo el mundo dice
Ah pues esto
Como lo hace todo el mundo
Pues esto me lo sé de memoria
ListView
Punto Builder
¿Vale?
Este es justamente
El que va a construir
Y que se va a ejecutar
De forma lazy
Toda la lista
Que vamos a hacer
¿Vale?
Es verdad
Que una cosa que pasa
Entiendo que esto
Ya no lo necesitamos
Para la build
Lo que queremos renderizar
Vamos a renderizar
Un scaffold
Y vamos a hacer otra vez
Lo del app bar
Para el title
¿Vale?
Title
¿Vale?
Que el app bar
Sea justamente
El title
Startup name
Generator
Y vamos a llamar
En el body
El build suggestions
El build suggestions
Crea aquí
El listView
Con el builder
Y aquí tenemos
Item builder
Y en cada item
Vamos a llamar a esto
Que al final
Lo que llamará
El build row
Y al final
Tenemos esto
¿Vale?
No sé si con esto
Teníamos suficiente
No sé si aquí
Aquí estábamos llamando
Claro
Aquí tenemos
La app bar
Que entiendo que esto
Ya no lo necesitamos
¿No?
Aquí
Este app bar
Esto directamente
Ya puede ser
El random works
No sé
Vamos a probarlo
¿Qué es lo peor
Que puede pasar?
¡Ojo!
¡Ojo!
Ya lo tenemos
A ver
Vamos por partes
¡Ay!
¿Que no se ve el resultado?
¿Cómo que no se ve el resultado?
Ah bueno
Bueno
Verdad
Vale
Ahora sí
Vale
¿Qué es lo que hemos hecho?
Paso a paso
Paso a paso
Al final
Lo que hemos hecho aquí
Es crear este home
En lugar de tener
Este
El escafolta aquí
Lo hemos movido
Justamente al componente
Creo que tiene un poquito
Más de sentido
¿Vale?
Entonces el random works
Es esta clase
Que esta clase
Lo que hace es extender
Del stateful widget
Porque justamente
Queremos que tenga un estado
Para crear el estado
Pues lo que hacemos
Es justamente
Tenemos este create state
Que lo que tiene que hacer
Es devolver
La clase
Random work state
Que le pasamos por aquí
Bueno
Lo que necesitaría el constructor
Que en este caso
No es nada
Y en esta clase
Random works state
Tenemos nuestro estado
Este es nuestro estado
Este que veis aquí
Este final suggestions work pair
Este sería nuestro estado
Que ahora vais a ver
Cómo lo estamos actualizando
También tenemos aquí
Un final
Porque esto no se cambia
En ningún momento
Del estilo del texto
El estilo del texto
Es este
Si aquí le cambio
Y pongo 24
Vais a ver que cambia
Y esto debería ser
Un poquito más grande
Que me ha dejado fatal
Que como podéis ver
No se ha hecho más grande
A ver
No se ha hecho más grande
¿Será que no lo he utilizado?
Bigger phone
Pues sí
Sí que está
Pues yo pensaba
Que esto iba
A hacerlo más grande
A ver
Phone size 18
Ah no sé si
A ver
Vamos a cambiarle
Un momento el color
No
Pues sí
A ver
Bigger font
Se supone
Que list
Ah es que
Es que es el
No
Es el title
List title
No
Pero es esto
Claro
Si que es esto
Que he hecho algo aquí
Que no está bien
Style
Style
A ver un momento
Style
Const
Text
Style
Font
Size
40
O sea
Aquí sí que cambia
Aquí sí que cambia
Si lo pongo aquí
Sí que cambia
Pero cuando lo utilizo aquí
Como final
Bigger font
Const
Text style
18
No sé si es que
Ha sido simplemente
Mi imaginación
O que
Que no le he puesto
Demasiado grande
Me da la sensación
Que no cambia
Porque
Creo que ya sé
Por qué no cambia
Es muy freaky esto
¿Vale?
No cambia
Porque la propiedad
De un to class
Es solo creado una vez
Por el const
Efectivamente
No cambia
Porque
Como le he puesto
Además
Esto del const
Y tal
Y lo que hace
El hold reload
Es mantener el estado
De tu aplicación
Como mantiene
El estado
De tu aplicación
Pues no está cambiando
¿Sabes?
O sea
Al mantener el estado
Dice
Claro
Si yo cambiase esto
Y me cambiase el estado
Es que esto podría tener
En este caso
Porque yo sé
Que es del estilo
Pero
Podría tener
Bastantes problemas
Porque si te fijas
Cuando yo hago un cambio
Y estoy aquí
Y estoy por ejemplo
En mitad del scroll
Ni siquiera me cambia el scroll
Si yo hago un cambio
Es la gracia
El hold reload
¿Vale?
Entonces
Está bien
Pero en este caso
Por eso no estaba cambiando
Si lo muevo aquí
Que entonces no lo tendríamos
Como el parte
Del state
De la clase
Al volver a hacer
Un renderizado
Lo notaría
Y ya está
Pero mantendría
El state
Que tenía antes
Vale
Ahora que ya hemos entendido
Esto
Vamos a volver
Write
Widget
Build
Vale
Build context
Context
Esto del context
Ya hemos visto
Que es como
Alguien había comentado
Que es como
La UI representada
O sea
Donde está
Este widget
En el árbol
De la aplicación
Devolvemos el esqueleto
Y en el app bar
Tenemos el title
Con el nombre este
Del text
Que justamente es este
Startup name generator
Esto que vemos aquí
Y en el body
Pues ejecutamos
El método
Build suggestions
Aquí lo que vamos a hacer
Es devolver un list view
Y creamos el builder
El builder este
Está interesante
Porque este builder
Al final lo que nos permite
Es hacer un lazy load
O sea
Es un infinity scroll
De forma
El builder este
Se ejecuta solo
Cuando es necesario
De forma que
Cuando llega al final
Lo que hace es
Ostras
Necesito más resultados
Pues ejecuta
El item builder
¿Ves?
El item builder
Lo que hace
Es decir
Vale
Vamos a ver
Cual es el siguiente elemento
Que necesito
Pues tienes el contexto
Y tienes aquí el i
Que el i este es el index
¿Vale?
Básicamente
Esto sería como el índice
Index
Index
Entonces
Lo que estamos diciendo
Bueno
Ah
No le gusta que
Le ponga index
Vamos a llamarlo i
Entonces
La i
Sería como el índice
El
¿Qué elemento es?
Pues este sería
Imaginemos que estamos
Arriba del todo
¿Vale?
Esto sería el 0
En el 1
Es este que tenemos
Aquí en medio
Y en el 1
Decimos vale
Si es impar
Pues entonces devuelvo
El divider
Por lo tanto
Al construir cada elemento
Si es impar
Lo que devuelve
Es renderizar
Esta rayita de aquí
Si es par
Lo que hace es
Buscar y crear
Una nueva palabra
Como estamos viendo aquí
Dice si es impar
Vale
Directamente devuelve
El divider
Si no
Lo que haces
Es que el índice
Lo divides
Esto entiendo
Que no es dividirlo
Entre dos
O sea
Esto al final
Lo que hace
Porque dice
No sé qué
Esto entiendo
Que lo que hace
Index
Lo que hace
Es como sustraer
El
Claro
Esto es para poder tener
1, 2, 3, 4, 5, 6, 7, 8
Pese a que ya te ha saltado
Los impares
O sea
Que este índice
Porque si no
Tendríamos aquí en index
Tendríamos
0, 2, 4, 6, 8
No sé qué
Y en cambio con esto
Lo que conseguimos
Es tener 0, 1, 2, 3, 4, 5, 6, 7
¿Vale?
Para eso usamos esto
Ahora lo he entendido
Claro
Antes cuando lo estaba haciendo
Digo pero que
What?
Ahora lo he entendido
Entonces
Si el índice
Es mayor
Que las sugerencias
Que tenemos en el state
Que hemos tenido aquí
Este es el state
Que tenemos de las sugerencias
¿Vale?
Entonces lo que hacemos
Es en las sugerencias
Añadimos todos los objetos
Al final
Del array de sugerencias
Añadimos
10 nuevas palabras
Por eso
Cada vez que vamos bajando
Si te fijas
Conforme vamos bajando
Vamos tomando
Nuevos resultados
¿Por qué?
Porque se van añadiendo
10 palabras
Cada vez que llegamos
Al final
Pues lo que hace es
Toma
10 más
Así todo el rato
¿Vale?
Si el índice
Al que se está
Renderizando ese elemento
Es mayor
Que el número
De sugerencias
Que teníamos en el array
Es que hemos llegado
Se supone
Al final de la lista
Y por lo tanto
Añadimos más
Palabras al final
Y una vez que las hemos añadido
Lo que hacemos es
Construir
Antes
Antes de construirlo
Añadimos las palabras
Y ahora que tenemos las palabras
Lo que hacemos
Es renderizar
Este
Al
Es curioso ¿No?
Porque le llaman build
A lo que normalmente
Nosotros le llamamos
Le llamamos como render
¿No?
En otros sitios
Pero bueno
Aquí le llaman build
Imagina que es render
Lo que hace es renderizar
Una nueva
Una nueva fila
Y le pasa justamente
Utilizando el índice
Recupera
De las sugerencias
Un par de palabras
Y aquí simplemente
Lo que hace es renderizar
Pues un list tile
Que es un primitivo
Que tenemos aquí
De los widgets
Con el tile
Que es un texto
Y aquí
Esto sería
Pues la palabra
Que quiere renderizar
Imagina que si pongo esto
Pues vais a ver todo el rato
Que se está renderizando
Exactamente lo mismo
Otro rato
Así que
Le ponemos esto
Y el estilo
Que tenemos aquí
Como una constante
Font size
Que ahora
Si aunque lo cambiemos
No vemos un cambio
Teníamos que hacer
Un re-renderizado
Teníamos que darle
A este botón
Si le damos a este botón
Entonces sí que veríamos
Que salen más grandes
Y realmente veríamos
El cambio
Y ese
Eso es el tema
No veas ¿No?
No está mal
No está mal el tema
No está mal el tema
No Flutter no
Ya ya
Ya veo que Flutter
No nos triunfa
Hay gente que sí
Hay gente que no
Importan containers
De javascript
Y metes un re-ad
Un re-ad dentro
Me parece como
Android Studio
No veo bien la ventaja
¿La ventaja de qué?
¿De Flutter?
¿O de...?
No he entendido
¿Y cada widget
Habría que separarlo
En fichos diferentes?
Sí, claro
Esto lo podríamos separar
En fichos diferentes
De hecho no debería ser
Muy difícil
Por ejemplo
Esto que hemos hecho aquí
A ver
No tengo ni idea de Dart
Pero viendo un poco
Cómo funciona la cosa
Esto soy yo
Suponiendo
Si aquí ponemos
RandomWords.dart
Esto lo ponemos aquí
Y a esto
Importamos este paquete
Que vamos a necesitar
Lo importamos aquí
Vale
Importamos aquí
Madre mía
Ah, claro
Espérate
Es que tengo que importar
Todo este también
Que todavía lo necesitamos
Digo
Mucho rojo
Vale
Ahora está todo bien
Pero lo que tenemos que hacer aquí
Es importar
RandomWords.dart
Con punto y coma
Y si guardamos los cambios
Pues deberíamos ver
Que todo funciona correctamente
Súper raro
Que me cambia
Ah
Pensaba que me estaba cambiando
O sea que esto sería
Como lo haces
Import
RandomWords.dart
Y ya lo puedes utilizar
En el fichero
Sin ningún problema
Para que veáis
Que esto realmente funciona
Que no nos lo hemos inventado
Como lo podremos hacer
Bueno
Alguien ponía
Prueba
List
No sé qué
Alguien decía
De probar algo
Flutter
Realmente muy interesante
Si no
Es interesante
Midu eres un crack
Aprendiendo una nueva tecnología
Eres mi mayor referente
En el desarrollo
Gracias por ver el video
Gracias por ver el video