Primeiras aulas do curso Flutter: crie e valide formulários para aumentar conversões

Flutter: crie e valide formulários para aumentar conversões

Criando um formulário - Apresentação

Olá! seja muito bem-vindo ou muito bem-vinda a mais um curso de Flutter aqui da plataforma Alura. Sou o instrutor Leo Marinho, e esse curso vai te ensinar como criar formulários com Flutter do zero.

Então nós vamos criar desde uma tela básica de login e autenticação, até uma tela de registro de cliente no Bytebank. Vamos simular todo o cadastro de um cliente bancário.

Isso não é trivial, envolve bastante coisa, tem que criar vários campos e vários tipos de dados diferentes como CPF e nome, vamos trabalhar com texto, número, com dados mistos alfanuméricos e vamos entender como organizar esses dados da maneira que garanta que os usuários preencham.

E com isso nós vamos trabalhar com Stepper e várias artimanhas que o Flutter traz, para fazermos um formulário simples de preencher que traga o maior número de sucesso com os clientes.

Que os clientes não desistam de preencher, às vezes quando o formulário é grande, dá muito trabalho preencher, e a ideia é aprender como lidar com isso. O pré-requisito do curso é ter feito o curso de "Fundamentos de Flutter", que é o primeiro curso da playlist que tem de Flutter.

Mas vamos partir de um projeto que começou no curso de "Gerenciamento de Estado com Provider", então é muito importante que você tenha algum conhecimento de Provider, não é obrigatório, mas seria muito legal que você já tem uma familiaridade com gerenciamento de estados.

No final desse curso, você vai conseguir fazer desde formulários básicos até formulários avançados que tiram foto de RG, por exemplo, que testam biometria e liberam biometria, validam dados com o formulário, então conseguimos fazer toda a parte validação de dados.

Formatação de campo, máscara, vai ser super legal e eu te espero comigo, tchau e vamos aprender.

Criando um formulário - Preparando o projeto

Dando continuidade, vamos agora configurar o projeto que vamos levar para o curso de Flutter, a parte de criar formulários com ele, você consegue encontrar esse projeto lá no GitHub da Alura github.com/alura-cursos, você vai encontrar o projeto flutter-gerenciamento-de-estado.

Atenta que você pode selecionar brand por padrão vai virar master, então, pega aula 5. Porque ela tem todo código completo do curso de gerenciamento de estado em Flutter.

Feito isso, aperte em code - botão verde que fica aqui no lado direito da tela e aperte em download ZIP, com isso o projeto será baixado pode demorar um pouco dependendo da sua internet ou da conexão, da carga de servidor do GitHub, então fica bem tranquilo, é normal.

Baixado o projeto, baixa extrair aperta o botãozinho, eu uso WinRAR, você pode usar outro descompressor, aperta em extrair e ele vai também levar um tempinho e extrair o projeto.

Eu extrai a pasta e mudei o nome dela para “FlutterForm”, para ficar no padrão. Feito isso eu vou abrir aqui - abre também a sua, vamos trabalhar ao longo do curso.

Optamos pelo IntelliJ Idea, ou seja, uma Idea que estamos usando há um bom tempo nas linhas de Curso de Flutter da Alura. Porém você pode usar Visual Studio Code, Android Studio sem problema nenhum, só configurar certinho.

Abrindo o IntelliJ, vamos startar o projeto. A ideia é de o Bytebank criarmos um sistema de autenticação. Vamos começar com a tela de login, formulário de login, vou apertar aqui em abrir.

Vou escolher a pasta Flutter_Forms que está no meu desktop e o IntelliJ vai iniciar o projeto, a etapa de carregamento é importante porque às vezes pode acontecer alguns erros.

Acabou de acontecer na parte superior tem uma tarja azul escrito “Dart SDK não está configurado” só que se você já vem de outro Curso de Flutter, você já configurou o Flutter na sua máquina.

O “pulo do gato”, você vai vir em file, ou arquivos dependendo da sua configuração de idioma, configurações na parte que esquerda tem línguas e frameworks, abre essa caixinha. Aperte na caixinha e selecione o Flutter.

Na parte superior tem Flutter SDK path, seleciona o caminho e o seu Flutter é instalado na sua máquina automaticamente já vai reconhecer a instância e vai dar opção de executar, feito isso vai aparecer uma mensagem dizendo que precisamos baixar as dependências.

Dependência é tudo o que o Projeto precisa de extra para funcionar e o IntelliJ dá tudo, facinho.

Detectou que não tem as dependências e ofereceu a opção de baixar, só clicar em get dependence deixar que ele baixe as dependências automaticamente, já terminou, tudo bonitinho.

Aquele monte de coisa vermelha, geralmente nos imports fica vermelho quando não importado, precisamos executar o projeto, na parte superior tem um campinho chamado no devices, nesse campo às vezes reconhece o Android e outras não. Dei sorte ele reconheceu automaticamente o meu.

