Es momento de trabajar con los inputs.
Para eso les voy a pedir que vayamos a menú Options a nuestro Chop Jayson.
Vamos a crear uno nuevo que una nueva entrada.
La ruta va a ser imputs el icono va a ser imput y el texto va a ser imputs lo que noten la diferencia
entre la ruta imputs todo en minúscula el icono de minuscula y el texto todo en minúscula creemos los
cambios.
Voy a crearme este input en mis utilidades de iconos que voy a clonar lo voy a pegarlo acá.
Aquí también separo grabo los cambios ya tengo aquí mis utilidades lo cierro.
Ahora definamos la ruta.
Voy a cerrarla pero antes de crear la ruta creemos la página porque ocupamos una página donde llegar
no se va llamar imput y un bajo peaje puntos Dart Enter.
Ya sabemos qué es lo que tenemos que hacer import M de material.
Este va a ser un Estado full widget porque necesito manejar la información de las cajas de texto y con
esa información necesito estar jugando con la información.
Por eso es été full tap y llamar input Veitch y perfecto.
Yo tengo mi widget listo para trabajar.
Ahora les voy a pedir también que nos vayamos a la página de las rutas y definamos una nueva ruta se
va a llamar imputs acuerdense ese es el nombre de la ruta que iba a llamar lo que es el imput Peach.
Hay que importar esta página la importamos de acá voy a colocar al final los cambios y ya deberíamos
de ser capaces de ver nuestra ruta.
Ok aquí tenemos un pequeño problema con el imput y hacer un Istar para ver si algo sí faltó.
Esperemos un segundo a ver si aparece el ícono y perfecto ya tenemos nuestro icono y podemos trabajar
con esta página que ahora no tiene nada.
Empecemos con el café paréntesis.
Coma enter en el bar o se colocaron ADBA Tab y aquí adentro vamos a colocar nuestro título Takeru que
será un texto que diga imputs y imputs de texto.
Luego vamos a configurar esto un poco más.
Voy a grabar los cambios.
La página debería aparecer con el body en el body.
Yo voy a quedarme un view porque usualmente los elementos que se encuentran dentro de las cajas de texto
despliegan el teclado y por lo cual yo voy a necesitar que la persona pueda hacer scroll.
Hay varias formas de hacer scroll no solamente con el Live View pero las la que hemos visto hasta el
momento aquí vamos a trabajar con el Children y crearse nuestro primer input creanme método crear y
extraer el primero de todos.
Este método no existe voy a crearlo con control punto como un punto crear el método.
Si me hace este desorden con el tabulación presiono control z o lanceta y ya estoy listo para crear
este método.
Este método regresa a un widget nada del otro mundo y empezamos con el ratón.
Qué es lo que quiero hacer con este crear.
Quiero ponerlo acá dentro.
Cómo lo podemos hacer cuál es la sintaxis para definir un input.
Empezamos llamando la clase Text Filth.
Hay dos tipos de textil.
Tenemos el textil y el tex.
Confío que lo usaremos cuando queramos trabajar con un formulario y validar todo el formulario completamente
o trabajar con el textil.
Cuando queremos un independiente.
La diferencia entre ambos radica más que todo en que el Ford Field trabaja mejor con un formulario y
el text Field de manera independiente pero no quiere decir que aquí no podamos hacer la validación.
Si todas las cosas eso lo vamos a ver más adelante voy a quedarme el textil parentesis y como cualquier
cosa es un widget que recibe ciertos argumentos.
Por ejemplo si ustedes quisieran.
Bueno mejor dicho grabemos así como están para observarlo.
Si yo lo dejo así ven que aparece esa raya y si yo hago click puedo empezar a escribir ok.
Y ahí está mis caracteres.
Lo que estoy escribiendo.
Noten que el textil aparece demasiado pegado a los bordes y eso está bien porque es lo que le estoy
diciendo que haga.
Puedo hacer una separación aquí en el Live View y tenemos un peine voy a colocar el peine ejes o insights
y lo voy a poner simétrico.
Quiero que en el modo horizontal tenga unos diez puntos cero pixeles y en el vertical quiero unos 20
puntos cero.
Voy a grabar los cambios y vamos a ver qué tal se ve.
Se ve relativamente mejor tengo menos espacio acá y un mejor espacio aquí arriba claro.
Eventualmente voy a poder hacer scroll pero ya llegaremos a eso.
Empezamos a trabajar con las configuraciones que quiero colocarle a este textil.
Puedo hacer que cuando la página entra se ponga automáticamente el foco.
Con eso es el auto focus.
Voy a ponerlo como Truck porque es un valor booleano lo que recibe grabo los cambios y como el teclado
ya lo tengo abierto y ya encargué o ya está en esta pantalla puedo regresarme.
Dentro de los inputs automáticamente se posiciona hoy el valor por defecto es falso.
Yo lo voy a quitar porque a mí honestamente me estorbó un poco puedo arreglar la capitalización asumiendo
que quiero escribir palabras acá por ejemplo el nombre de una persona.
Entonces puedo obligarlo a que la capitalización sea por letras o por palabras o como ustedes quieran.
Para eso Tex capitalización Tapp y esto recibe.
Si dejamos el mouse encima algo llamado Tex capitalización por defecto está en no.
Entonces Tex capitalización y aquí podemos seleccionar qué otras cosas queremos.
Pero déjeme escribirlo bien Tex capital y sections.
Aquí tenemos caracteres por palabras por sentencias lo voy a dejar por sentencias voy a grabar los cambios.
Esto hace el piloto automático y empiezo a escribir Fernando.
Y ven que ahí ya lo puso espaciadora y ya lo puso en mayúscula.
Herrera espacio y lo pone en mayúscula excelente ahora pero ese input sería muy básico.
No se ve como medio sin gracia.
Voy a colocarle el Declaration el decoracion recibe un input Declaration entonces tap input Declaration
tap Enter.
Aquí tenemos otro montón de propiedades que podemos utilizar para personalizar como queramos nuestro
elemento nuestro input así que vamos a utilizar varios como quiero cubrir varias.
Vamos a hacerlas y se las voy explicando conforme yo los voy escribiendo.
Ok empecemos con un counter que es una etiqueta que aparece como la parte de aquí abajo.
Ya lo vamos a mostrar entonces Counter tap puede colocar un texto que diga letras o cantidad de letras.
Y voy a poner aquí un cero luego lo voy a reemplazar por la cantidad de caracteres que tengo hoy la
lista ya va apareciendo.
Cómo puedo poner también lo que es el texto que su maestro y como ustedes se fijan pueden dejar el mouse
encima.
El text y es el texto de sugerencia para que la persona pueda ver qué es lo bueno para que tenga una
idea de lo que vamos a poner ahí.
En mi caso va a ser nombre de la persona.
Si yo grabo los cambios voy a observar que no pasa nada y eso es porque ya tengo un texto ahí déjeme
borrarlo y ahí aparece el nombre de la persona perfecto y agarrando forma el texto que obviamente se
lee la etiqueta que va a decir esta caja.
Le voy a poner nombre que voy a grabar los cambios y note que el ébola aparece ahí.
Cómo puedo ponerle un texto de ayuda.
Helper text el text es un texto que va a aparecer abajo del imput.
Le voy a poner solo pero entre comillas solo es el nombre o lo que ustedes quieran poner ahí y anoten
como agarrando forma imput coloquemos un par de iconos que les parece.
Empecemos con el sufís hoy con estos son íconos que va a aparecer dentro del imput.
Entonces hay un paréntesis y aquí el punto son la accesibilidad.
Acces similitud vamos a ver este acaece me gusta y también voy a grabar los cambios para que ustedes
lo vean como va quedando.
Esa es la ventaja del otro y lo es exageradamente rápido.
Y luego tenemos un ícono que si queremos colocarle un ícono normal un ícono al inicio hay computó a
un circo vamos a usar este grabó loscambios y yo tengo una caja de texto que se mira bastante bien.
Si yo voy a perder el input vista apenas lo selecciono o lo activo se pone todo azul y ya se activa.
También podemos cambiar los colores y otras cosas.
Ahora quiero que este imput sea un poquito más estilizado ahora dentro del imput Declaration vamos a
colocarlo aquí adentro justo abajo de dispute Coronation hay otra propiedad que se llama se llama Bordet
tap.
Si yo dejo el mouse encima me va a decir que es de tipo input Border y aquí hay una definición del mismo
pero lo que me interesa saber es que es de tipo input porque podemos nosotros tomar este código e irnos
a la documentación de flores.
Déjeme buscarla nuevamente para que ustedes tengan una mejor idea.
Qué opciones son las que se reciben.
Imput Border Class porque recuerden que la documentación es el lugar ideal para tener información de
primera mano.
El que me interesa a mí es éste a Hotline imput border.
Aquí podemos ver las implementaciones Border y tenemos la tradicional que es el hombre que esta es la
que está usando por defecto así que vamos a implementar esta acá pueden ver más información de esa clase.
Hay entonces en el Border voy a poner de outline imput Border parentesis y yo puedo personalizar qué
tan pronunciado quiero que sean los bordes de este contenedor apenas caben los cambios lo van a observar.
Ahí aparece la caja de texto.
Puedo presionar Enter y aquí tengo el borde Radius y puedo cambiar el border radius border radius circula.
Esto ya lo hemos hecho bastante.
Voy a poner 20 puntos cero.
Se ve bastante bien cuando se pierde el foco.
Ah bueno no puedo cancelar el foco porque no tengo otra caja de texto.
Noten que si se ve bien apenas toco aparece el nombre aquí perfecto.
Ahora nos falta obtener el valor es decir la caja de texto.
Qué quiero hacer cuando yo escribo hoy quiero capturar esa información para capturar esos datos.
Voy a quedarme en l'Estat una nueva propiedad llamada string y un bajo nombre y la voy a inicializar
con vacío.
El nombre es un tren que voy a cambiar cuando la persona escriba.
Entonces justo después aquí en el textil.
Noten que estoy justo después del imput de Coronation.
Aquí hay algo llamado On change.
Hay varios métodos.
Tenemos un change on editing concluída Sumire on Tap.
Varias cosas que son bueno que se explican bastante solas.
El One Change recibe un método o sea una función que aquí tenemos el instruyan del valor el valor que
se está escribiendo o el valor actual de esa caja de texto.
Entonces yo lo voy a tomar y decir nombre va a ser igual al valor que estoy recibiendo como argumento.
Puedo imprimirlo en consola solo para que lo miremos.
Imprimir aquí el nombre coma.
Pero esos son los cambios.
Mostremos la consola a quien EliteBook Consol y empezamos a escribir aquí algo por ejemplo Fernando
y ahí ven que se va imprimiendo cada cosa que yo escribo.
Excelente pero yo lo quiero hacer de esa manera.
Ok antes de terminar esta clase voy a crearme otro elemento en el cual yo pueda mostrar información
y cambiarla en tiempo real para que ustedes la puedan observar y que tengamos una mejor bueno mejor
panorama de cómo manipular la data en el formulario.
Aquí abajo voy a colocar un Dividend parentesis Koma.
También voy a colocar un nuevo método llamado crear persona parentesis este método crear persona no
existe.
Lo voy a colocar aquí al final antes de que se cierre la clase y al final voy a hacer un espacio porque
tengo muchos más que crear un widget bajo el personal y arrolladas aquí no voy a hacer nada sorprendente
simplemente voy a hacer un ratón y un nuevo widget de un Liset un listado entre el punto y coma.
L'Histoire va a tener su título Takeru que va a ser el texto que estoy recibiendo el nombre texto.
Voy a poner nombre es lospuntos e primamos el guión bajo un nombre voy a grabar los cambios si yo empiezo
a escribir bueno aquí ya pueden ver qué dice Fernando pero si yo empiezo a escribir acá como por ejemplo
Alberto notan que esto no cambia hasta que yo haga un blog y el otro hilo si es que esto se vea que
vamos a ver otro hilo a esta y ahí sí cambio Alberto y porque creen que eso sucedió porque Recuerden
recuerden que cuando ustedes hacen un cambio que implica que tiene que re dibujarse este widget tenemos
que llamar el set STEC Tapp y aquí voy a borrar ese nombre y voy a mover la asignación hay algunos cambios
entonces voy a hacer un set o sea redibujar Willet por cada letra que la persona escriba.
Entonces Alberto Herrera y listo ahí sí va funcionando y lo último que me hace falta para terminar esta
clase es cambiar este cero para que me diga cuántas letras hay para esos signo de dólar entre llaves
porque tengo que poner un comando un poquito largo nombre.
Punto.
Si yo no llevara el punto Laing no haría falta estallar.
Ok.
Grabo los cambios y aquí debería decir 15 caracteres.
Si empiezo a borrar empiezo a borrar por ejemplo sólo Alberto.
Ahí tenemos los siete caracteres lo dejamos así continuamos con la siguiente clase.