Bien es momento de trabajar ahora creando mostrarlos.
Esta parte de acá tenemos que trabajar creando nuestros cuadros los íconos y los widgets que se encuentran
aquí adentro.
Es el momento de hacer eso así que regresamos a visual con compremos esto y voy a comprimir los títulos
y voy a comprimir el fondo de la aplicación y entonces tengo el fondo de la aplicación que se le está
que está aquí pero ahora como yo quiero que estos elementos se puedan hacer scroll van a tener que venir
a estar justo abajo de los títulos que tengo acá.
Recuerden que esta barra de títulos es estoy aquí.
Entonces lo que quiero colocar vine aquí abajo.
Ese método se va a llamar botones redondeados parentesis.
Eso es todo.
Voy a copiar este método y lo voy a implementar justo aquí abajo entonces widget botones redondeados
ahora ya ves qué es lo que tengo que hacer acá.
Hay muchas maneras de simular este efecto podríamos tener lo que es una columna o mejor dicho un robot
que tiene una columna dos columnas luego otro robot con dos columnas luego otro rojo otras dos columnas
y así sucesivamente.
Se podría hacer así perfectamente pero quiero utilizar otro widget que sirve para crear eso mismo y
ese widget se llama el Taymor el tablet.
Si yo abrí y cierro paréntesis acá puntico Enter.
Si dejo el cursor encima voy a ver todas las propiedades hay una y muy importante que yo creo que es
obligatoria vamos a ver si yo la dejo así vamos a ver si me revienta no reventó.
Pero una propiedad importantísima son los Children es decir los elementos que van dentro del mismo.
Entonces lo voy a especificar acá Children y dejo el cursor encima.
Si miramos lo que dice acá tiene que ser una lista de y Bulldogs.
Eso se explica bastante sólo Rou es una fila.
Entonces sería una colección de elementos que van a ir alineados.
Entonces el chiste es la lista de un té y Borrow parentesis y también recibí su Children Children es
el elemento son los elementos que van a estar en posición horizontal el Chillón de un tiburón son las
columnas que van a estar dentro del mismo y el rock ya es toda la fila.
Aquí sería otro terrible robot que sería otro Trevorrow sería otro Trevorrow y así sucesivamente.
Sale un poquito más fácil que quedarse toda la estructura de columnas y Rousset manualmente.
Entonces aquí adentro del tablero también tiene su Children el cual puedo abrir y cerrar llaves y dejar
el cursor encima pero esto ya es una lista de Wiggin.
Quiere decir que puede ser cualquier cosa aquí adentro podría especificar un texto que diga item y grabar
los cambios.
Vamos a ver qué pasa.
Aparece el tema acá yo puedo centrarlo puedo alinearlos puedo hacer muchas cosas con el trébol.
Ahora sí yo creo.
Otro elemento aquí faltaría una coma.
Ahora tengo dos elementos posicionados así si yo llego y clonó todo este Trevorrow y grabo los cambios.
Entonces ahora tengo otros ítems abajo y siclo no esta línea nuevamente.
Ok entonces tendríamos otros elementos aquí abajo y nosotros vamos a tener cuatro que van a ser 4T el
Broz y por eso aparecen de esa manera.
El único inconveniente es que siempre tienen que ser o mejor dicho cada uno de los tesoros tiene que
tener la misma cantidad de elementos.
Si un Trevorrow tuviera un elemento esto no es permitido nos va a reventar la aplicación.
Entonces tiene que tener cuidado y aquí el error dice que no tienen la misma cantidad de campos.
Entonces voy a dejar como estaba y asegurarme de que funcione ok yo no voy a regresar este montón de
textos.
Por qué.
Porque no tiene sentido regresar este montón de textos.
Lo ideal sería crearse ese widget con los bordes redondeados que tiene su color y toda la cosa.
Para eso voy a implementar un método que se va a llamar crear un botón redondeado parentesis y una coma
borrase.
Bueno la verdad es que hay que reemplazar todos estos textos hay que reemplazarlos todos por la instrucción
que yo les estoy dejando ok.
Y aquí hay que arreglar este Tacoma está Koma y está Koma.
Obviamente este método no existe o vamos a crearlo.
Este método es el encargado de crear ese Widget Widget o crear un botón redondeado.
Vamos a hacer un reto y lo ideal es que al principio creamos todo el código estático y luego vamos a
aceptar los argumentos para personalizarlo conforme sea necesario cada una de esas opciones.
Ok entonces comencemos aquí lo que voy a tener que hacer es un retorno de un container que parentesis
Punto y Coma enter dentro del container.
Voy a decir que tiene un giro de 180 .0 píxeles va a tener un margin un margen para separarlo de los
demás.
Todo va a tener un eje insights o 15.05 píxeles especificamos el Declaration de correction de un box
Separation Enter.
Va a tener su color de color apuntó from RGB o el que hemos estado usando y el color será el 62 66 107
y va a tener cierta transparencia.
Entonces 0.70 o un 70 por ciento de transparencia.
Y ahí ya va tomando forma.
Noten que la ventaja de usar el tablet es que hace que los Willet tengan ese espacio ya personalizado
queda perfecto ese widget es exactamente lo que ocupa para crear este estilo.
También podrían personalizarlo para que queden más pegados por ejemplo quitando ese margen y entre todos
quedarían así pegados pero podría dejarlo hasta de un 1 y tendría una línea delgadita.
Ustedes pueden hacer grandes cosas con este Willet del tablet.
Ya es muy fácil de trabajar y ya viene todo hecho por ustedes.
Ahora cada uno de estos elementos también tiene bordes redondeados entonces bordes Radius de un borde
Radius circular y el mismo y siempre valor que he venido usando es de 20 puntos cero píxeles de redondeo.
Después de Declaration necesito implementar lo que es el Chile que es el contenido del mismo el cual
va a ser una columna y porque va a ser una columna Fernando revisamos acá porque tenemos este widget
acá que es un elemento circular que tiene un ícono y luego viene un texto.
Entonces por eso va a hacer columnas que tienen su Children Tab y su arreglo de widgets y voy a colocar
un circo un circo Avatar esto ya lo habíamos utilizado y perfectamente lo puede usar para poner un ícono
ahí adentro.
Entonces en Chile hoy con voy a poner un icons punto y busca en icons punto ya lo vamos a cambiar a
cualquiera que ustedes les guste coma color color punto para que sea en blanco Colors color punto guay
y hagamos que conoció a poquito grandes sois de unos 30 puntos cero pixeles.
Si yo grabo los cambios lo tenemos de esa manera y ahí va a quedar que va quedando el radio de ese avatar
es bastante pequeño debería ser un poco más grande para eso puedo decir Radius de unos 35.6 pixeles
y debería ser que el círculo crezca bastante el color de fondo lo voy a especificar pero lo vamos a
parametrizar después.
Entonces el pacá un color voy a decir de un color punto.
Pink colors.
Punto Pink Accent solo para ver la variación OK.
Luego faltó una coma.
Luego lo vamos a parametrizada pero hubo momentos que quedé rosado está bien.
Justo después de este circo de Avatar voy a poner una coma.
Y ahora viene el texto que quiero mostrar.
Ese texto va a ser por ejemplo Heute o Cosano cosa lo que sea lo parametrizar también.
No se mira muy bien entonces el textil vamos a ver aquí el TEDx style va a ser un textil y va a tener
un color de colores apuntó Pink.
También lo vamos a parametrizar que debería ser exactamente el mismo color del botón.
Entonces este Accent sería este.
Estos dos van a ser iguales ok y vamos a ver qué podemos hacer para acomodar a esos elementos entonces
puedo trabajar con el alineamiento en el axis de la columna acceso al acceso de un axis a la mimen y
probemos el Espais Arrow.
Vamos a ver qué tal se ve que no se ve mal pero hay mucho espacio hay muchas maneras de resolver esto.
Otra forma sería que después del texto puedo agregar un side box set box como un Jaitt de 1 5.0 pixeles.
La verdad no es mucho entonces a qué hora tengo otro elemento y ya se juntaron un poco puede ser que
eso sea lo que ustedes buscan.
Todavía podríamos decir que hay más separación hacia arriba.
Entonces podríamos tomar este mismo 6 Box y colocarlo aquí arriba.
Claro esto son estrategias.
Puede ser que alguien lo haga de una manera más sencilla que yo pero hoy ya lo tenemos acomodado y puedo
hacer scroll.
Y ahí está tengo mi aplicación todavía no hemos aplicado el Blur pero ya va tomando forma lo vamos a
dejar así porque no quiero que el video se haga muy largo.
Todavía nos falta aplicar el blur perdón la parametrización de los colores del texto y creo que eso
sería todo pero en la próxima clase.