En la clase pasada terminamos creando lo que está viendo en pantalla.
Ahora nos toca crear esta otra cajita que tiene los campos que vamos a empezar.
Recuerden que cuando ustedes trabajan con campos de texto es importante que los coloquen dentro de algún
elemento que pueda hacer scroll porque si no haces scroll es muy probable que sus campos sean los opaque
o sean ocultos o mejor dicho los oculta el teclado.
Entonces hay que colocar algo que nos permita hacer un escoró también.
Eso simplemente es un reforzamiento o algo para que ustedes tengan presente.
Voy a crearme una nueva propiedad acá en el escalafón del peaje se va a llamar Luquín log inform parentesis
y aunque creo que ya no vamos a agregar más acá empezamos a crear nuestro widget que es el logo Infor
blusero llaves y esto lo voy a ocultar porque ya no lo necesito ver que este informe va a retornã un
single es obvio que es un elemento que me va a permitir a mí hacer scroll dependiendo del alto o todo
lo largo que tenga su hijo.
Ese hijo va a ser un Chile que va a tener una columna en la cual yo voy a poder colocar o empezar a
colocar todos los elementos que están acá.
Por ejemplo este ingreso de esta caja de texto es otra caja de texto este botón y todavía esto inclusive
esta otra caja este container.
También tengo que colocarlo ahí voy a empezar con su Children dentro de la columna y dentro de esta
columna voy a empezar a crear mi primer container porque van a ser varios posiblemente contenga gente.
Definamos el wifi como el 80 85 por ciento del ancho que tenga la pantalla.
Y ustedes ya saben que para sacar las dimensiones de la pantalla usamos final se va a llamar 6 va a
ser igual a mi idea QWERTY punto o Frontex.
Punto 6 punto y coma este contexto lo voy a tener que recibir un contexto Icontec si lo voy a tener
que mandar aquí también.
También pudimos haber generado aquí la referencia al contexto.
Perdón al 6 y simplemente mandar el 6 como ustedes quieran se puede hacer de muchas maneras entonces
el 6 de este container va a ser el 6.20 por y vamos a aplicar el 30 el 85 por ciento que les había dicho
85 por ciento y gravó los cambios y no voy a ver absolutamente nada pero estaría aquí arriba en algún
lugar de la pantalla respecto al ancho.
Ese va a ser dinámico dependiendo de los elementos internos.
Por eso no voy a especificar el height pero sí voy a hablar sobre el de conexión de un box Declaration
ente y tiene que ser un fondo blanco entonces Colors de Colors.
Punto waited perfecto yo voy a ir Sabando los cambios pero todavía no se ve nada porque el alto de este
container es de cero pixeles y por eso no se ve antes de continuar definiendo más propiedades del Declaration
déjenme agregar el Yahel para poder ver o poder observar algo dentro de este Chaín de este contenedor.
Voy a agregar una columna otra columna enter con su Children ta y aquí coloquemos un texto que un texto
que diga ingreso grabo loscambios entonces ahí arriba está y no está centrado en muchos juegos que todavía
no están funcionando bien o que todavía no se ven bien por qué está aquí arriba.
Acá lo primero que quiero hacer para comenzar a hacer estos arreglos es que este noch necesito protegerme
con un 6 Evia perfectamente antes de este container puedo definirme un nuevo elemento.
Qué será un Saif Evia Taub parentesis y dentro del 6 Evia vamos a colocar un Chile con un container
también que tenga un height de 180 .0 pixeles.
Yo grabo los cambios y estos 180 pixeles es la distancia de mas o menos como este punto hasta acá y
luego tenemos el Evia que me va a ayudar a mi a determinar esos 180 pixeles adicionales.
Bueno este espacio adicional dependiendo del tamaño del noch o si hay algo que yo no pueda utilizar
hay perfecto si ya tengo esa separación tengo mi ingreso hoy ya puedo seguir trabajando con este campo.
Definamos el estilo de este texto de ingreso Textile tap bonsais.
Pongámosle unos 20 puntos cero pixeles y grabo los cambios para que crezca un poquito.
Sigamos trabajando acá aunque ustedes consideren que pudieran hacer scroll.
No va a pasar hasta que no sea necesario.
Eso ya lo vamos a ver funcionando ese 5 Korol.
Creo que ya lo habíamos usado antes.
Sigamos.
Todavía hay mucho que hacer.
Este container tiene que tener sus bordes redondeados y otras cosas entonces border radius vamos a especificarlo
de un borde Radius circular de unos 5.0 píxeles.
No es son tan pronunciados los bordes ahí están más o menos bonitos redondeados.
Adicionalmente también puede implementar un que haya bastante separación entre el texto y el final del
mismo.
Regresemos a quedar justo abajo del 85.
Vamos a especificar un peine de un match Insights pero simétrico vamos a hablar de la posición vertical
de unos 50 puntos cero píxeles para que haya bastante separación grabó loscambios y deberíamos de tener
esa esa gran separación.
También podríamos agregar un margen para separar un poquito la parte de arriba o sea esta caja con este
texto de acá y puedo agregar un Marching de Edge Insights only o simétrico también podríamos poner un
simétrico de un vertical de unos 30 puntos píxeles para que aún haya un poco más de separación de este
texto con esta acá la caja se ve bien el diseño no está quedando tan mal pero no vemos una sombra abajo.
Podríamos implementar ese boxeador.
El boxeador también es un listado de box Sadous Box Jado este listado.
Vamos a especificarlo aunque sólo necesito un boxeador Boks llamado Taub.
Aquí adentro vamos a especificar el color de Colors apuntó Black y usemos esta entonación de la opacidad
de 26 para que no sea totalmente oscuro y debería de verse un poquito más.
Ahí está tal vez casi imperceptible si ustedes no están corriendo en un dispositivo posiblemente sí
lo vean pero voy a acomodarme un poco más.
El blue Radius voy a especificar que sea de 3.0 y gravó los cambios ahí va tomando forma.
Coma el ófset va a ser un offset de una posición.
Bueno no quiero que se mueva en el X pero sí quiero que esté un poquito más abajo la sombra de unos
5.0 pixeles entonces va a bajar un poquito la sombra.
Perfecto.
Y por último quiero un spray spread radios de unos 3.5 pixeles 3 perdon 3.0 pitcheres para que sea como
con Mas Blur la sombra.
Ustedes pueden jugar con esto y adaptarlo como mejor les parezca bien.
Ya tengo mi texto.
Ahora tengo que seguir con la parte de la creación de los campos de los imput Fils Koma empecemos creando
el e-mail para crear y me parentesis coma este email.
Este método no existe.
Lo voy a implementar aquí abajo crear e-mail es un widget tap parentesis ISRO llaves.
Este crear e-mail va a retornar un container también.
Casi siempre son un montón de containers container parentesis punto y coma Enter.
Va a tener su Chilet por el chat de un texto feo tap enter especificamos el vórtice de un ex input type
y busquemos el del email o saber Travez text input type qué punto y mail es el que estaba buscando enter
Declaration de un input Declaration tap enter su hay de icons por lo que hemos de un punto alternativo
Ternate email a Koma y pongámosle un color de no saber qué pasó acá que sería un ay con perdón con color
de Colors.
Punto.
Deep Purple es más o menos el color que estoy usando en la aplicación grabo los cambios y por ahí va
el objetivo de haber ingresado se Tsui al container.
Es que puedo ponerle un par de insights y usemos el simétrico para que la posición horizontal sea de
unos 20 .0 pixeles y que no quede todo tan pegado a los bordes.
Ahí ya puedo escribir no me gusta que esta caja de texto quede tan pegado al índice de ahí arriba entonces
puedo agregar justo abajo del ingreso un sandbox un sandbox Koma y después Bica un Jaitt de 60 puntos
cero pixeles y grabo los y ya tendríamos una mayor separación.
Está como además la voy a borrar y terminemos de configurar esto rápidamente.
Además propiedades como por ejemplo el texto que voy a poner acá va a ser de ejemplo arroba correo puntocom
tenemos un error ahí pero seguramente es porque nos falta una coma que al final viene otra coma aquí.
Luego viene un leve texto que va ser de un correo electrónico elec irónico voy grabando los cambios
para que ustedes lo vayan viendo.
Voy a borrar todo esto ok y ya van viendo como va quedando ese esta cajita de texto ahí el error ya
lo vamos a manejar pero primero quiero quedar las cajas de texto ahora copian toda esta caja la copia
toda y voy a pegarla acá.
Este clon del crear y hacer crear password.
El Kibón lo vamos a dejar por defecto pero vamos a colocar el obscure TREC Tex en Tru para ocultarlo
aquí abajo en el texto podríamos poner otra cosa pero como es un correo a saber que con una contraseña
no hacer falta.
Aquí sí en el árbol en el árbol te puede poner contraseña y grabo los cambios.
Deberíamos de poder colocar este crear password ahora justo aquí.
Parentesis coma voy a colocar otro 6 vos acá pero este va a ser de 30 píxeles y voy a colocar otro bajo
porque va a venir un botón que ahí está.
Pero aquí no sería un e-mail podremos usar un punto Lok estoy aquí outline grabó los cambios y ahí va
quedando ups pero lo puse al revés lo puse al revés no eran éste en el Daily Mail es en este día abajo
grabó los cambios y ahí está perfecto.
Para el botón hay que volver a crear otro método o hacer un widget que va a regresar algo llamado crear
un botón es el nombre del método abre y cierra llaves.
Vamos a ser un ratón también de un raised botón a regresar este botón Enter.
Falta un punto y coma va a tener su Chaile y recuerden que dentro de un botón puede ser cualquier cosa
es un widget.
Podemos poner un texto pero quiero meter aquí un container para estilizar un poco este botón.
Dentro de ese container voy a colocar el Chaile que diga text ingresar me está marcando un error porque
todos los botones necesitan el evento on Press que ya lo vamos a definir grabo los cambios y voy a utilizar
este botón.
Aquí también abajo pego Clear botón paréntesis y grabo los cambios.
Esto debería hacer que aparezca mi botón.
Hoy vamos bien hoy va quedando y va quedando vamos a crear botón y hay que seguir utilizando esto un
poco.
Empecemos con el PIN y voy a decir CETS simétrico voy a decir que en el horizontal va a ser de unos
80 .0 bastante grande y el vertical va a ser de unos 15 .0 o los cambios y van ver que el botón va tomando
su cierta forma ahora yo no quiero que el botón sea tan cuadrado.
Puedo cambiarle los bordes redondeados utilizando el snap el SAP va a ser de un round de rock tango
Border enter con sus bordes Radius de Border Radius circular y usemos de 5.0 que es exactamente la misma
pronunciación que tenemos en estas curvas.
Perfecto ahora vamos a colocarle el botón la elevación de 0.0 para que quede casi pegado o bien pegadito
al elemento y no tenga su sombra que no me gusta la sombra pero ustedes sabrán cómo pueden personalizarlo
más o cómo les gustaría que pongamos el color de Colors apuntó Deep Purple.
Y también voy a ocupar el color Tex o el tex color perdón Tex color de Colors apuntó Witt.
Grabo los cambios ya tengo mi botón con efecto de material y todas las cosa excelente.
Lo último lo último que ya le digo que ya con esto terminamos es poner una pequeña palabrita acá para
que diga bueno recuperar contraseña que ustedes podrían colocar como si fuera un botón como si fuera
otra cosa pero tienen que estar fuera de mi formulario.
Recuerden que éste este chat que tenemos acá es más columnas que están aquí adentro y este columna vamos
a buscar nuestras columnas que se hicieron porque está esta otra columna ya es la que contiene esta
caja y puedo colocar algo que al final vamos a buscar lo vamos a comprimir éste y Evia y aquí abajo
puedo poner un texto que diga olvidó olvidó la contraseña.
Algo así me está marcando un error porque seguramente me falta una coma aquí me faltaba una coma.
Después de ese conteiner y para terminar voy a poner un 6 Boggs 6 Boks también de un height de unos
100 .0 píxeles para que todavía se pueda hacer un poquito más de scroll inclusive para cuando llegamos
al final.
Básicamente este es lo que yo quería hacer en el diseño.
Ya tenemos listo todo nuestro diseño del formulario de nuestro login.
Si ustedes le dieran vuelta al dispositivo van a notar que aquí podremos adaptar este texto pero van
a poder notar que podemos hacer scroll aquí y noten que los pixeles que tenemos acá son estos 100 pixeles
que tengo aquí abajo.
Voy a regresar a la aplicación de modo horizontal vertical y si yo les mostrara el teclado o saber que
se me hizo el teclado y.
Entonces yo puedo hacer scroll sólo de esa caja puedo hacer scroll destaca.
Si estoy acá ahí puedo ser scroll todavía y puedo hacer scroll acá perfecto.
Cuando yo le doy automáticamente se va a adaptar eso todo lo hace flores por nosotros.
Yo sé que esta clase fue bastante pesada pero ya tenemos un logro bastante bonito que Uds. perfectamente
pueden reutilizar en sus aplicaciones.
Lo dejamos así continuamos con la siguiente clase.