En la clase pasada terminamos nuestros Whippet.
Bueno no lo terminamos lo empezamos y lo tenemos funcionando al menos pero lo único que a mí no me gusta
es que yo voy a ocupar personalizar aún más este texto más personalizaciones más opciones y si lo sigo
configurando acá y estoy creciendo.
Y la verdad es que posiblemente en alguna otra aplicación o en otra pantalla o en otro lugar ya sea
esta aplicación u otra que pueda ser en un futuro que yo necesite volver a hacer esto.
Entonces tendría que volver a copiar y pegar todo el código y hacer importaciones.
Y bueno sería un poquito extraño.
Lo mejor sería que nosotros podamos utilizar o reutilizar todos mis Whopper de tarjetas en un widget
de Independiente que me diga ok si necesito crear otro regalo u otra colección de tarjetas parecida
a esta simplemente importo mi Widget y listo.
Eso es todo lo que yo necesito para hacer la configuración y que funcione bien.
Vamos a hacer esa separación del código.
Entonces en la carpeta es ese click derecho.
Vamos a crear un nuevo directorio llamado widgets aquí entiendase que son widgets que nosotros hicimos
widgets personalizados nuestros aquí.
Click derecho nuevo archivo y se vaya a marcar un bajo su bajo widget punto Tarth.
Hacer esto más largo para que ustedes puedan ver todo el nombre.
Ese es el nombre que le estoy dando al widget.
Ok.
La idea de este widget es que tengamos centralizada toda la lógica para crear esto y que en el home
punto Peach simplemente tengamos la referencia a ese widget y ya se crea para eso.
Empecemos por T.M.
Por qué vamos a ocupar el paquete este material y empecemos con un Stainless widget St lès Widget y
van a decir por qué son estériles.
No debería ser un Stepford porque vamos a tener varias tarjetas el tamaño de tarjetas puede variar si
efectivamente puede variar pero no lo vamos a manejar en el lado del Sweeper no lo vamos a manejar en
este widget.
Por qué.
Porque vamos a mandarle como argumento a este Stainless Widget.
Cuántas tarjetas son las que quieres renderizar.
Ok luego ya vamos a ser un ejemplo donde va a ser dinámico ya lo vamos a ver no.
No comamos ansias aquí este Sayles widget va a ser el nombre que va a tener es Kaur Whippet.
También podríamos poner el widget pero así está bien Whippet ya va a entender que es un esté les Willett
donde sea que lo utilicemos.
Ok hay un argumento que yo voy a necesitar recibir a este cates Sweeper y es la lista de tarjetas que
yo necesito mostrar acá.
Más adelante será una lista de películas o puede ser que después sea una lista de actores o bueno yo
necesito la colección de elementos que necesito desplegar acá para eso voy a definir la final porque
no va a cambiar que va a ser una lista vamos a ponerla de tipo dinámico por los momentos.
Luego lo vamos a cambiar y se va a llamar películas.
El nombre es totalmente de creación de ustedes pero pongámosle películas en este caso.
Ok aquí me está marcando un error porque a pesar de que es final todavía no lo estoy utilizando y tengo
que inicializar en algún lugar en donde lo voy a inicializar en el constructor entonces Car Sweeper
parentesis punto y coma.
Y voy a definirlo entre estas llaves cards Whippet cards.
Estoy seguro que está bien.
Aquí voy a poner disputo películas y los errores desaparecen pero para utilizar este Skipper si no me
mandan la lista de películas esto debería marcar un error por lo cual voy a poner aquí el de color a
robar.
De esa manera voy a obligar donde sea que se utilice que me tienen que mandar a fuerza esta lista de
películas si no no funciona.
Sigamos.
Voy a quitar este container.
Recuerden que este es el método vil que se va a llamar cuando se utilice este Sweeper y ese video va
a hacer todo esto todo el container que tengo acá lo voy a cortar y lo voy a pegar acá en su propio
widget.
Ok voy a arreglar la población un poco y aquí tenemos dos inconvenientes que deberían de saber cuáles
somos cuál es el problema.
Uno es que no encuentra les escuela y no encuentra perfectamente lo podríamos importar o hacer un punto
o control punto importar esa librería y la tenemos acá.
Ya los errores desaparecen.
Voy a grabar los cambios en el Whippet Widget y acá de acá ya no va a ser necesario esta importación
no va a ser necesaria porque ya pasé todo el código que utilizaba les guapear a su respectivo archivo
para utilizarlo simplemente voy a decir lo siguiente Voy a colocar acá el Whippet o como fue que le
pusimos Skype que simplemente lo voy a utilizar aquí.
Parentesis punto y coma asegúrense de importar esta clase contra el punto como el punto importarlo voy
a subir y aquí tenemos la importación de nuestro widget personalizado open source widgets y aquí está
mi Sweeper widget si bajo me está marcando un error como los errores que nosotros habíamos visto y me
dice que las películas es una lista de tipos de Inamhi es obligatoria.
Entonces vamos a mandar algo nosotros creamos una lista en el momento películas o hacer una lista y
voy a mandar uno dos tres cuatro cinco.
Cualquier cosa y grabo los cambios.
Si todo funciona bien la aplicación debería de seguir trabajando.
Pero cómo sé que está trabajando.
En teoría debería ser lo mismo.
Bueno hay una manera simple de que es comentando este código y retornando o hacer un retorno de un contenido.
Si yo grabo los cambios entonces desaparece.
Entonces esta es una prueba bastante útil para darse cuenta si su Whittier está funcionando correctamente
y lo está funcionando bien.
Por los momentos yo no voy a trabajar más en el John Patch necesito hacer un par de configuraciones
a la parte de las tarjetas okey.
Las tarjetas están funcionando pero se ve asqueroso.
Entonces vamos a mejorarlo un poquito.
Siempre dentro del método Pills.
Yo voy a cambiar las dimensiones de la tarjeta dependiendo de la pantalla del dispositivo y teléfonos
más anchos y teléfonos más delgados más largos más cortos y bueno ustedes me entienden.
Para eso voy a utilizar el Nidia QWERTY media cuadra y me va a dar información sobre el ancho alto y
otras cosas del dispositivo.
Para eso voy a hacer una referencia a en el llamado esprín 6 que va a ser igual a media QWERTY punto
of context punto 6 y tenemos aquí en el context tenemos otra gran cantidad de información pero sólo
voy a trabajar por lo menos con el 6.
Si ahora digo es 6 punto aquí tengo el A-spec Trello tenemos si está vacío.
El hay del Wit entre otras cosas eso lo voy a utilizar para determinar el ancho y alto de mis tarjetas.
Para eso regresemos aquí vamos a ver agregamos el hoy lo podríamos definir también nosotros empezamos
con el WIP primero conectar este punto Infinity y voy a decir que va a ser el 6 punto wifi y solo quiero
el 70 por ciento para hacer eso para definir el 70 por ciento entonces es por 0.07 pero cero votos siete.
Ese es el 70 por ciento de el ancho.
Si quiero el alto también lo puedo definir por ejemplo el 6.20 pero height.
Y quiero que sea la mitad disponible por 0.5.
Esa es la mitad que nosotros tenemos.
Bueno sería como 0.50 o 0.5 es la mitad del dispositivo.
Ya tenemos las tarjetas bastante alargadas.
Todavía se ve medio feo y se va a ver feo hasta que nos pongamos otra imagen porque si más asquerosa
sigamos viendo aquí en Elite.
Podríamos definir estas mismas opciones.
Pero saben que los voy a cortar de aquí y las voy a colocar acá sería mi web y aquí el ítem acá deberíamos
estar casi el mismo efecto pero ya las tarjetas centradas que ya se ven mucho mejor en vez de aplicarse
la conteiner lo único que hice fue aplicárseles a las tarjetas.
Eso fue básicamente todo el cambio.
Ahí está funcionando mucho mejor.
A mí no me gusta que esas tarjetas sean tan puntiagudas me gustaría que fueran como con bordes redondeados
y para hacer esos bordes redondeados.
Yo voy a hacer lo siguiente Voy a cambiar esto un poco y en vez de ser un rostro de este match neighbor
voy a retornar lo que es el clip.
React que este sirve para hacer eso de los bordes redondeados puntico.
Voy a poner aquí un borde radios de borde Radius circular de 20 puntos cero píxeles OK y el chip que
va a tener es la imagen.
Déjeme arreglar esto.
Vamos a cortar esto no voy a pegar acá no debo punto y como al final cambiamos ese box FITB por un cover.
Voy a grabar los cambios que se ven mejor redondeados y ahí va tomando forma mis tarjetas.
Ok todavía quedan cosas por hacer.
Por ejemplo tenemos que cargar la imagen que queremos pero lo voy a dejar así por los momentos más de
uno me va a decir Okey Fernando pero para qué diablos estamos siguiendo las reglas de las películas
si no lo estamos utilizando.
Si ya lo vamos a utilizar pero es que no tiene sentido porque nuestra colección ahorita solo son números
y esos números no los podemos interpretar acá pudiera ser que nosotros en vez de mandar una imagen mandáramos
déjeme comentarle esto no lo haga podríamos mandar aquí el text de películas en la posición índex ok
así tendríamos uno dos tres hasta que tenemos dos películas y si gano aquí vamos a poner películas apuntó.
Ese es el arco que va a tener hoy Tim Skout voy a grabar los cambios y tenemos un error porque me dice
que el entero no puede ser transformado en string.
Perdón si yo grabo los cambios.
Ahora sí vamos a tener uno dos tres y no se ve muy bien por eso es que no quise hacer el ejemplo así
voy a regresarlo.
Estoy estaba originalmente.
Por eso le dije que no lo hicieran exceptuando que dejen el item Count ese sí y ya vamos a reemplazar
estas imágenes por los posters de las películas que vamos a leer.
Pero para eso tenemos que conectarnos a una API y eso en el próximo video.