Flutter Layouts: Tela de Login

fala galera beleza tutorial de hoje vai ver como criar essa telinha bem bacana aqui no fla até com um e mail a senha é digitada kiyotake como a gente ache na tecla todos configurado aqui a gente vai ver como criar que a gente já viu algumas coisas nos tutoriais anteriores mas também aqui também mais bonitinha até os botões mais bem trabalhados netão bora lá ver como o da ela tá bom a primeira coisa que eu tenho nessa aplicação aqui é o seguinte se pega um faça o download do do código-fonte de ataque na descrição tá

bom lá tem mais páginas que vão ser mais tutoriais que a gente vai ter é ea gente tem aqui na pasta a 7 está bom as imagens já separei pra você está a eu eu usei essa interface está num link que eu deixei aqui na descrição do vídeo também está então todos os créditos são do autor lá beleza dá uma olhada lá ele não faz ele faz só a parte de design é fazendo falta em cima do design dele está saindo de aprender tá bom então pra começar a criar um novo projeto com da arte

está é fla ter da arte beleza no meu púbis pec a eu vou colocar aqui não tem dependência nenhuma não colocar nenhuma dependência acha qe não ficou nada tá só aqui em baixo na parte de acidentes colocando os acidentes aqui ele vai dar um destino dos pactos aí foi deixar tudo certinho tá a e vamos colocar aqui é uma pista nova países e dentro do país login em ponto page ponto da arte que essa página que está aqui que eu vou deletá ela toda a gente constrói a 0 tá bom e aí no nosso meio

ponto da arte ele vai ficar assim a void bem apps é tudo o que a gente tem do padrão la plata no bem nada de padrão type of code of life já a do debate showtec banner falso para não exibir o bonezinho de banho e eu acho chato pra caramba é a cor primária coloquei como george neoci laranja aqui mais intensa em roma ele vai chamar logo impedir que a gente não só queria ainda mas vamos criar aqui agora tá então vou começar que criando um estéreo achei que as a oit está como os historiais

vão ser sobre design não vou criar não vou entrar no mérito de estados por enquanto tá depois de falar sobre estados uma próxima oportunidade então por ora só cria a estatal chinesa aí está e vai importar aqui ó o fla ter a matéria aponta da arte tá bom vou dar um rt só pra te ver num não tem nada carregado nesta nossa página a preto a itabom muito bem a primeira coisa que vai fazer aqui é retornar mas quer a nossa página que ele permite que a gente tem um ep barulho bari só que isso

vá usar o epi barak nessa página de login não tem oito bairros então a gente vai usar só o bari e no bar e à eu vou ter um container tá bom então quando a gente cria um container no corpo ele vai pegar o tamanho da página se você quiser testar você pode colocar um collor a colors ponto será em berlim por exemplo tá você vê vai pegar acordou na partida então que um container ao redor de danças toda a nossa página beleza é obviamente não vou deixar esse amarelo aqui no fundo a nossa página

é branco e uma outra coisa que eu vou colocar já por padrão el pedem tá então deixa eu colocar uma vírgula aqui para quebrar o código pra mim então a primeira coisa que eu coloque um pad é 17.11 é na verdade podia ser um se fosse todos iguais seria ou não mas aqui eu quero top 60 left 4740 vai dar 40 aponta a da esquerda quando ponta direita e 60 de semana e o background eu coloquei colors ponto haiti está bom então ele vai fazer um ato em branco não tem nada nossa página o il

disse container aqui na praia o filho dele eu votar utilizando aqui um e civil tá bom pra gente não tem aquele problema do teclado sobre sair as coisas vão ficar em cima da dos itens está dentro dele eu tenho tiver a e aqui a gente vai começar a nossa imagem da então pra colocar nossa imagem aqui dentro no flamengo a gente usa o inglês de ponto a 7 aprender essa pasta a 7 eu tenho a despachar logo aponta png aqui lembra de fazer o importe aqui no púbis pec ponto o irmão está sendo a sua

imagem não aparece na bom ataque só que a nossa imagem é um tamanho maior ela tem sei lá acho 512 pixels aqui então a gente precisa diminuir ela então por isso eu sair do box aqui então coloquei o site box com a light a e right de 128 e o filho dele eu coloquei há como imaginar então a gente vai ter como resultado a imagem renderizada ke ha com 128 pixels tá bom a imagem já tem aborda dentro dela tais pra nunca trabalho acabei criando a imagem de si nesse formato já tá agora que mais

pra baixo a gente precisa começar a criar os campos então a decisão que a gente já fez nos tutoriais passado já usei o campo com vocês a rotax forma field né olha que coisa que vou fazer aqui eu vou colocar primeiro um site box com right a 20 aprendam um espaçamento entre a imagem que o próximo campo aqui depois vou ver o que acontece fora o filme tá eu tirei o foco daqui pra testar mas se você quiser deixar o fox ele vai dar o foco nele já trazer o e mail está nesse campo há

