Es momento de trabajar ahora con los karts al fin.
Para eso vamos a pellets.
Click derecho nuevo archivo y se va a llamar Car.
Y un bajo peaje punto Darth Enter.
Creemos rápidamente estais Willet por M.
Tapp y aquí sería el ST les ese de flores estériles Willet.
Se va a llamar kart.
Peach nada del otro mundo nada que no hayamos hecho antes.
Nuevamente aquí voy a quedarme un escaso CAFO paréntesis punticos la gente a que aquí dentro.
Y el tener un texto llamado karts karts loscambios y ya tengo esto crear por lo menos el cascarón.
Recuerden ahora tenemos una pequeña asignación en este instante necesito que cuando ustedes hagan clic
en el botón de kart me mueva a las páginas que acabo de crear las cards como tal.
Póngale paso el video intenten hacer esto ustedes dos.
Y si no pueden en breve lo hacemos juntos.
Tienen un par de segundos.
Hagan Ponle pausa
ok.
Lo lograron hacer.
No se preocupen si no lo logran igual la práctica de El maestro hay que practicar y practicar para dominar
esto.
Si nosotros revisamos nuestro archivo tenemos que la ruta se llama Card.
Esta es la ruta que nosotros debemos de crear en nuestras rutas y donde tenemos nuestras rutas.
Aquí en Roux y gracias a esta estructura queda bastante claro lo que yo tengo que hacer.
Aquí Car Voynich hay que importarla perfecto.
Yo la voy a colocar aquí al final un par de espacios para que se mire bonito grabar los cambios y probemos
tocó cards y me voy a los karts.
Excelente.
Ahora vamos a trabajar un poco con las tarjetas que voy a hacer acá dentro del CAFO.
Sabemos que tenemos un body que es por decirlo así todo este espacio en blanco que tenemos en la aplicación.
Voy a hacer lo siguiente como yo quiero colocar muchas tarjetas entonces voy a crearlas dentro de un
Lazpiur así que voy a quedarme Licio bio tap Center.
Recuerden que los libios reciben su Children que es el arreglo de cada uno de los elementos que va a
estar dentro de ese Elysium va a tener un largo estatico y por eso lo estoy creando con el avión normal
y no con el billete que lo usaremos más adelante aquí adentro voy a crearme un método llamado Car tipo
1 parentesis y este tipo 1 no existe este método lo voy a crear pueden hacer lo que ustedes quieran
pueden crearlo acá crear método o se van aquí al final y vamos a definirlo widget Car tipo 1 parentesis
abren y cierran llaves ok.
Entonces el card tipo 1 Cómo va a ser.
Vamos a la documentación de flores nuevamente y busquemos el Card Class Enter.
Vamos a buscarlo subamos ok tenemos aquí nuestro Kaur Class y básicamente esto es una tarjeta.
Yo sé que muchos ya las conocen y saben cómo es pero vamos a quedarnos una muy parecida a esta todo
el código para crear esa estaca.
Pueden copiarlo pegarlo pero mejor hagámoslo paso a paso para que así comprendamos cada cosa que vamos
a colocar en nuestro código es lo mejor.
Ok entonces aquí yo necesito retornar voy a hacerlo directamente necesito retornar una tarjeta así que
Card parentesis punto y coma Enter.
Las tarjetas tienen varios juegos interesantes que ya las vamos a personalizar en breve pero el principal
es el chip que es un widget.
Como ustedes pueden ver aquí quiere decir que yo puedo poner cualquier cosa o acierto ya lo hemos visto
varias veces.
Fernando qué les parece si dentro de este chat voy a colocar un club para poder ordenar más elementos
dentro de esa tarjeta en manera vertical.
Las columnas tienen un Children también dentro de este Children voy a colocar un listado.
Ya estamos usando cosas que ya hemos visto anteriormente.
Prácticamente lo único nuevo es la tarjeta ya lo vamos a ver cómo funciona ya desplegando una por eso
también tengo la aplicación corriendo para ver si sucede algún error pues ahí me a en la lista.
Recuerden que teníamos un living que es para colocar un widget al inicio vamos a colocar un icon que
les parece un icons punto pero con la I mayúscula punto despuntó y ese icono se llama photo album.
Vamos a ver por regista vamos a usar este Photo álbum.
No importa cual ícono le vamos a poner el color colors.
Punto Blu.
Mira está toda la línea.
Si yo grabo los cambios vamos a ver qué sucede.
Aparece la tarjeta por eso vemos los bordes redondeados aunque aparece muy pegado a los bordes.
Los LEDs también tienen una propiedad interesante acá que se llama PADI.
El padre es el mismo que nosotros tenemos en CSS o páginas web.
Es una distancia entre los bordes hacia adentro o sea todos mis leáse sería del tamaño de la página
pero quiero que donde va a empezar a renderizar tenga un espacio adentro de sí mismo para colocar ese
país.
Si yo dejo el mouse encima me dice que es de tipo edge Insect.
Yo me dio santo Fernando qué diablos es eso.
Bueno no se preocupen como les estoy explicando de dónde salen todas las cosas.
Esa es una clase bastante común y se usa mucho tanto para columnas se usa mucho para lo que es el padre
y para los márgenes para muchas cosas se usa ok entonces vamos a ver cómo funciona eso.
Empezamos a escribir eches insights y tenemos varias propiedades acá.
Si nosotros le ponemos o quiere decir que vamos a poner un PADI en todas las direcciones es decir arriba
a la derecha abajo y a la izquierda y si nosotros vemos la configuración del o dice que recibe un dogo
o sea podríamos poner un Padín de unos que les pareció de unos 20 grados los cambios y ahora notarán
que todo tiene 20 píxeles de bueno aquí de separación inclusive aquí abajo.
Si quiere tener más control sobre las coordenadas pues tenemos también voy a poner aquí un punto y tenemos
lo que es el simétrico.
Vamos a ver que es el simétrico.
Voy a presionar el control espaciadora subamos y tenemos horizontal y vertical.
Si nosotros ponemos el empecemos con el horizontal y le pongo aquí un valor doble de Ok voy a ponerlo
de 50 grabo los cambios aquí.
Como es un valor doble que puede 50 4.0 noten que la separación únicamente se está aplicando de manera
simétrica en el lado izquierdo y en el lado derecho en la parte de arriba no se aplicó nada.
Si yo quiero aplicar de manera simétrica es decir arriba y abajo aquí podría poner vertical y otro valor
doble como diez puntos cero.
Entonces quiero 50 píxeles a los lados y 10 píxeles arriba y abajo bastante interesante.
Vamos a dejarlo como o para que use todas las direcciones iguales y dejémoslo en unos 10.0 píxeles me
parece correcto.
Ahí tenemos una separación interesante.
Yo los invito a que tratemos de perder el miedo de estas clases con nombres raros pero todos lo tenemos
aquí en la documentación con un poquito de esfuerzo y conociendo más la documentación de flores ya se
hace un poco más llevadero.
A mí todavía me cuesta en muchas cosas de flores pero como les digo la práctica hace al maestro.
Sigamos.
Ya tengo definido aquí este ítem y podríamos colocar un título aquí en el cristal y pongan cualquier
cosa.
Voy a poner un texto que diga Soy el título de esta tarjeta hago los cambios y mientras eso refresca
voy a poner un subtítulo Keita Tex y pongan cualquier cosa grande o sea un texto largo como por ejemplo
aquí estamos con la descripción de la tarjeta que quiero que ustedes que ustedes vean para tener una
idea de lo que quiero mostrarles mostrarles escribió un error porque no saber mostrarles y listo un
texto cualquiera no importa no tienen que ser lo mismo pero ahí ya va apareciendo ya va apareciendo.
Ahora si vemos este ejemplo tiene unos botones y hay una separación ahí.
Sigamos sigamos viendo qué más podemos hacer.
Regresemos a embolador también como esto es un Colm voy a colocar un ítem justo después de este lista.
Por eso tengo que colocar aquí una coma enter y quiero dos botones de manera horizontal aquién un botón
aquí y otro botón acá para eso voy a colocar un Rou seccionó Rou dentro del robot.
Tenemos otro Children que tiene otra lista de widgets aquí simplemente coloquemos un Flak botón no hemos
visto este botón pero este es el momento exacto para verlo.
Son FLAC Boron va a tener su Chit tap texto el primero hacer cancelar necesitamos el evento hombres
o que no haga nada o simplemente definamos copiar esto una coma.
Y este va a ser okey gravó los cambios vamos a ver qué tal se ve ahí está todo perfecto pero los botones
aparecen de este lado.
Cómo podría ordenarlo para que el alignment del robot sea al final como lo hacemos.
Regresemos al Rou y busquemos una propiedad Main Axis alignment y esto recibe un mail Axis alignment
entre los cambios y debería de ponerlos al final perfecto.
Ahí ya tenemos nuestra primera tarjeta lo vamos a dejar así y continuamos con el siguiente video porque
quiero crear otro tipo de tarjeta un poco más interesante porque ésta es relativamente sencilla fue
compleja en ciertas cosas pero espero que haya comprendido todo el concepto para crear este tipo de
tarjetas.
Continuamos con el siguiente video.