Alternativa é abrir Android, tenho Android Studio configurado na máquina e o ele dá a opção de acessar AVG Manager, o gerenciador do Android na máquina virtual Android, abri o Android Studio, configurações AVD Manager, iniciador.

No gerenciador do AVD tenho máquina virtual, criada, posso até apertar o botão de play, para ele iniciar minha máquina virtual, iniciando já pode fechar o Android Studio.

Não vamos mais precisar mais dele e temos um emulador para executar o projeto, feito isso tem um botão de Play na parte superior do IntelliJ, é só apertar e deixar ele rodar o Bytebank.

Terminou de executar. E essa tela que nós vamos começar a trabalhar a partir dela, aparece uma mensagem, só ignorar e fechar essa mensagem, às vezes aparece às vezes não, depende também da sua configuração de Android.

E começa a brincadeira, vamos fazer o seguinte, abre a pasta do projeto do lado esquerdo, vem na pasta Lib, vamos criar uma pasta dentro da pasta screen que é a parte de autenticação.

Hoje o Bytebank cabo direto no dashboard e não é o que eles querem, querem que caia na página de autenticação, caso ele não esteja logado, botão inverso do mouse, New - o novo diretório, vou criar uma pasta chamada autenticacao.

Vamos criar um arquivo chamado "login", vou fechar menu lateral para ganharmos mais espaço na tela, e precisamos criar o widget que vai representar a tela, como estamos trabalhando com a base no projeto gerenciamento de estado com Provider, não faz sentido utilizarmos um StatefulWidget.

Vamos utilizar um StatelessWidget, para criar isso stl, dá enter e esse atalho maravilhoso o IntelliJ cria, vou chamá-lo de login.

Repara o seguinte, está vermelho por quê? Não importamos o material, ele sugeriu, mas vamos utilizar o material, salvo, funcionou.

Beleza, parou de ficar sublinhado em vermelho. Se der play, reexecutar, não vai acontecer nada. Porque não mudou a página principal, indo para a aba do main vou chamar IdGet Login, exatamente no home do MaterialApp.

Também apareceu lâmpada vermelha, vamos apertar e mandar autenticação login que vai para os *imports.

Podemos excluir a aplicação do dashboard, não vai mais ser utilizado nessa tela. Salvamos, só que ele não atualizou no aplicativo; vamos precisar apertar no vermelho e mandar rodar de volta.

Para ele dar um restart e carregar a primeira tela, será tela de login, pronto, rodou e a nossa tela em branco. Não fizemos nada nela tem Id vazio, justo, agora nós iremos substituir o Id contêiner na aba de login, na página de login por um scaffold que é responsável pelo layout da página.

Com ele, nós conseguimos criar coisas bem legais na página. Então a primeira coisa que scaffold exige é um body um corpo, então vou colocar e atribuir um contêiner a ele por enquanto.

Feito isso, vamos dar uma cor de fundo, o Bytebank pediu para colocarmos a cor verde, é a cor dele para funcionar no padrão, então background color nós iremos utilizar o tema que está no aplicativo.

Então, theme.of(context) passa o contexto para ele e vamos utilizar accentColor, “mas Leo, de onde está vindo exatamente?”, ficou azul na tela pegou a cor do tema. Isso está vindo arquivo main que tem as AccentColor configurado.

E configuramos lá que estamos, só que ele não quer esse azul, ele tem um verde dele.

Então vamos substituir esse grupo accentColor: Color.fromRGB vamos informar um padrão de cor que eles passaram, esse padrão de cor consiste em 71, 161, 56, 1. Beleza, salvei, temos o verdinho do Bytebank.

Falta colocar o retângulo que vai ficar nos campos do formulário.

Criando um formulário - Área do formulário

Você pode baixar a logo do Bytebank aqui

Prosseguindo com a criação da tela de login, precisamos agora inserir logo do Bytebank e também tirar essa tarja de bug que aparece no canto superior direito e não é legal ficar no projeto.

Então vem no arquivo main.dart, no materialApp em cima do tema coloca um debugShowCheckedModeBanner.

Então false para tirar essa tarja de debug, feito isso, precisamos agora importar a imagem do ByteBank. Fica tranquilo que você vai receber as imagem, vai ficar disponível no curso para download, que o pessoal do Bytebank nos mandou.

E agora eu vou arrastar a logo para pasta, vou copiar, para pasta do projeto, dentro da pasta, criei uma pasta chamada assets, dentro dela, outra pasta, chamada images.

Normalmente esse esquema de diretórios é padrão e cola logo dentro, arrasta, temos a logo dentro do projeto, nome já copiado uma vez para facilitar na hora de digitar.

