Comencemos a trabajar en el diseño del locking.
Por lo menos la pantalla.
Quiero crear esto.
Entonces vamos a comenzar los primeros y retornar a la imagen lo que tenemos acá.
Es un cuadro morado que tiene un gradiente de modo horizontal y a su vez está cubriendo un cierto porcentaje
de la pantalla.
Luego viene una parte blanca una caja y vamos a comenzar con el fondo que es esta parte morada su gradiente
y esto es como esferas que están flotando por ahí.
Eso lo vamos a hacer en este video.
Así que abramos en lo vintage.
Voy a quitar este Center Chit este centro lo voy a quitar y lo que voy a utilizar es un stack porque
necesito mostrar el fondo y a su vez también voy a ocupar un elemento que esté sobre el fondo.
Este Stack tiene un Childe enter y aquí vamos a crearnos nuestro primer método que se va a llamar crear
fondo parentesis y voy a poner una coma.
Este método todavía no existe.
Lo voy a crear aquí abajo.
Entonces crear fondos tienen que regresar un widget a orillero llaves y voy a hacer el ratón de un container
parentesis y voy a presionar enter.
Ok este container lo que necesito que sea es la parte morada.
Entonces voy a empezar a hacerlo.
Primero voy a definir el Jaitt o el pergamino height qué sería más o menos el 40 por ciento de mi pantalla
para obtener el 40 por ciento de la pantalla.
Voy a ocupar en mi acuario entonces Final 6.
Va a ser igual a media y punto of context .6 pero este contexto no lo tengo acá en este método entonces
lo voy a recibir vía context Tapp se va a llamar ConTeXt y este contexto es el que voy a tener que mandar
acá a mi método de crear fondo.
Este contexto perfecto ahora el 6 para decir que este contenedor va a tener el 40 por ciento sería el
del 6.ª el height por sería un 0.4 para crecer 40 por ciento el ancho va a ser todo el ancho de la pantalla.
Entonces puedo decir doble punto Infinity perfectamente lo puedo hacer así.
Ahora quiero gradiente que se miren los colores ahí entonces de correction esto recibiría un Bobs de
conexión Tapp te va a tener un gradiente y el gradiente va a ser lineal gradiente entero me pide los
colores que por fuerza tienen que ser al menos dos colores.
Y si dejamos el cursor encima van a ver que es de tipo color entonces puedo definirlo así perfecto.
Así que definamos nuestros dos colores color punto from RGB o hay varias maneras de definir los colores.
Usen los que yo les voy a pasar 63 63 156 y opacidad de 1.0.
Cómo vamos a hacer nuevamente el color punto from RGB o tap y aquí serían 90 top 70 Tapp 106 78 Tapp
1.0.
Veremos los cambios y deberíamos de ser capaces de ver ese fondo tiene un gradiente tal vez en el video
no se mire tan tan pronunciado por ustedes pueden cambiar los colores y hacerlo como si ya tenemos nuestro
gradiente pero también si nos fijamos tienen como unas esferas que están flotantes y también quiero
que esta parte sea como incrustada en el fondo para que cuando la persona use o se mueva pueda.
Esta caja de textos sobre este mensaje que dice Fernando Herrera y ese loquito de ahí entonces sigamos
trabajando en esto como yo necesito cosas que van a estar sobre este gradiente.
Entonces esto también va a tener que ser un stack.
Entonces vamos a cambiar esto un poco en lugar de hacer un retorno del container.
Voy a almacenar ese fondo en una variable llamada fondo morado que va a ser igual al container y todo
eso ok aquí abajo voy a hacer un retrón de un nuevo Stack perfectamente por apilar stacks unos dentro
de otros aquí es un punto y coma Enter.
Recuerden que el stack tiene su Children también y voy a colocar acá mi fondo morado fondo morado y
voy a poner una coma.
Gravó los cambios y deberíamos de tener exactamente el mismo resultado.
Noten que sigue siendo el stack el que se está mostrando.
Si yo lo comento no aparece y si lo dejo ahí si aparece.
Entonces qué les parece.
Si ahora trabajamos creando estos circulitos esos circuitos que tengo en varios lados de ese fondo creamos
una nueva variable llamada final círculo va a ser igual a un container paréntesis Punto y Coma el valor
de esos círculos va a tener un Wiz de 100 puntos cero pixeles y un height de 100 puntos cero pixeles
también en el Declaration.
Por ello también recibe sus Boks de correction enter y S Box de corrección va a tener sus bordes Radius
de un borde Radius circular.
Le voy a ponerlo de cien puntos cero pixeles o sea va a ser completamente circular coma y el color.
Podríamos utilizar un blanco y ponerle una transparencia muy pronunciada color de Colors.
Punto.
Pero con la C mayúscula Colors punto wait.
Para empezar para mirar algunos cambios si no aparece pero es porque lo tengo colocado aquí el círculo
o círculo grabó los cambios y ahí está perfecto.
Ahí está el círculo bastante pronunciado.
Yo no creo que lo vayamos a dar 100 por ciento igual esto circulitos pero los voy a colocar de la mejor
manera que pueda.
Bueno ese color es demasiado fuerte.
Voy a ponerlo aquí from RGB o los colores para ser un blanco es 2:55 2:55 2:55 y la opacidad que vamos
a utilizar puede ser de 0.05 es casi imperceptible.
Entonces hay tal vez un sendero en el video pero ya está.
Ahora si yo quiero que ese circulito aparezca en otra posición yo puedo utilizar otro widget llamado
posiciones posiciones.
Este de acá Exposition recibe un Chaim a fuerza y ese chaval va a ser el círculo.
Ok si yo grabo los cambios tendríamos exactamente el mismo efecto si dejamos el cursor sobre el position
posiciones les va a decir que esto crea un widget que permite controlar en donde un hijo se va a colocar
o se va a posicionar siempre y cuando esté dentro del stack o sea perfecto eso es lo que yo necesito.
Entre las propiedades que voy a poner en él posiciones también voy a ocupar mandar ciertos argumentos
como el top de voy a empezar con unos 90 píxeles 90 puntos ser pixeles gravó loscambios entonces ven
que baja los valores del posiciones.
Ustedes pueden colocar 3 de 4 en el top tienen el Riet el Boron y tienen el led pero si ustedes ponen
los 4 eso les va a dar un error por lo menos uno tiene que estar bueno tiene que faltar aquí más o menos
está la descripción de lo que les estoy hablando.
Ok entonces sigamos.
Este va a ser un top 90 entero va a estar en un Left de unos 30 puntos cero pixeles y grabó los cambios
iban a ver que se mueve un poquito para allá perfectamente podría poner esto en una sola línea.
Eso lo voy a hacer también porque quiero crear otros círculos y lo que si lo que acabo de hacer es exactamente
lo mismo creamos un par de círculos adicionales en este otro en lugar de que sea 90 voy a poner menos
40 en el left.
A cambiarlo por un right right de menos 30 o sea quiero que haya otro círculo un poquito más arriba.
Hoy pareciera que el color se hizo más fuerte pero es que hay varios círculos que tienen el mismo color
y por eso aparecieron todos unos dentro de otros.
Ahora cambiemos este último sea vamos a cambiar a este de acá y voy a poner un Boron TAP.
Este va a estar en un menos 50 y en la posición right T.
Menos 10 ustedes pueden jugar con estos valores y crear sus círculos como dicen.
Noten que aquí tengo otro aquí hay otro círculo aquí otro círculo creemos otro más este siempre va a
estar en el Boron pero si lo pongo positivo 120 entonces deberíamos de verlo por acá va a estar en el
right de unos 20 pixeles grabo los cambios y ahí lo tenemos queremos uno más solo para que quede bonito
Boron Boron.
Voy a poner un menos 50 y este va a tener un LED de unos buenos 20 grados loscambios y aquí tenemos
el otro círculo.
Yo sé que tal vez no son exactamente iguales pero ahí los tenemos ok y tenemos nuestros círculos.
Lo único que hace falta para terminar este video es crear esta partecita de acá entonces también lo
vamos a hacer dentro de este stack.
Ok aquí para colocar toda esa información yo podría crearme otro otro argumento y colocarlo aquí adentro
pero como ustedes desean yo voy a quedarme dentro del container parentesis dentro del container voy
a colocar un chip que va a ser unas columnas se va a hacer un cono que tiene su chillen y por qué.
Porque si nosotros observamos claramente tenemos este ícono y tenemos un texto uno abajo del otro.
Entonces lo voy a poner como un solo widget de tipo columna.
Empecemos con el ícono.
Va a ser un icons puntuó person Ping.
Este es el que estoy buscando con su color de.
Punto Wilt y definamos el 6 6 de unos 100 puntos cero pixeles.
Esta última como está además graba los cambios ok ahí está ahí está bien.
Voy a poner una coma Enter.
Adicionalmente voy a colocar el texto un texto que diga Fernando Herrera o su nombre si ustedes lo desean
Coma y definamos el estilo de un Textile está como está además ya que dentro coloquemos el color de
Colors un tuit de la misma manera y un iPhone 6 de unos 25 .0 píxeles grabo los cambios y debería de
aparecer acá tenemos Fernando Herrera mira del todo mal.
Pero bueno no para qué digo se mira fatal.
Entonces yo lo que quiero es que estos 100 por ciento centrado la columna por defecto se va a estirar
en base a cuál es el widget interno más lejos o más grande también.
No quiero que este marcador o este icono aparezca tan pegado del nombre.
Perfectamente puedo poner aquí un 6 Box y ver este truco un 6 Box y dentro del 6 Box voy a especificar
un Jaitt o sea un ancho de unos 10.0 píxeles para hacer una pequeña separación.
Ups y esto muy pequeño y aquí era una coma lo que quería poner y se van a separar un poco pero todavía
no están centrados.
Qué les parece.
Si digo que ese 6 Box va a tener un Wiz de doble punto Infinity o sea que agarre todo el ancho posible
eso va a determinar la columna que la columna tiene un hijo que abarca todo el ancho y por consecuencia
todos los centrã.
Ok entonces no se preocupen porque en dispositivos como hijos que tienen el noch me aparece esto bloqueado
ya lo voy a arreglar ya lo voy a arreglar entonces dentro del container voy a colocar un pin de un eje
en sets y aquí creo que hemos Only Solo me interesa que haya un panel en la parte superior de 80 puntos
cero píxeles ok y perfecto ahí ya queda más o menos como yo quería mi fondo.
Ya tenemos esta parte creada.
Lo que sigue es ahora trabajar con el formulario pero eso en el siguiente video.