Transcripciones
1. Lo que aprenderás y construirás: Oigan, todos. Soy Flutter
Sensei y en esta clase, estaremos construyendo algo simple pero poderoso juntos, una
aplicación de validación de formularios desde cero En esta clase, te
guiaré a través cada paso del proceso
desde crear el proyecto,
diseñar el layout, agregar los campos de formulario hasta finalmente
validar
la entrada de los usuarios y mostrar un hermoso mensaje de
éxito Al final de esta clase, tendrás un formulario
totalmente funcional con la validación adecuada. Algo que puedes
reutilizar fácilmente en tus futuras envolturas
Flutter, como páginas de inicio de sesión, formularios de registro
o incluso pantallas de comentarios En esta clase,
aprenderás a crear y estructurar un proyecto de
flutter desde cero, cómo trabajar con widget completo de
estado y administrar estados de formulario, cómo usar el controlador de
edición de texto para capturar la entrada del usuario, cómo escribir validadores personalizados
para campos como nombre,
correo electrónico y contraseña, y finalmente, cómo mostrar los
comentarios de los usuarios usando Es una clase corta
para principiantes. Perfecto si recién estás
comenzando con Flutter o quieres comprar
en tus fundamentos Para tu proyecto de clase, estarás recreando
esta app tú mismo Pero con tu propio giro,
intenta personalizarlo, agregar algunos perros más, cambiar la combinación de colores o
personalizar el mensaje
en el Snackbar Cuando hayas terminado,
comparte tu versión. Me encantaría ver como lo
haces tuyo. Esta clase está diseñada
para ser práctica, práctica y amigable
para principiantes. No necesitas ninguna configuración elegante, solo el código VS y Flutter
instalados y una mina curiosa Entonces, si estás listo,
abre tu editor y comencemos a construir tu primera aplicación de
validación de formularios en Flutter Entonces, ¿a qué
esperas? Empecemos.
2. Configuración del proyecto: Muy bien.
Lo primero que tenemos que hacer es crear un nuevo proyecto de
flutter Llamaremos a este
sencillo Validación de formularios. Así que abre una terminal, y naveguemos
hasta nuestro proyecto. Aquí es donde guardo
todos mis proyectos. Y aquí, vamos a escribir Flutter, crear
validación de formulario simple y golpear Enter Una vez creado el proyecto, pasemos a esa carpeta. CD, validación de forma simple. Ahora vamos a abrir un código de diez VS. Punto de código Vamos a
cerrar nuestra terminal, y vamos a maximizar esto. A continuación, vayamos
a la carpeta de labios y abramos el archivo
principal de dardos de puntos. Adelante y despeja todo. Estaremos escribiendo nuestra app
completamente desde cero. Empecemos importando la biblioteca de materiales
Flutter. Digamos Paquete de importación, Flutter material dot dart Entonces vamos a crear nuestra
función principal y llamar a la aplicación. Anular la aplicación de ejecución principal como const, y llamaremos a esto como validación de formulario
simple Y vamos a cerrar eso. Ahora, definiremos nuestro widget principal de la aplicación,
un widget sin estado denominado
como simple validación de formularios Entonces para esto, sólo
voy a copiar esto. Y aquí, podemos
decir clase y
pegarlo se extiende widget sin estado Y dentro de eso
necesitamos crear el constructor,
así es pegarlo. Y aquí podemos decir supertkey. Entonces tenemos que sobrescribir la compilación Ahora podemos
devolver material app Vamos a guardar eso. Ahora
agreguemos algunos detalles. Voy a dar el título
como simple validación de formulario. Después eliminaremos
ese banner de depuración, llamaremos a esto como falso y
estableceremos los datos del equipo. Voy a usar el diseño de
materiales. Entonces vamos a aplicar el
color de semilla que es colores dt azul. Entonces podemos definir
nuestra pantalla de inicio. Eso es home const
homepage. Vamos a guardar eso. Ahora hemos configurado nuestra aplicación base y la vinculamos a la
página de inicio que terminamos. En la siguiente lección, crearemos esa página de inicio y comenzaremos a
construir nuestro formulario.
3. Crear la página de inicio: Todo bien. Ahora, vayamos
a la carpeta lib, y aquí
crearemos una nueva carpeta. Voy a llamar a esto como páginas. Y dentro de esas páginas, crearemos un archivo llamado
home underscore page dart Entonces el camino será dentro de Lib. Tenemos paginas y paginas interiores, tenemos home underscore
page dot dart Ahora, vamos a importar la biblioteca de
materiales por aquí. Entonces diremos paquete de importación,
Flutter material dot. Ahora vamos a definir
nuestro widget de página de inicio. Dado que esta página manejará la entrada
del usuario y la interactividad, lo
haremos widget completo de
Estado Construyamos eso.
Diré clase, homepage extiende
el widget completo del estado. Y dentro de eso, puedes
crear el constructor, const, homepage, super dot key Ahora necesitamos
anular crear estado. Y el estado lleno mojado
aquí es la página principal. Deshazte de todas estas cosas. Van a crear
un estado privado, llamen a esto como
estado de página de inicio. Vamos a guardar eso. A continuación, crearemos la clase estatal
privada
para la bruja. Simplemente copie esto justo debajo de esto, podemos ver clase, homepage estado extiende estado. Entonces podemos agregar
en la página de inicio aquí. Ahora dentro de esto,
diremos, Bien, construya, y aquí nos vamos a
deshacer de estos artículos, y podemos decir retorno, andamio. Vamos a guardar eso. Perfecto. Ya tenemos lista nuestra estructura
básica, un widget de página principal con
un andamio vacío Ahora conectemos este
archivo a nuestra aplicación principal. Vamos a pasar al dardo de
punto principal y en la parte superior, vamos a importar este archivo. Paquete de importación, validación de
formulario simple. Entonces tenemos paginas, y luego
tenemos homepage dot TT. Ahora bien, en cuanto haga
esto, se puede ver el error de aquí
se va. Todo bien. Ahora todo se corrige
correctamente. Vamos a ejecutar la aplicación. Voy a estar ejecutando esto
como app para Windows, pero puedes ejecutarlo como
Android IOS o incluso web. Vamos a ejecutar la aplicación.
Y ahí vamos. La app está en blanco por ahora,
eso está totalmente bien. Vamos y arreglemos
esto correctamente. Voy a poner esto por aquí y comprimimos esto para que
parezca una aplicación móvil. Y ahora podemos ver nuestro código también. En la siguiente lección,
comenzaremos a agregar una barra de aplicaciones y comenzaremos a
construir el diseño del formulario.
4. Añadir la barra de aplicaciones, el cuerpo y el soporte de formulario: Bien, ahora comencemos a agregar la AppBar y el
cuerpo a nuestra página de inicio Dentro del andamio, eso
es dentro de la página principal. Aquí, dentro del andamio, vamos a decir aproximadamente a la par Y aquí, vamos
a añadir en el título. Y para ello,
vamos a decir const, widget de
texto, y
él llamará a esto como simple validación de formularios Y agreguemos algunos
estilos para esto. Entonces vamos a decir estilo de texto estilo. Y dentro de esto, voy
a establecer el tamaño de fuente en 16. Y luego estableceremos el peso
de la fuente al peso de
fuente W 500.
Vamos a guardar eso. Ahora, vamos a darle estilo a nuestra appa. Ya puedes ver la appa. Así que sigamos adelante
y estilízalo. Entonces aquí podemos ver el color
de fondo. Es un tema DF, esquema de color
punto punto primario. Duplicemos eso, y este va a ser el color de
primer plano, y va a ser en
primaria. Vamos a guardar eso. Puedo ver la
barra de aplicaciones para nuestra aplicación. Ahora, esto nos da
una barra de aplicaciones simple con el estilo de texto del título, y ahora mismo, está a la izquierda,
pero queremos, en realidad podemos
darle estilo al centro. Podemos hacer eso con solo
decir que el azulejo central es cierto. Si hago eso, se puede ver que el texto en realidad
viene en el centro. Ahora que tenemos la barra de aplicaciones,
pasemos al cuerpo. Justo después de la barra de aplicaciones aquí, podemos decir cuerpo,
voy a decir relleno. Digamos edge, y set, y voy a ponerle eso a 25. Al lado de eso, voy a agregar en un niño y esta
será la forma. En esa forma,
tendremos un widget de centro. Por ahora, solo agregaremos a ese niño como un
widget de texto llamado hola. Vamos a guardar eso y puedes ver ese
mensaje de hola por aquí. Esto es lo que necesitamos
personalizar ahora. Dentro del widget central,
nos desharemos de este texto y
agregaremos una columna. Ahora esta columna tendrá
una alineación de eje transversal, y voy a decir alineación de eje
transversal, estiramiento de
punto porque queremos la forma tome todo el ancho del relleno que le
hemos dado. Entonces queremos que esté
alineado en el centro. Para eso, diremos alineación del eje
principal. El centro del punto de
alineación del eje principal. Guarde eso Bien. Ahora dentro de esta columna, podemos comenzar a agregar los
hijos para la columna. Entonces podemos decir niños. Y dentro de esto por ahora, agreguemos un widget de texto
que dice hola. Vamos a guardar eso. Ahora se puede
ver que viene a la izquierda, no en el centro, sino
verticalmente, está en el centro. Entonces, ¿qué está pasando aquí? Estamos envolviendo todo
dentro del widget de relleno, agregando algo de espacio
alrededor del formulario. Se puede ver el espacio por aquí. Después hemos agregado
el widget de formulario. Entonces luego ayúdanos a
manejar la validación. Dentro de esa forma,
hemos centrado todo con una columna y hemos establecido su alineación para que los
widgets se extiendan perfectamente por
la pantalla para
un diseño de formulario limpio. este momento solo está mostrando
un simple texto helloworld, y eso es ahora
solo un En la siguiente lección,
reemplazaremos eso con tres campos de texto y un botón de envío y luego comenzaremos a trabajar en la lógica de
validación.
5. Creación de los campos del formulario de texto: Todo bien. Vamos a limpiar un poco
las cosas. Adelante y quita
ese texto Wen. Entonces, sigamos adelante
y eliminemos esto. Y dentro de la columna, agreguemos nuestros campos de formulario. Vamos a agregar tres
campos agrícolas, uno para nombre completo, uno para correo electrónico y
otro para contraseña, seguido de un botón de registro. Entonces sigamos adelante y agréguelos. Lo primero, lo que vamos a
hacer es decir campo de texto. Y esto en realidad va
a ser TextFormField. Y dentro de eso,
diremos decoración. Decir decoración de entrada. Y dentro de esa
entrada decoración, voy a decir frontera, y el borde va
a ser borde de contorno. Y justo al lado de eso, vamos a necesitar una etiqueta. Entonces diremos texto de etiqueta, y llamaremos a
este texto de etiqueta como completo. Y vamos a guardar eso. Ahora, en cuanto
guardes, podrás ver que tenemos un
campo de texto con nombre completo. Si hago clic aquí, se puede ver el nombre sube
bastante impresionante, derecho. Ahora, agreguemos un poco de
espaciado por debajo de eso. Entonces justo después del campo de texto, voy a decir caja de tamaño. Voy a establecer
la altura a 16. Eso lo guardaré. Y
ahora solo puedes copiar todo esto y
luego pegarlo aquí. Bien, entonces tenemos dos nombres completos. Entonces vamos a cambiar esto
a ID de correo electrónico. Vamos a guardar eso. Puedes ver que tenemos
nombre completo e ID de correo electrónico. Y vamos a tapizar esta caja de tamaño, pegarla, y necesitamos
otro campo ahora. Ese es el campo de contraseña. Entonces aquí, voy a decir contraseña. Vamos a guardar eso y ahora
vamos a agregar de nuevo las piezas
dimensionadas. Y ahora lo que necesitamos
es un botón de enviar. Para eso, agregaremos
el botón elevado. Ahora, todavía no tenemos una
función para esto, así que voy a eliminar eso, y aquí agregaremos
una función en blanco. Y el niño
va a ser un texto, así que voy a decir const, un texto con chat que dice, regístrate gratis Vamos a guardar eso. Ahora
puedes ver aquí, también
tenemos el botón de registro. Perfecto. los campos básicos y
un botón en su lugar. Pero hagamos que esta forma
se vea un poco más pulida. Sería bueno que cada
campo tuviera un icono dentro de él. Agreguemos ese icono
a cada campo. Ahora para hacer eso,
pasemos
al primer campo de formulario
que es un nombre completo. Y aquí, justo después
del texto de la etiqueta, solo tienes que escribir el icono
y verás
que tenemos diferentes tipos
de opciones disponibles. El que queremos es prefijo. Si vas al ícono de Sufex, obtendrás el ícono por aquí Entonces queremos el icono
al principio. Ese es el icono del prefijo. Vamos al icono de prefijo. Y aquí,
vamos a decir icono, íconos esa persona.
Vamos a guardar eso. Ahora puedes ver el icono
de usuario por aquí. Bien, entonces el icono parece
más grande para que podamos hacerlo más pequeño.
Vamos a decir tamaño. Voy a establecer el tamaño en 16. Sí, creo que ahora
se ve mucho mejor. Hagamos lo mismo con
los otros campos también. Simplemente pegarlo por aquí, y
esto va a ser correo electrónico. Y para contraseña,
vamos a pegarla aquí. Voy a llamar a esto como registro. Vamos a guardar eso y tenemos el icono de registro
para la contraseña. Bonito. Ahora tenemos
iconos para cada campo, haciendo que el formulario se vea más limpio
y más fácil de usar. Pero todavía hay un problema. Si escribe el nombre, funciona, correo electrónico, funciona. Pero la contraseña muestra
la contraseña en abierto. Queremos que el
texto de la contraseña esté oculto, como un campo de contraseña normal. Para arreglarlo, solo necesitamos
habilitar una cosa, y eso se llama texto oscuro Sigamos adelante y actualicemos eso. Entonces aquí, en el
campo de contraseña, justo después de esto, podemos decir, O Bs, y se puede ver que aparece el
texto oscuro. Es un Bollan Entonces voy a decir
eso también, cierto. Entonces en cuanto guarde
esto, se puede ver la contraseña ya está
oculta, y eso es todo. Ahora el texto de la contraseña
se ocultará automáticamente. En la siguiente lección,
aprenderemos a capturar datos de estos campos y
validarlos adecuadamente.
6. Agregar la validación de formas: Bien, es hora de las cosas
reales, validación de formularios. Ahora para que esto
funcione, necesitaremos una clave principal que contenga
todos los datos del formulario. Para eso, vamos a
desplazarnos hasta donde puedas encontrar el estado natal.
Entonces ese es el indicado. Después de esto, lo que vamos a hacer es crear una variable aquí y llamaremos a esta
variable form data. Esto va a
tener la clave global. Y la clave global
que va a
tener es el estado de la forma. Todo bien. Vamos a cerrar eso. Entonces aquí creamos una variable privada llamada datos de formulario de
subrayado, y estamos almacenando el
estado del formulario dentro de una clave global Esto nos permitirá acceder y validar el formulario
completo posteriormente. Ahora, necesitamos conectar esta
clave a nuestro widget de formulario. Ahora bien, si te
desplazas hacia abajo, puedes ver que este es nuestro
formulario, y dentro de eso, simplemente
podemos decir clave y luego agregar los datos del formulario
aquí y guardemos eso. Perfecto. Ahora
volvamos a la cima otra vez. Aquí. Ahora aquí, necesitamos crear algunas variables para almacenar
nuestros valores de campo de formulario. Agreguemos tres
controladores de edición de texto, uno para cada uno. Entonces vas a decir controlador final de edición de
texto, y
lo llamaremos como nombre completo. Va a almacenar el controlador de edición de
texto. Vamos a crear
otro y para eso, sólo
vamos a
duplicar esto tres veces. Esto va a ser ID de correo electrónico, y esta va
a ser contraseña. Vamos a guardar eso. Ahora conectemos
estos controladores a sus respectivos campos de texto. Si te desplazas hacia abajo, tenemos el primero,
ese es el nombre completo. Aquí, todo lo que tenemos
que hacer es decir controlador, entonces tenemos lleno. Ahora vamos a desplazarnos hacia abajo. Tenemos correo electrónico, así que
diremos controlador. Conectemos eso al correo electrónico. Y por último,
tenemos la contraseña. Entonces aquí, diremos controlador. Contraseña y guárdala. Bonito. Tenemos nuestros
controladores en su lugar. Ahora necesitamos validar
cada campo uno por uno. Empecemos con el nombre completo. Desplázate hacia arriba, y puedes ver que
este es el nombre completo, todo
esto aquí. Ahora bien, para esto,
en realidad es bastante simple. Solo necesitamos agregar
una función validador para verificar si está vacía.
Sigamos adelante y hagamos eso. Para esto, justo después de
esta decoración aquí, vamos a decir validador y necesitamos verificar
el valor aquí Entonces dentro de esto,
vas a decir si y entonces aquí podemos decir
si el valor está en blanco, o el valor es nulo. ¿Qué tenemos que hacer?
Tenemos que devolver un mensaje. El mensaje va a ser nombre
completo, no puede estar vacío. Bien. Y si no, sólo
vamos a devolver nulo. Vamos a guardar eso. Ahora hagamos el campo de correo electrónico. Copiemos todo esto. Desplázate hacia abajo, y aquí lo
vamos a pegar en el campo de correo electrónico. Ahora para el correo electrónico, necesitamos
algunos detalles adicionales. Entonces esto va a ser lo mismo, pero vamos a nombrar esto
ya que el correo electrónico no puede estar vacío, pero también tenemos que
buscarlo en la señal. Entonces diremos otra cosa
si y aquí vamos a decir valor punto
contiene un signo add. Quiero comprobar si
no está ahí. Entonces solo necesitamos agregar un signo de
exclamación aquí, eso va a
volverse negativo Si no está ahí, vamos a
dar un mensaje diferente. Entonces dirá retorno, y luego aquí podemos decir ID de correo electrónico
no válido,
y vamos a guardar eso. Y finalmente, validemos el campo de contraseña. Desplácese hacia abajo. Y después del oscuro texto aquí, que va a pegar Y aquí podemos decir que
la contraseña no puede estar vacía, y aquí vamos a agregar
algunos detalles adicionales. Es decir que la contraseña debe tener
más de seis caracteres. Entonces aquí, vamos a decir más
si y aquí podemos decir valor longitud de punto debe
ser mayor a seis. Y para ello, podemos devolver un mensaje diferente.
Podemos llamar a esto tiene. La contraseña debe tener al menos seis caracteres. Y
vamos a guardar eso. Perfecto. Ahora todos los campos tienen una
lógica de validación adecuada agregada a ellos. En la siguiente lección, nos
centraremos en el botón enviar, donde activaremos
esta validación y mostraremos los resultados
en la pantalla.
7. Presentación del formulario y mensaje del snackbar: Todo bien. Ahora que hemos agregado validaciones
para todos los campos, vamos a crear una función
que realmente verifique el formulario y muestre un mensaje
cuando todo se vea bien Llamamos a esta función
validar forma. Entonces, para agregar esa función, vamos a desplazarnos hasta arriba
y por debajo de nuestras variables, voy a crear un vacío y una función privada aquí y llamaremos a esto
como forma de validar. Y dentro de eso,
vamos a comprobar si los datos del formulario que tenemos, que está en el
estado actual tiene validación. Y aquí necesitamos agregar
una marca exlatoria diciéndole al dardo que todo dentro de
esa forma sí tiene datos Entonces después de esto, lo que
tendremos que hacer es
que tendremos que mandar un mensaje para nuestro andamio Entonces para eso vamos a decir
andamio mensajero,
el, y aquí tenemos que
mostrar un Snackbar Entonces aquí podemos decir Snackbar, y aquí es donde va el contenido
del Snackbar Entonces aquí, va
a ser un campo de texto, y podemos mostrar los datos. Por ejemplo, formulario
enviado éxito completamente. Guarde eso. Y para cerrar esto. Voy a salvar Genial.
¿Qué está pasando aquí? Aquí estamos usando la clave de datos del formulario de subrayado para verificar si nuestro formulario es válido Si toda la validación pasa, mostramos un Snackbar en la
parte inferior con un mensaje de éxito Ahora conectemos esta
función a nuestro botón de enviar. Me desplazo todo el camino hacia abajo donde tenemos el botón
elevado. Eso está por aquí, y verá que
tenemos esta función de tablón Lo que vamos a hacer es aquí, vamos a simplemente agregar esa
función llamada validar formulario. Y vamos a guardar eso.
Perfecto. Ahora, vamos a ejecutar la aplicación y girarla. Así que sólo voy
a refrescar nuestra app. Ahora vamos a escribir el
nombre, correo electrónico y contraseña. Pero antes de eso,
dejemos todo en blanco. Simplemente hagamos clic en
el letrero de forma gratuita. Bien, entonces tenemos todos los mensajes de
error que
queremos ver. Entonces ahora agreguemos en los detalles. Voy a llamar a
esto como John Doe. Vamos a presionar el botón Enviar. Puedo ver que se pasa la
validación. Necesitamos agregar un ID de correo electrónico. Entonces diremos john doe.com. Y si presiono enviar, dice que es un correo no válido. Entonces aquí, lo que
haremos es decir en fluttersens.com. Vamos a golpear en enviar.
Se puede ver que funciona, pero ahora la contraseña
no puede estar vacía. Entonces ahora si agrego uno, dos, tres y presiono
el botón Enviar, dice, contraseña debe tener al menos
seis caracteres de largo. Entonces ahora podemos decir cuatro, cinco, seis, es decir seis caracteres.
Vamos a sumar en siete. Ahora bien, si no envío botón, se
puede ver un Snackbar en la parte inferior, formulario
enviado Bastante increíble,
¿verdad? Acabamos de construir un sistema de
validación de formularios completamente funcional en Flutter, limpio, simple y efectivo
8. Resumen y proyecto de clase: Muy bien, recapitulemos rápidamente
lo que hemos construido hasta ahora. Creamos un nuevo
proyecto de Flutter desde cero, configuramos un
widget completo de estado para nuestra página de inicio, construimos un diseño de formulario limpio con tres
campos de entrada diferentes y botón de envío, agregamos controladores para
capturar datos de usuario, escribimos lógica de validación para cada nombre de campo,
correo electrónico y contraseña Y por último, se agregó una función de
envío que valida el formulario y muestra un mensaje de éxito
en el Snackbar Eso es mucho proceso sólido. Ahora tienes una
forma de aleteo de trabajo con validación completa. Ahora es tu turno de construir
sobre lo que has aprendido. Tu proyecto es bastante sencillo. Crea tu propia
versión de esta app, pero personalízala un poco. Aquí tienes algunas
ideas que puedes probar. Agrega un campo más como un número de
teléfono o un nombre de usuario. Intente cambiar el
tema de color de su aplicación, o tal vez use un mensaje diferente de
Snackbar con un icono o
un botón de acción Una vez que hayas hecho
eso, ejecuta la aplicación y comparte una
captura de pantalla rápida de tu versión. Esto te ayudará no sólo reforzar lo que has aprendido, sino que también le dará un toque personal a tu
app. Gran trabajo hoy, verdaderamente. No solo codificaste, entendiste cómo funciona la
validación de formularios en Flutter Te veo en la siguiente
clase donde tomaremos esta base y la haremos
aún más interactiva. Hasta entonces, sigue codificando, sigue practicando y
construye algo increíble.
Flutter Sensei, Teaching Flutter from Scratch