A vantagem de usar assets que pode criar uma pasta de imagens, na pasta fontes, vídeos, fica a seu critério e fica tudo organizado num lugar só. Voltei para IntelliJ e precisamos declarar nas dependências do projeto a imagem.

Então vem no pubspecyaml rola até essa parte de “assets”, geralmente a fica na linha 43, 44, comenta a linha do assets só tirar esse # - eu gosto de excluir espaço do começo dar um “Tab” para garantir que a tabulação que está certa.

Faço a mesma coisa do de baixo até o final e dois “Tabs” feito isso assets/images e colo o nome logo do Bytebank, .png, salvei, vamos ver se ele baixou a dependência, baixou, reconheceu a imagem no projeto.

Fecho o pubspec, no main.dart ele vai pedir para pegar as dependências novamente.

O spec justamente alteramos o arquivo por ele, peguei as dependências só que aqui está o macete, geralmente pode dar erro, às vezes não reconhece, caso o emulador esteja aberto.

Então dá um stop e dá um play novamente para ele rodar o aplicativo e o projeto executou, temos já reconhecida pelo Flutter.

Precisamos colocar logo na tela de login no .dart, vamos substituir o corpo do componente, tirar o contêiner e colocar os elementos que vamos utilizar na tela, apaguei o container.

Vamos body: padding() interna, vai ser responsável por dos passos, precisão da imagem ficar bem legal, então essa propriedade coloca only vamos especificar uma margem, top: 30.

Para imagem não ficar colada no limite de tempo do projeto e seguiu o padrão que Bytebank informou, então o padding pede um filho, esse filho nós vamos informar uma single child scrollview justamente para garantir a rolagem quando o teclado abrir e não dar problema.

Se pede outro filho, esse filhos vamos informar uma coluna, essa coluna que vai ter os filhos e esses filhos são os elementos na tela, a imagem do Bytebank precisa ficar no centro e não está, então vamos usar um Align.

Que é o alinhamento alignment e espera outro alinhamento. Vamos colocar top center e especificar um filho para ele, vai ser propriamente a imagem do Bytebank.

Image.assets está vindo dos assets aqui entra um caminho assets/images/bytebank_logo, salvei temos nossa logo na tela. Mas ela ficou grande.

Então arrasto para o canto, width, de 200 pixels, salvei, ficou pequena, vou voltar, posso quebrar o código, fica mais fácil de ver, passo uma vírgula, precisamos embaixo dela construir o retângulo que vai ficar o formulário.

Vou dar SizedBox e ele vai ter um height: 20 para dar um espaçamento, feito isso, vou colocar outro alinhamento, este vou especificar alignment: Alinment que vai receber center, para ficar no meio da tela.

Ele espera um filho, esse filho vai ser propriamente container que é o retângulo que vai aparecer, então, container, nesse container, vamos dizer que a largura dele é de 300 pixels e a largura 230, salvei e não aconteceu nada.

Porque ele é transparente, invisível, não estamos vendo, vamos atribuir uma decoração para ele. decoration: BoxDecoration vai ter uma cor que vai ser branca, temos um retângulo, porém, está quadrado.

Precisamos dar um BorderRadius: BorderRadius, vamos usar circular, ficou legal. Mas a logo ainda está muito colada, vamos dar 30, em cima no padding vou colocar uns 40.

E vamos deixar parada. Mais uma coisa legal que vai ser o título, faça o seu login. SizedBox(height: 20) que vai ser a margem interna. Para colocar o componente interno, o contêiner precisa de um filho.

No filho do container, vamos especificar o contexto que vai formar o login, como eu tinha dito antes. Então child: Text() que vai receber Faça seu Login, porém ficou desformatado e no canto superior esquerdo.

Está um pouco diferente do que o Bytebank pediu, vamos colocar uma margem padding segura “Alt + Enter”, o IntelliJ já traz essa que preenche com o padding.

Nele vou colocar de 20, vai criar uma margem interna no container, ficou esteticamente mais agradável. Feito isso vou colocar como filho colunas, porque precisamos colocar várias coisas dentro do container.

Não só um texto. Nesse filho coloco child: Column e ele recebe filhos e vou passar o text com container.

Organizar o código, salvei. Mas o texto ainda está pequeno, vou passar um estilo para ele style: TextStyle(fontSize: 20), entre 20 e 25 geralmente fica bom, e passar a espessura fontWeight: FontWeight.bold para ficar em negrito.

Ficou mais agradável, feito isso vamos criar realmente o campo de CPF e o campo de senha.

Sobre o curso Flutter: crie e valide formulários para aumentar conversões

O curso Flutter: crie e valide formulários para aumentar conversões possui 258 minutos de vídeos, em um total de 68 atividades. Gostou? Conheça nossos outros cursos de Flutter em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda Flutter acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas