Bien ahora nos toca trabajar con esta parte del ROU lo que viene aquí abajo si lo observamos cuidadosamente
tenemos un roll grandioso un rock que contiene los tres elementos cada uno de estos elementos son columnas
que tienen dos elementos dentro tiene un ícono y tiene un texto.
Eso es básicamente es un rock que dentro tiene tres columnas.
Vamos a trabajar con esto pero antes de comenzar con esa parte ustedes van a notar que hemos estado
trabajando directamente dentro de las columnas esto en lo personal a mí me estorba porque hace que el
código sea un poco difícil de mantener.
En este caso como solo es un Willet digamos que no está tan mal pero este otro este conteiner si yo
quisiera editar algo a ciencia cierta no sé si lo tengo que agregar aquí o lo tengo que agregar aquí
o lo tengo que agregar en otro lugar por eso a mí no me gusta este tipo de desarrollo.
Por ejemplo yo voy a quedarme aquí al final voy a crear un widget que sea crear crear imagen por ejemplo
crear imagen crear imagen lo que va a hacer es un retorno de mi widget de la imagen.
Okey todo esto lo voy a quitar de ahí lo voy a pegar acá aquí es un punto y coma y tal vez dirán Ah
bueno pero es demasiado esta sobre exagerado exagerando Fernando pero la verdad es que a mí me gusta
más como queda de esta manera y todavía se pueden optimizar de otras formas al grabar los cambios se
van a dar cuenta que el código queda exactamente igual.
Ahora vamos con el container todo este container.
Todo esto lo voy a cortar.
De dónde termina aquí un container.
Hasta acá lo voy a cortar y voy a crear un método llamado crear subtitulo o crear título o el nombre
que ustedes quieran crear título va a ser un win.
Yo también he usado un método que regresó en Willet crear título lo hicieron llaves y lo pego aquí sería
un punto y coma.
Vamos a regresar está un poco aquí es un rostro de un container y sería todo lo mismo.
Todo este título es lo que a mí me crea esta barra de acá.
De hecho si ustedes usaran mucho este tipo de widget podríamos crear un archivo independiente que retorne
este widget y así sería mucho más fácil reutilizarlo.
Pero como sólo lo vamos a usar acá.
Por eso lo dejo así si yo grabo los cambios va a observar que todo queda igual.
Y este código ya queda mucho más fácil de ver como lo hemos venido haciendo en todo el curso.
Ahora lo que yo quiero es crearme las acciones acciones le voy a poner así crear acciones o acciones
el nombre que ustedes quieran a este método.
Pongamos una coma.
Implementemos dicho método voy a comprimir éste y voy a comprimir este otro es un método que regresó
un widget se va a llamar las reacciones orillero ya ves analizamos la imagen nuevamente eso tiene que
regresar un Rou que es el contenedor principal entonces hagámoslo de una vez retorno Rou punto y coma.
Y ustedes saben qué Root tiene su chillen.
Recuerden que Rolo lo ordena de manera horizontal y ahora vienen estos estas columnas que es una columna
que tienen dos elementos entonces aquí lo voy a hacer de una vez y luego no voy a separar en su método
independiente voy a crear loka Colom Entebbe tiene su Children el cual va a tener un texto pongámosle
al primer texto.
Pero primero de gálico.
Entonces ICOM de icons tocó o icons pero con mayúscula hoy punto vamos a ver cómo era era cool.
Creo que ahí está Koma gravó los cambios y vamos a observarlo.
Ok ahí está se mira muy pequeño no es el color y podíamos optimizar esto bastante pero la optimización
en pocas palabras tendría que clonar esta línea tres veces.
Esto no lo hagan simplemente es para que ustedes observen que de esa manera creamos los tres elementos.
Pero como lo tengo que repetir tres veces y si después necesito cambiar el estilo de dibujo lo mejor
sería repetir esto mediante un método que recuerdan que cuando ustedes clonan más de una vez significa
que da paso a las optimizaciones del código.
Aquí voy a crearme un nuevo widget un método que rebelion widget que se llame crear acción o simplemente
acción ok.
No recibe ningún argumento este crear acción por un momento no recibe nada pero si lo va a recibir va
a retornar esta columna okey toda esta columna como ésta la copio y pego aquí.
Aquí sería un punto y coma que hemos arreglado un poco y de esta manera creó mi acción.
Entonces puedo remover toda esta columna y manejarlo de esta manera.
Crear acción y grabo el cambio y debería ser exactamente el mismo efecto.
Si ahora necesito tres lo hago de esa manera y queda exactamente igual es lo mismo pero queda un poco
más fácil de leer.
Necesitaría mandar dos argumentos a esta función de acción o este método de acción.
1 Hacer el ícono este ícono de acá que si dejamos el mouse encima de hoy me dice que eso es de tipo
hoy contará o sea yo necesito solicitar acá hay que Ondara y se va a llamar hoy Koma y el último va
a ser un string con el texto que yo quiero mostrar en esa acá.
Ok entonces ahora ya me marqué errores aquí y es porque lo tengo que enviar el primero hacerun hoy conspiren
tocó tocó Koma y el segundo sería có.
Siguiendo este ejemplo que tengo acá el segundo round y el segundo.
Entonces icons punto.
Ni Emmi.
Ese es el ícono para hacer la simulación de ese ícono que teníamos en el demo Koma Routh y el último
es ser entonces hoy con 6.7 Koma y el texto va a ser perfecto.
Que los cambios van a notar que no cambia nada porque estos argumentos los estoy recibiendo pero no
los estoy usando acá aquí entonces sería AICO y aquí abajo sería el texto.
Ahora sí deberían de verse como bueno como esperamos todos queda pegado pero ahora simplemente es adaptarlo
un poquito en el Halcón.
Primero que nada necesito cambiar el color voy a poner el Colors punto Blu lo mismo tengo que aplicarlo
al texto y también tengo que incrementar el 6 de ese icono.
Entonces sois de unos 40 puntos cero pixeles creo que así es también pero hoy queda mucho a su discreción.
Ok ahora vamos con el texto el texto también tiene características parecidas pero tiene su estáel que
es de tipo Textile el cual tener un iPhone 6 y poner el valor de 15 puntos cero o un valor que ustedes
consideren como conveniente Coma y el color va a ser colores punto pero con mayúscula colores punto
Blu Blu Dios mío Blu.
Ahora si grabamos los cambios y ahí está ya tenemos el color pero todavía nos falta la posición de los
mismos.
Si ustedes se fijan en el texto y el icono sale como muy pegados entonces podríamos separarlo con un
6 Boks con un height de 1 5.0 pixeles 5.0 pixeles.
Ustedes saben que pueden probar los valores hasta llegar al punto que ustedes desean.
Se baja un poquito y ahora viene la ubicación en el Roh en el BROU.
Tengo que hacer la ubicación.
Por qué.
Porque puedo decir que la columna es de manera vertical el rojo es la parte de cómo se alinean de manera
horizontal.
Entonces regresemos a nuestro rol en la parte de crear acciones dentro del robot.
Tenemos varias propiedades como el cross Axis alignment y el axis alignment.
Recuerden que el main Axis alignment ningún roll es la forma como se ordenan de manera horizontal.
Ok entonces Maina Axis a la de Main Axis A LA M y tenemos varias propiedades.
Si ustedes no están seguros qué hace que especialmente al inicio.
Entonces probemos las todas.
Vamos a ver qué hace el Center o el Center pormenor las ubica y yo podría hacer una separación acá esa
sería una alternativa y funcionaría.
Pero ahora probemos el End.
Si lo pongo en él entonces los tira al final de Rou.
No es lo que yo estoy buscando el espacio Haroun que grabó los cambios no se mira mal.
De hecho si lo miramos acá es parecido.
De hecho podría ser ese podríamos comprimir un poco rock que sea un poco más pequeño y tendríamos el
mismo efecto.
También podríamos probar si vamos viendo el Space Between gravó los cambios y esto pues definitivamente
no es punto.
Space Everly lo que aquí se mira mucho mejor de hecho creo que ese es el que vamos a dejar y vamos a
probar el último Estatut que es la configuración por defecto de todo Rou.
Vamos a dejarlo.
El Espais y Benni que distribuye cada uno de de las dimensiones de cada una de sus hijos de manera proporcional
o sea esta caja es exactamente el mismo tamaño que esta caja y de esta otra caja.
Perfecto entonces ya tenemos nuestras columnas para hacer la última parte.
Si miramos nosotros acá simplemente es un texto inclusive yo lo que haría es crear el texto por ejemplo
crear el texto u otro método que me crea ese widget con el objetivo de que esto quede bastante claro.
Widget se va a llamar crear textos y llaves y aquí hay un botón del texto aquí adentro del texto hay
que hacer ciertas configuraciones presionaron enter y aquí un punto y coma en el texto que voy a colocar
aquí adentro.
Yo tengo una extensión que se llama Lorin Ipsum entonces puedo escribir Loreen y puedo insertar un párrafo
en Iced párrafo pero simplemente es para tener mucho texto de relleno.
Eso es básicamente todo lo que estoy haciendo hoy.
Pueden ustedes empezar a escribir escribir escribir escribir escribir escribir para tener todo ese texto.
Si yo grabo los cambios tenemos que nuestro texto aparece de esa manera se ve espantoso y lo que nosotros
estamos buscando primero es que tenga una separación o sea puede ser un margin un paladín también y
tenga una separación hacia arriba entonces hay varias cosas que hacer.
También podríamos cambiar el tamaño de la letra y muchas cosas que se pueden hacer acá pero el texto
como tal yo no lo puedo no le puedo poner un parche en el texto tengo que guardar o envolver este texto
en un container por ejemplo y este container si le puedo poner el paint Padín Hech Insect voy a ponerlo
simétrico.
También quiero que en la parte horizontal tenga una separación de 40 píxeles como ven que se mira bastante
mucho mejor y en la parte vertical voy a hacer una separación de unos 20 puntos cero pixeles grabó los
cambios y queda un poquito más abajo.
Si miramos el ejemplo.
Básicamente eso sería pero yo quiero que el texto quede justificado asegúrese que al final del texto
que ustedes escribieron ponga una coma enter y aquí el texto van a poner un texto Aline Justified eso
ya lo habíamos usado en la aplicación de películas pero de esta manera nuestra aplicación se ve bastante
bien se ve mucho mejor ahora antes de terminar la clase sólo voy a dejar el siguiente problema planteado.
Voy a poner varios textos voy a grabar los cambios y espero que en todos sus dispositivos les aparezca
esto lo que quiere decir aquí Flore es que el contenido que nosotros tenemos en la columna principal
en la columna que tienen nuestros CAFO quiere decir que ya no cabe la información de hecho aquí me dice
que hay un Olfo de X cantidad de pixeles o sea que se está que está faltando esa cantidad de pixeles
para renderizar todo lo demás que falta.
Ahora hay varias maneras de resolver esto que vamos a aplicar en el próximo video puede ser un desvio
o pueden ser otras opciones de scroll pero eso lo vemos en el siguiente video.