um táxi forma filme dentro dele a gente tem o kibô itaipu que é muito importante até que se impute type ponto e meio atrás ela apareceu a roupa e tudo mais que você colocar teste não aparece a roupa no teclado nem fica ruim e aí decoration a gente tem um input decoration label táxi eu vou colocar o e mail além dos leilões style text style colors a black 38 e um preto um pouco mais puxado por cinzas é um pouco mais claro a fonte o haiti a w 400 né uma quase ali a e font

size e 20 tá bom beleza mover adiante aqui a gente tem a cor da fonte né esse acordo a lei voltará já está trabalhando na lei bom aqui a gente está trabalhando no texto dentro da caixa de texto né então tenho que estar aqui de fonte o ambiente está a colocar uma vírgula aqui pra quebrar tá bom vamos ver como isso aqui fica ele criou aqui o campo e mail pra mim tá até faltar todo desconfigurado aqui sempre está colocando assim mas aqui até um arroubo aqui né gente colocando em meio à então a todo

certinho aqui beleza vou ter mais um size box com right 10 pra dar uma altura aqui eu estou evitando usar o de wagner e eu sei que tenho hoje vai desejar a mas ele cria uma linha zinho né não não sei se é bem clarinho tabela ficando legal prodesign cabelos anos a xbox e que mesmo à frente esse espaço bom a na senha o que board o teste input o táxi né mesmo todos os caracteres ou escutar citro para transformar em peça hornela para essas bolinhas ao invés de aparecer a senha e o de curitiba

style eles ficam o mesmo tá aonde tem a mesma coisa aqui o primeiro e pracinha nota que quando há troca de um para o outro ao teclado ele muda aqui em baixo tá bom escondeu teclado aqui pra gente poder prosseguir essa a de baixo do nosso teste aqui lembra sempre das vírgulas aqui em galera que isso aqui é muito importante está tudo que você fizer coloca vírgula no final que ele já coloca os comentários aqui há para facilitar a visualização da glória inglesa agora a gente vai pra as partes cruciais é que o design é

que a parte do desenho dos botões está o que acontece eu estou trabalhando aqui vou trabalhar aqui com o site button setten a gente tem dois motores flex boat rice button é que o botão destacado da terra o botão chapada na tela trabalhar chapado porque não quero sombra nem nada nele é só você lembrar o designer lá no começo da do vídeo né você vai entender e o fundo dele é um fundo de granadeiro então não é legal que a gente fica usando imagens para fazer esse tipo de coisa aqui com a gente usou aquino

logo tudo bem né mas os botões imagina todo o botão ser uma imagem a ficar complicado né então o que eu vou fazer no flash button gente não consegue colocar um background é trocar a cor dele é colocar um degradê mas não contém a gente consegue então a o segredo a aki em um container e criar um flat button dentro dele tá então o container coloca quando container e que o flash button dentro dele então criei um container coloquei uma altura de 20 pixels da de 40 pixels perdão a coloquei o alinhamento centro esquerda nem

de centro direita nele não vou comentar porque e no tio dele eu coloquei meu flat button flash button é eu tenho um teste o tio de como montar se recuperar a senha e coloquei o táxi align right taa nuam pressa dele eu vou tirar esse cara aqui porque a gente estava navegando para lugar nenhum na verdade eu falei errado porque esse contei aqui é só pro reset de desenho com essa que só o flash button normal tá já dei explicação do próximo botão mas esse aqui é o do recuperar 100 ac que tinha esquecido que

tem que tá a beleza então tenho um contrato aqui com altura de 40 a conteúdo alinhado à esquerda nessa lá em 2060 right tá ele vai fazer um botão para cá também no botão é desse tamanho só no botão tá pegando tamanho todo conta aí né e dentro do contêiner dentro do botão que eu tenho text-align break também deve tá fazendo muita coisa não só trocar que se eu tirar o haiti é aqui vai ficar na mesma coisa não tá ali ano está sempre alinhada ao centro mas beleza tá certo aqui tá aí eu comentei

anteriormente foi fila aqui é pra gente criar o aquele botão bonitinho lá a gente precisa criar um container pra ele provou que não saiu do box com raio de 40 para dar um espaço e vou dar um container aqui tá bom vou criar um container aqui aí nesse container é o que a gente vai fazer aqui agora para utilizar esse botão a gente vai criar-se container e ele tem o fundo degradê time tem um fundo que começa uma corrida terminando em outra e ele também tem as bordas arredondadas tá então pra isso eu coloquei que

um raio de 60 tá uma altura de 60 e se nesse container o alinhamento center na china ou seja pra esquerda e aqui no the creation coloquei um box de crítico tá pra poder fazer as bordas é é redonda está sob decoration aqui embaixo do box decoration tá eu tenho bode rei dos reis pontual de cinco piques então vai dar uma cavadinha no botão ali gradiente eu coloquei um gradiente lembrar do topo da esquerda para o profiling da direita tá começa a usar o ponto 3 e termina num tá então ele vai começar aqui se

