Transcrições
1. O que você vai aprender e construir: Oi, todo mundo. Sou Flutter
Sensei e, nesta aula, construiremos juntos algo simples, mas poderoso, um
aplicativo de validação de formulários Nesta aula, vou
guiá-lo cada etapa do processo,
desde a criação do projeto,
design do layout, adição dos campos
do formulário até finalmente validar a entrada dos usuários e mostrar uma bela mensagem de
sucesso Ao final desta aula, você terá um formulário
totalmente funcional com a validação adequada. Algo que você pode
reutilizar facilmente em seus futuros pacotes do
Flutter,
como páginas de login, formulários de inscrição
ou até telas Nesta aula, você
aprenderá como
criar e estruturar um projeto
flutter do zero, como trabalhar com widget de
estado completo e gerenciar estados de formulários, como usar o controlador de
edição de texto
para capturar a entrada do usuário, como escrever validadores personalizados
para campos como nome,
e-mail e senha e, finalmente,
como e-mail e senha e, finalmente, mostrar feedback do usuário usando o Snackbar É uma aula curta
para iniciantes. Perfeito se você está apenas
começando a usar Flutter ou quer comprar seus
fundamentos Para seu projeto de classe, você mesmo recriará
esse aplicativo Mas com seu próprio toque,
tente personalizá-lo,
adicionar mais alguns perros, adicionar mais alguns perros, alterar o esquema de cores ou
personalizar a mensagem
no Snackbar Quando terminar,
compartilhe sua versão. Eu adoraria ver como
você o torna seu. Esta aula foi projetada
para ser prática, prática e amigável para
iniciantes Você não precisa de nenhuma configuração sofisticada, apenas o código VS e o Flutter
instalados e uma Então, se você estiver pronto,
abra seu editor e vamos começar a criar seu primeiro aplicativo de
validação de formulários no Flutter Então, o que você está
esperando? Vamos começar.
2. Configurando o projeto: Tudo bem. A primeira
coisa que precisamos fazer é criar um novo projeto de
vibração. Chamaremos isso de
simples validação de formulário. Então, abra um terminal e vamos navegar
até nosso projeto. É aqui que guardo
todos os meus projetos. E aqui, vamos digitar Flutter, criar uma
validação de formulário simples e pressionar Enter Depois que o projeto for criado, vamos para essa pasta. CD, validação de formulário simples. Agora vamos abrir um código VS de dez. Code dot Vamos
fechar nosso terminal e maximizar isso. Em seguida, vamos
até a pasta lip e vamos abrir o arquivo
principal de dardos de pontos Vá em frente e limpe tudo. Vamos escrever nosso aplicativo
completamente do zero. Vamos começar importando a biblioteca de materiais do
Flutter. Digamos que pacote de importação, material
Flutter, ponto Então, vamos criar nossa
função principal e chamar o aplicativo. Anule o aplicativo de execução principal como const, e chamaremos isso de
simples validação de formulário E vamos fechar isso. Agora, definiremos nosso widget principal do aplicativo,
um widget sem estado chamado
de validação de formulário simples Então, para isso,
vou apenas copiar isso. E aqui, podemos
dizer classe e
colá-la estende o widget stateless E dentro disso,
precisamos criar o construtor,
então ele deve colá-lo E aqui podemos dizer supertkey. Em seguida, precisamos sobrescrever a compilação. Agora podemos
devolver o aplicativo de material Vamos guardar isso. Agora vamos
adicionar alguns detalhes. Vou dar o título
como uma simples validação do formulário. Em seguida, removeremos
esse banner de depuração, chamaremos isso de falso e
definiremos os dados da equipe Vou usar o design de
materiais. Em seguida, vamos aplicar a
cor da semente que é color dt blue. Então, podemos definir
nossa tela inicial. Essa é a página inicial do home const
. Vamos guardar isso. Agora configuramos nosso aplicativo básico e o vinculamos à
página inicial que encerramos Na próxima lição, criaremos essa página inicial e começaremos a
criar nosso formulário
3. Como criar a página inicial a página inicial: Tudo bem Agora, vamos até
a pasta lib, e aqui vamos
criar uma nova pasta Vou chamar isso de páginas. E dentro dessas páginas, criaremos um arquivo chamado
home underscore page dart Portanto, o caminho estará dentro da Lib. Temos páginas e páginas internas, temos o dardo de pontos da
página inicial com sublinhado Agora, vamos importar a biblioteca de
materiais aqui. Então, vamos dizer pacote de importação, ponto de material
Flutter. Agora vamos definir
nosso widget de página inicial. Como essa página lidará com a entrada e a interatividade
do usuário, nós a tornaremos um widget completo de
estado Vamos construir isso.
Eu vou dizer que a classe, página inicial estende o widget completo
do estado E dentro disso, você pode
criar o construtor,
const, página inicial, super Agora, precisamos
substituir o estado de criação. E o estado todo molhado
aqui está a página inicial. Livre-se de todas essas coisas. Eles vão criar
um estado privado, chamado isso de
estado da página inicial. Vamos guardar isso. Em seguida, criaremos a classe estadual
privada
para a bruxa. Basta copiar isso logo abaixo, podemos ver a classe, estado da
página inicial estende o estado Em seguida, podemos adicionar
a página inicial aqui. Agora, dentro disso,
diremos: Tudo bem, construa, e vamos nos
livrar desses itens aqui, e podemos dizer devolva, andaime. Vamos guardar isso. Perfeito. Agora temos nossa estrutura
básica pronta, um widget de página inicial com
um andaime vazio Agora vamos conectar esse
arquivo ao nosso aplicativo principal. Vamos até o
ponto principal do dardo e, na parte superior, vamos importar esse arquivo Pacote de importação, validação
de formulário simples. Então temos páginas e, em seguida,
temos a página inicial dot TT. Agora, assim que eu fizer
isso, você pode ver que o erro daqui
desaparece. Tudo bem Agora tudo está corrigido
corretamente. Vamos executar o aplicativo. Vou executá-lo
como um aplicativo do Windows, mas você pode executá-lo como um
Android, IOS ou até mesmo na web. Vamos executar o aplicativo.
E lá vamos nós. O aplicativo está em branco por enquanto,
tudo bem. Vamos organizar
isso adequadamente. Vou colocar isso aqui e vamos compactar isso para
parecer um aplicativo móvel E agora também podemos ver nosso código. Na próxima lição,
começaremos a adicionar uma barra de aplicativos e começaremos a
criar o layout do formulário.
4. Adicionando a AppBar, o corpo e o suporte do formulário: Ok, agora vamos começar a adicionar o AppBar e o
corpo à nossa página inicial Dentro do andaime, ou
seja, dentro da página inicial. Aqui, dentro do andaime, vamos dizer aproximadamente um par. E aqui, vamos
adicionar o título. E para isso,
vamos dizer const, widget de
texto, e
ele chamará isso de formulário simples E vamos adicionar alguns
estilos para isso. Então, vamos dizer estilo estilo de texto. E dentro disso, vou
definir o tamanho da fonte para 16. Em seguida, definiremos
a espessura da fonte para a
espessura da fonte W 500.
Vamos guardar isso. Agora, vamos estilizar nosso aplicativo. Você pode ver o aplicativo agora. Então, vamos seguir em frente
e estilizar isso. Então, aqui podemos ver a cor
de fundo. É um tema DF, esquema de cores de
pontos, ponto primário Vamos duplicar isso, e
essa será a cor do
primeiro plano e estará no primário.
Vamos guardar isso. Eu posso ver a
barra de aplicativos do nosso aplicativo. Agora, isso nos dá
uma barra de aplicativos simples com o estilo de texto do título
e, no momento, está à esquerda, mas queremos que possamos realmente
estilizá-la no centro. Podemos fazer isso apenas
dizendo que o bloco central é verdadeiro. Se eu fizer isso, você verá que o texto realmente
vem no centro. Agora que temos a barra de aplicativos,
vamos passar para o corpo. Logo após a barra de aplicativos aqui, podemos dizer corpo,
vou dizer preenchimento Digamos borda e set, e eu vou definir isso para 25. Além disso, vou adicionar uma criança e esse
será o formulário. Nesse formulário,
teremos um widget central. Por enquanto, vamos apenas adicionar essa criança como um
widget de texto chamado hello Vamos salvar isso e você pode ver a
mensagem de olá aqui. Isso é o que
precisamos personalizar agora. Dentro do widget central,
eliminaremos esse texto e
adicionaremos uma coluna Agora, essa coluna terá
um alinhamento de eixo cruzado, e eu vou dizer alinhamento de eixo
cruzado, alongamento de
pontos porque queremos a forma ocupe toda a largura do preenchimento que
fornecemos Então, queremos que ele seja
alinhado no centro. Para isso, diremos alinhamento do eixo
principal. O centro do ponto de
alinhamento do eixo principal. Guarde isso, ok. Agora, dentro dessa coluna, podemos começar a adicionar os
filhos para a coluna. Então, podemos dizer crianças. E dentro disso, por enquanto, vamos adicionar um widget de texto
que diz olá Vamos guardar isso. Agora você pode
ver que está vindo para a esquerda, não no centro, mas
verticalmente, está no centro Então, o que está acontecendo aqui? Estamos agrupando tudo
dentro do widget de preenchimento, adicionando algum espaço
ao redor Você pode ver o espaço aqui. Em seguida, adicionamos
o widget do formulário. Então, mais tarde, ajude-nos a
lidar com a validação. Dentro desse formulário,
centralizamos tudo com uma coluna e definimos seu alinhamento para que os
widgets se estendam perfeitamente
pela tela para
um layout de formulário limpo No momento, está apenas mostrando
um texto simples de helloworld, e agora é
apenas um Na próxima lição,
substituiremos isso por
três campos de texto e um botão de envio e
começaremos a trabalhar na lógica de
validação.
5. Criando os campos de formulário de texto: Tudo bem. Vamos limpar um pouco
as coisas. Vá em frente e remova
esse texto, Wen. Então, vamos continuar
e remover isso. E dentro da coluna, vamos adicionar nossos campos de formulário. Vamos adicionar três
campos agrícolas, um para nome completo, um para e-mail e
outro para senha, seguido por um botão de inscrição. Então, vamos adicioná-los. A primeira coisa, o que
faremos é dizer campo de texto. E isso na verdade será
TextFormField. E dentro disso,
diremos decoração. Diga decoração de entrada. E dentro dessa decoração de
entrada, vou dizer borda, e a borda será borda
de contorno E além disso, precisaremos de um rótulo. Então, diremos texto do rótulo e chamaremos
esse texto do rótulo de texto completo. E vamos salvar isso. Agora, assim que
você salva, você pode ver que temos um
campo de texto com um nome completo. Se eu clicar aqui, você pode ver o nome sobe
muito bem, certo. Agora, vamos adicionar um pouco de
espaçamento abaixo disso. Então, logo após o campo de texto, vou dizer caixa de tamanho. Vou definir
a altura para 16. Vou guardar isso. E
agora você pode simplesmente copiar tudo
isso e colar aqui. Ok, então temos dois nomes completos. Então, vamos mudar isso para ID de e-mail. Vamos guardar isso. Você pode ver que temos
nome completo e ID de e-mail. E vamos tapar essa caixa de tamanho, colá-la, e precisamos de
outro campo agora. Esse é o campo de senha. Então, aqui, vou dizer senha. Vamos salvar isso e agora
vamos adicionar as peças
dimensionadas novamente. E agora o que precisamos
é de um botão de envio. Para isso, adicionaremos
o botão elevado. Agora, ainda não temos uma
função para isso, então vou removê-la e aqui vamos adicionar
uma função em branco. E a criança
vai ser uma mensagem de texto, então eu vou dizer const, uma mensagem de texto com chat que diz: inscreva-se gratuitamente Vamos guardar isso. Agora
você pode ver aqui, também
temos o botão de inscrição. Perfeito. os campos básicos e
um botão no lugar. Mas vamos fazer com que esse formulário
pareça um pouco mais polido. Seria bom se cada
campo tivesse um ícone dentro dele. Vamos adicionar esse ícone
a cada campo. Agora, para fazer isso,
vamos para
o primeiro campo do formulário
que é um nome completo. E aqui, logo após
o texto da etiqueta, basta digitar o ícone
e você verá
que temos diferentes tipos
de opções disponíveis. O que queremos é o prefixo. Se você acessar o ícone Sufex, você verá o ícone aqui Então, queremos o ícone
no começo. Esse é o ícone do prefixo. Vamos ao ícone do prefixo. E aqui,
vamos dizer ícone, ícones dessa pessoa.
Vamos guardar isso. Agora você pode ver o ícone
do usuário aqui. Ok, então o ícone
meio que parece maior para que possamos diminuí-lo.
Vamos dizer tamanho. Vou definir o tamanho para 16. Sim, acho que
parece muito melhor agora. Vamos fazer a mesma coisa com
os outros campos também. Basta colar aqui, e
isso vai ser um e-mail. E para senha,
vamos colá-la aqui. Vou chamar isso de registro. Vamos salvar isso e temos o ícone
de registro da senha. Bom. Agora temos
ícones para cada campo, fazendo com que o formulário pareça mais limpo
e fácil de usar. Mas ainda há um problema. Se você digitar o nome, funciona, e-mail, funciona. Mas a senha mostra
a senha aberta. Queremos que o
texto da senha fique oculto, como um campo de senha normal. Para corrigir isso, só precisamos
habilitar uma coisa, chamada texto obscuro Vamos continuar e atualizar isso. Então, aqui, no
campo da senha, logo depois disso, podemos dizer, O Bs, e você pode ver o
texto obscuro aparecer. É um Bollan Então, eu vou dizer
isso também, é verdade. Então, assim que eu salvo
isso, você pode ver que
a senha agora está
oculta e pronto. Agora, o texto da senha
será ocultado automaticamente. Na próxima lição,
aprenderemos como capturar dados desses campos e
validá-los adequadamente.
6. Adicionando validação de formulário: Tudo bem, é hora da coisa
real, validação do formulário. Agora, para que isso
funcione, precisaremos uma chave principal que contenha
todos os dados do formulário. Para isso, vamos rolar
até onde você pode encontrar o estado de origem.
Então esse é o único. Depois disso, o que vamos
fazer é criar uma variável aqui e chamá-la de dados de forma
variável. Isso vai ser a
chave global. E a chave global
que ele
manterá é o estado do formulário. Tudo bem. Vamos fechar isso. Então, aqui criamos uma variável privada chamada dados do formulário de
sublinhado e estamos armazenando o
estado do formulário dentro de uma chave global Isso nos permitirá acessar e validar
todo o formulário posteriormente Agora, precisamos conectar essa
chave ao nosso widget de formulário. Agora, se você rolar para baixo, verá que este é o nosso
formulário e, dentro dele, podemos simplesmente dizer chave e adicionar os dados do formulário
aqui e salvá-los. Perfeito. Agora vamos
voltar ao topo novamente. Aqui. Agora, aqui, precisamos criar algumas variáveis para armazenar
nossos valores de campo do formulário. Vamos adicionar três
controladores de edição de texto, um para cada. Então você vai dizer controlador de edição de
texto final, e vamos
chamá-lo de nome completo. Ele armazenará o controlador de edição de
texto. Vamos criar
outro e, para isso, vamos
duplicá-lo três vezes Isso será ID de e-mail e essa será
senha. Vamos guardar isso. Agora vamos conectar
esses controladores aos seus respectivos campos de texto Se você rolar para baixo, temos o primeiro,
que é o nome completo. Aqui, tudo o que precisamos
fazer é dizer controlador, então temos cheio. Agora vamos rolar para baixo. Temos e-mail, então
vamos dizer controlador. Vamos conectar isso ao e-mail. E, finalmente,
temos a senha. Então, aqui, vamos dizer controlador. Senha e salve isso. Bom. Temos nossos
controladores instalados Agora precisamos validar
cada campo um por um. Vamos começar com o nome completo. Role para cima e você pode ver que
esse é o nome completo, tudo
isso aqui. Agora, para isso, é
realmente muito simples. Só precisamos adicionar
uma função validadora para verificar se ela está vazia.
Vamos fazer isso. Para isso, logo após
essa decoração aqui, vamos dizer validador e precisamos verificar
o valor aqui Então, dentro disso, você
vai dizer se e aqui podemos dizer
se o valor está em branco ou se o valor é nulo O que precisamos fazer?
Precisamos retornar uma mensagem. A mensagem será o nome
completo, não pode estar vazia. OK. Caso contrário,
retornaremos null Vamos guardar isso. Agora vamos fazer o campo de e-mail. Vamos copiar tudo isso. Role para baixo e aqui vamos
colá-lo no campo de e-mail. Agora, para e-mail, precisamos de
alguns detalhes adicionais. Então, isso vai ser o mesmo, mas vamos nomear isso
porque o e-mail não pode estar vazio, mas também precisamos
procurá-lo no sinal. Então, diremos outra coisa
se e aqui
diremos que o ponto de valor
contém um sinal de adição. Quero verificar se
não está lá. Então, precisamos apenas adicionar um ponto de
exclamação aqui, que vai
virar negativo Se não estiver lá,
daremos uma mensagem diferente. Então, ele dirá return, e aqui podemos dizer ID de e-mail
inválido,
e vamos salvá-lo E, finalmente, vamos validar o campo de senha. Role para baixo. E depois do texto obscuro aqui, que vai colar E aqui podemos dizer que a
senha não pode estar vazia, e aqui vamos adicionar
alguns detalhes adicionais. Ou seja, a senha deve ter
mais de seis caracteres. Então, aqui, vamos dizer outra coisa
se e aqui podemos dizer que o valor do comprimento do ponto deve
ser maior que seis. E para isso, podemos retornar uma mensagem diferente.
Podemos chamar isso de tem. A senha deve ter pelo menos seis caracteres. E
vamos salvar isso. Perfeito. Agora, todos os campos têm a
lógica de validação adequada adicionada a eles. Na próxima lição,
focaremos no botão de envio, onde acionaremos
essa validação e mostraremos os resultados
na tela.
7. Formulário de envio e mensagem do Snackbar: Tudo bem. Agora que adicionamos validações
para todos os campos, vamos criar uma função
que realmente verifique o formulário e mostre uma mensagem
quando tudo estiver correto Chamamos essa função de formulário de
validação. Então, para adicionar essa função, vamos rolar até o topo
e abaixo de nossas variáveis, vou criar uma função vazia e uma função privada aqui e vamos chamar isso
de formulário de validação E dentro disso,
vamos verificar
se os dados do formulário que temos, que estão no
estado atual, têm validação. E aqui precisamos adicionar
uma marca exlatória dizendo ao dardo que tudo dentro
desse formulário tem Então, depois disso, o que teremos que fazer é enviar uma mensagem para nosso andaime Então, para isso, diremos
scaffold messenger,
o, e aqui precisamos mostrar um
Snackbar Então, aqui podemos dizer Snackbar, e é aqui que vai o conteúdo
do Snackbar Então, aqui, será um campo de texto e podemos mostrar os dados. Por exemplo, formulário
enviado com sucesso total. Guarde isso. E para fechar isso. Eu vou salvar Great.
O que está acontecendo aqui? Aqui, estamos usando a chave de dados do formulário de sublinhado para verificar se nosso formulário é válido Se toda a validação for aprovada, mostraremos uma Snackbar na
parte inferior com uma mensagem de sucesso Agora vamos conectar essa
função ao nosso botão de envio. Eu desço até onde temos o botão
elevado. Isso está aqui, e você vê que
temos essa função de prancha O que vamos fazer aqui é adicionar esse formulário de validação de chamada de
função E vamos salvar isso.
Perfeito. Agora, vamos executar o aplicativo e alterá-lo. Então, vou apenas
atualizar nosso aplicativo. Agora vamos digitar o
nome, e-mail e senha. Mas antes disso, vamos
deixar tudo em branco. Vamos clicar
na placa gratuitamente. Ok, então recebemos todas as mensagens de
erro que
queremos ver. Então, agora vamos adicionar os detalhes. Vou chamar
isso de John Doe. Vamos clicar no botão Enviar. Eu posso ver que a
validação foi aprovada. Precisamos adicionar um ID de e-mail. Então, vamos dizer john doe.com. E se eu clicar em enviar, diz que
é um e-mail inválido Então, aqui, o que
faremos é dizer em fluttersens.com. Vamos clicar em enviar.
Você pode ver que funciona, mas agora a senha
não pode estar vazia. Então, agora, se eu adicionar um, dois, três e clicar
no botão Enviar, ele diz que senha deve ter pelo menos
seis caracteres. Então, agora podemos dizer quatro, cinco, seis, ou seja, seis caracteres.
Vamos adicionar sete. Agora, se eu não enviar o botão, você pode ver uma Snackbar
na parte inferior, formulário
enviado Muito incrível,
certo? Acabamos de criar um sistema de
validação de formulários totalmente funcional no Flutter, limpo, simples e eficaz
8. Recapitulação e projeto do curso: Tudo bem, vamos recapitular rapidamente
o que construímos até agora. Criamos um novo
projeto Flutter do zero, configuramos um
widget de estado completo para nossa página inicial, criamos um layout de formulário limpo com três
campos de entrada e botão de envio diferentes,
adicionamos controladores para
capturar dados do usuário, escrevemos uma lógica de validação para
cada nome de campo, escrevemos uma lógica de validação para cada nome de campo E, finalmente, adicionou uma função de
envio que valida o formulário e mostra uma mensagem de sucesso
no Snackbar Esse é um processo muito sólido. Agora você tem um
formulário de vibração funcional com validação completa. Agora é sua vez de desenvolver
o que você aprendeu. Seu projeto é bem simples. Crie sua própria
versão deste aplicativo, mas personalize-a um pouco. Aqui estão algumas
ideias que você pode experimentar. Adicione mais um campo, como número
de telefone ou nome de usuário. Tente mudar o
tema de cores do seu aplicativo ou talvez use uma mensagem diferente do
Snackbar com um ícone ou
um botão de ação Depois de fazer
isso, execute o aplicativo e compartilhe uma
captura de tela rápida da sua versão Isso ajudará você não apenas reforçar o que você aprendeu, mas também a dar um toque pessoal ao seu
aplicativo Ótimo trabalho hoje, de verdade. Você não apenas codificou, você entendeu como a
validação de formulários funciona no Flutter Nos vemos na próxima
aula, onde usaremos essa base e a
tornaremos ainda mais interativa. Até lá, continue programando, continue praticando e
construa algo incrível
Flutter Sensei, Teaching Flutter from Scratch