você mexer nessa neste início é ele pode começar bem no pé no começo é bem no topo da esquerda e terminar bem no topo fim ou ele pode começar mais no meio né então o que você vai mexer no pra achar só a coisa aqui está então se você tem duas cores aqui você tem a dois intervalos aqui também tá então começa termina tivesse três coisas aqui até três paradas nos estoques aqui começa a cor 1 termina por um comércio por 2 termina a cor 2 começa a correr três tá como a gente tem duas

cores só dois caras aqui essas são as cores que eu tirei conta-gotas daqui tá bom então a como resultado a gente já tem essa aqui ó botão ano o container para o botão nosso aqui tá clicável nem nada ainda tá que precisa fazer agora a gente precisa agora aqui é criar o nosso login no açougue ele tem um texto na esquerda e um ícone a direita não há o que faz com que ele precisa ser uma linha tão louco né coluna gente coloca na na vertical airway que coloca os itens na horizontal tá bom a

então aqui terminando o dogma aqui nesse cara né terminando box decoration aqui eu vou ter o filho do a do container tá e para aqueles que esse cara que funcione eu vou usar dentro dele um site xbox.com expande tá pra que ele tome a todo o conteúdo do contêiner tá então sair do box ponta depende dele vai ficar do tamanho do meu container que o tio tio dele ele vai ser o meu flat botton tá chael dele vai ser um ou talvez essa é uma linha a aí eu vou ter dois filhos dentro dela tá

então aqui eu vou colocar aqui text ops o vírgula dois a gente vê como vai ficar tá bom e aqui depois do chá onde a gente tem o placet que precisa chamar uma função a que vou colocar simplesmente com pessoal ônibus aqui a fazer nada no click dele aqui tá bom o o2 tá aqui o nosso botão está tomando espaço todo né as boxes band está expandindo só com essas linhas aí ela tá a não tá com espaçamento não tá nada feito aqui beleza então pra gente organizar melhor o saque no low aqui a gente

tem que colocar o homem precisa libertar a esse bem é só a light opa a ele faz a função é de alinhamento dos itens a gente tem o próximo é a própria ex alimente bem esses limites não é pra mim a x ou y e aqui no nosso bem é exatamente a gente coloca o space between né pra ele colocar um espaço entre esses dois casos ele vai colocar um cara aqui um cara o espaço que for necessário outro cara a no fim de tudo então ele vai usar ele vai preencher todo o espaço vazio

entre os nossos itens então ó ele coloca um canto e outro no outro há agora a nova ficou difícil a gente trabalhar aqui né eu vou ter que primeiro um teste que vai ser o login tá text style font weight bold colocando em taa a cor branca e tamanho 20 está o texto alinhado à esquerda align left tá bom então colocou meu login aqui pra nossa imagem aqui né pra nosso ícone eu vou usar um container tá pra cobrir toda a área o charlie vai ser um site box e dentro de sites box eu tenho

minha imagem 2828 igual a gente fez com a imagem em cima tá então o sono ossinho lá na imagem do osso do bonde tá aqui ó botão bom de login pelo isa vamos pro nosso é pro nosso outro botão é que é um pedaço aqui é um container jóia então vamos colocar aqui é um site box com raiva e 10 para separar esse botão do login no botão no facebook tá aqui a gente tem praticamente a mesma coisa na raia de 60 align center left box decoration só que eu não tenho as cores não tenha

11 um gradiente aqui na boa não tenho linear gradiente aqui não só tem o collor é direto aquele borda de 5 pixels também a mesma coisa aqui login com o facebook tá assim o mesmo processo aqui tá bom beleza não procede a não tenho nada aqui tá da uec está aqui o nosso botão a com o facebook bom com um fora da lei e colocar ali dentro do meu o container jóia a vamos agora criar o último botão nosso quero sair na pna a então vou dar o site box aqui right 10 né vou criar

um outro contêiner de 40 flash button táxi táxi é um processo daqui vou colocar a minha função anônima tá e vou fechar tudo aqui está então não é só pra carregar fica aqui o nosso cadastro está então olha que bacana quanta coisa que a gente aprendeu aqui anecy deste mini thoreau que só nessa tela de login na tv como criar a imagem é como colocar lá dentro do site box como colocar o nome na borda arredondada como colocar o fundo no flash butão gradiente como alinhar é um de um lado outro do outro é colocar

o login um lado icozinho do outro login no facebook um lado e do outro né os flash button saque como recuperar 100 é cadastre se tudo mais tá bom espero que tenham gostado desse tutorial e um de cor dos setoriais a gente vai criar outras telas desse ataque valeu um abraço