FLUTTERFLOW NA PRÁTICA: COMO CRIA TELA DE LOGIN RESPONSIVA

Olá Todos eu sou alio Silva e hoje vamos criar uma tela de login totalmente responsiva antes é necessário entender a importância do Design responsivel no FL Flow enfatizando sua capacidade de possibilitar a criação de interfac de usuário visualmente atrativas e adaptáveis em diferentes dispositivos e tamanho de tela design responsivo é explicado como uma técnica essencial para garantir a adaptação dinâmica que precisa de layouts e interfaces smartphones tablets e desktop dentro do contexto da plataforma resumidamente o design responsivel É como seu layout e o conteúdo inserido dentro dele se adapta a diferentes formato de tela agora

vamos partir para FL Flow para criar o nosso layout Vamos criar o nosso projeto clicar aqui em Create New eu vou colocar o nome como login responsive e vamos criar aqui eu não vou fazer nenhuma configuração né que a gente não vai utilizar banco de dados nem nada eu só vou selecionar um tema você pode clicar e segurar e arrastar eu vou escolher esse tema aqui né o clásico elegante vocês podem escolher qualquer um vamos fechar pode clicar aqui em Skype e pronto então pessoal essa estrutura de layout que a gente vai criar aqui ela

pode ser criada de várias formas porém eu considero essa forma a mais simples e eficaz ela funciona muito bem pra gente trabalhar com a responsividade a gente vai começar criando aqui o nosso layout primeiramente vamos deletar o web e deletar também a coluna vou deletar todos aqui em home page eu vou desativar a área de segurança e vou clicar aqui nessa opção em camera settings e vou também desativar a Safe área feito isso está pronto pra gente começar a criação Então vou selecionar aqui o homepage e vamos adicionar um contêiner Então esse container vamos fazer

algumas configurações ele vai utilizar Todo o espaço que tem disponível na tela então eu clico aqui em Infinite tanto na largura quanto na altura então eu fiz essa definição aqui embaixo eu vou adicionar um Gradiente Então marcoa essa opção em color dois eu vou colocar aqui o amarelo Então o meu Gradiente vai ficar dessa forma vocês podem mudar a cor de acordo com a necessidade de vocês vocês ou a cor que vocês quiserem aqui em container eu vou adicionar uma colum uma coluna aqui e eu vou apenas centralizar todo mundo então eu marco essa opção

e Marco também essa opção aqui dentro dessa coluna eu vou adicionar outro contêiner então eu vou adicionar aqui esse contêiner a gente vai configurar ele agora como Infinite na largura e aqui na altura a gente vai deixar Limpo sem nenhum valor então vai ficar dessa forma aqui embaixo em Max que no caso vai ser a largura máxima eu vou definir o valor de 650 Então essa é a configuração que a gente vai fazer aqui aqui em cima em fio color eu vou deixar o branco aí vocês podem também selecionar qualquer cor e eu vou somente

diminuir aqui a opacidade desse Branco vou deixar aqui em 10% Então vou usar a cor e vai ficar dessa forma dentro desse contêiner vamos adicionar outra coluna vamos também centralizar aqui F dessa forma e dentro dessa coluna vamos adicionar outro contêiner esse contêiner aqui eu vou definir a a mesma configuração Então vamos marcar aqui como Infinite na largura sem valor na altura deixa sem sem nenhum valor né E aqui embaixo na largura máxima eu vou definir o valor de 500 então o que que acontece esse contêiner aqui ele vai pegar né a estrutura completa do

nosso layout e esse contêiner vai ser onde vamos adicionar o conteúdo na nossa tela de login então vai ficar aqui dentro desse container aqui eu vou adicionar uma coluna então aqui já temos praticamente definido o nosso o nosso layout né a nossa estrutura para montar a tela de login então eu vou selecionar o meu contêiner e vou também tirar a cor do background pode ver que tá selecionado aqui o branco então vou remover essa cor vou clicar aqui em Clear color ele vai deixar sem cor Prontinho Agora vamos começar a montar a nossa estrutura então

aqui em color eu vou adicionar uma linha Então vou selecionar aqui o RW e dentro dessa linha vamos adicionar outra coluna nessa coluna eu vou adicionar mais dois textos então selecionar aqui vamos adicionar o primeiro texto esse primeiro texto vai ser com o nome login eu vou fazer também as configurações iniciais Vou definir aqui o tamanho de 18 e vou colocar Extra Bolt vai ficar dessa forma vou duplicar eu vou selecionar o texto aqui aperto Ctrl D seleciono o texto de baixo e aqui eu vou diminuir para o tamanho 14 e vou colocar Light vai

ficar dessa forma aqui vou colocar uma frase eh faça login para comar vocês podem ver que eu tô digitando né e o esse texto de cima ele tá acompanhando Então vamos selecionar aqui a coluna e vamos colocar todo mundo pra esquerda vai ficar dessa forma então selecionando a minha coluna novamente vamos adicionar aqui um formulário né o formulário para validar Eu gosto muito de manter essa estrutura com formulário porque e eu evito um retrabalho aqui eu já consigo fazer toda a validação dos Campos né ou seja para identificar se o texto ele precisa ter a

quantidade de caracteres se o campo de e-mail tem o @ então é mais ou menos aqui que a gente vai fazer a configuração a gente não vai entrar em detalhes dentro do form porém já vamos adicionar o a nossa estrutura o form dentro do form vamos adicionar uma coluna e aqui vamos adicionar os nossos Campos de texto né os text Fields então clique aqui na coluna Vamos pesquisar text Field e agora vamos configurar os nossos Campos então selecionando aqui o primeiro eu vou mudar aqui em cima Então vai ser textfield eil Vamos descer aqui um

pouco aqui nessa opção eu vou digitar eil em LB text né descend aqui embaixo Vamos colocar digite seu eil vai ficar dessa forma Vamos descer mais embaixo Aqui emard vou colocar outline ele vai criar uma linha né uma borda então eu vou mudar a cor dessa borda e vou colocar Prim text que essa cor aqui padrão vai ficar dessa forma aqui Prontinho vamos selecionar aqui nosso forma e já vamos dar um espaçamento para não ficar colado aqui com a nosso nosso texto Vou colocar aqui um valor de 20 vai ficar desse jeito então selecionando de

novo aqui o meu text Field vou remover esse espaçamento que ele deu aqui de oito e vamos duplicar o nosso text Field pronto agora vamos mudar as informações então aqui em cima vai ser TF senha vou descer aqui embaixo Vamos colocar a senha né e Digite sua senha apagar aqui vai ficar desse formato vamos selecionar a coluna e vamos dar um espaçamento entre os elementos não vou colocar aqui um espaçamento de oito vai ficar dessa forma aqui vamos selecionar novamente nosso coluna principal é interessante também a gente renomear essas colunas para ficar mais fácil a

localização quando tiver V vários elementos aqui na nossa árvore fica bem fácil de confundir Então vou a gente pode dar um clique duplo nela para renomear ou vir aqui nessa opção e renomear Então vou colocar coluna principal e vou marcar aqui Prontinho agora a gente já sabe que a nossa coluna principal é essa Agora vamos adicionar aqui uma RW uma linha e dentro dessa linha vamos adicionar um texto Então eu clico aqui para adicionar um texto esse texto eu vou definir aqui como você esqueceu sua senha é o o padrão mesmo na tela de login

aqui embaixo eu vou diminuir R Light vou deixar aqui dessa forma e vamos selecionar a nossa Raw e vamos colocar o alinhamento pra direita Vamos dar um espaçamento aqui de 10 vai ficar mais ou menos dessa forma e vamos de novo na nossa coluna principal e vamos adicionar o buton para finalizar V adicionar ele aqui vamos dar um espaçamento aqui de 20 e também de 30 aqui na parte inferior Vamos definir aqui Como logar ou fazer login vocês decidem colocar Como logar e aqui no meu na minha largura desse botão vou colocar 250 ficar dessa

forma Vamos navegar aqui até a parte superior vamos selecionar essa essa linha né Essa Raw e Vamos definir também um espaçamento na parte superior de 30 vai ficar aqui definido dessa forma a gente já tá mais ou menos com o nosso layout pronto então vamos selecionar aqui o nosso contêiner vamos também colocar como contêiner principal né ponte principal e aqui eu vou definir aqui um espaçamento de 10 para cada lado e arredondar os seus cantos então eu vou colocar aqui o valor de 15 15 ou 20 então a gente já tem a nossa estrutura totalmente

pronta né Agora vamos selecionar a nossa coluna e também vamos dar um espaçamento aqui de 10 pra nossa coluna pronto e agora a gente já tem o nosso layout totalmente expulsivo então eu vou clicar aqui para visualizar Então fez o carregamento a gente tá aqui no no mobile né então se eu clicar aqui em tablet pode ver que já tá funcionando perfeitamente Se eu colocar aqui para desktop ele fez essa adaptação e você pode alterar da forma que você você pode aumentar né esse esse tamanho aqui se você quiser que ele pegue mais espaço é

só vir aqui no contêiner principal e você aumenta essa largura máxima então você pode colocar aqui 750 e quando você for fazer o preview quando eu clicar aqui pode ver que ele já aumentou né esse esse tamanho desse contêiner quando você faz essa adaptação aqui pro desktop e ele mantém essa estrutura Então pessoal para finalizar esse vídeo vamos entender aqui de forma resumida a estrutura desse layout antes eu vou corrigir aqui que eu coloquei o a 100ha em cima né E vamos corrigir a ordem vou colocar o e-mail aqui para cima e vai fazer essa

essa correção então Voltando ao assunto e no meu conteúdo né no meu contêiner principal eu defini aqui uma largura de 600 Pixel que é a largura máxima ou seja se a tela for maior do que isso ele vai manter a estrutura até esse tamanho então podemos ver que fica bem mais agradável visualmente independentemente do tamanho de tela que eu defini aqui embaixo também nesse segundo eu defini uma largura máxima no valor de 450 500 e não é uma regra mas eu recomendo que você deixe entre esse intervalo de valores então 400 450 550 e esse

é o coner principal pois ele é que vai est levando todo seu conteúdo Então é ele que vai ser responsável por deixar o conteúdo bem harmonioso a estrutura do seu layout se eu remover esse contêiner aqui vocês podem ver que vai ficar uma coisa estranha porque a os elementos né Principalmente o text Field ele vai Tent t e se adaptar ao contêiner principal então fica meem bagunçado meio estranho então se eu aumentar esse esse contêiner se eu coloco aqui o valor de 800 vocês podem ver que os campos de texto eles também vão aumentar até

se o botão não tiver definido um valor ele vai também tentar se adaptar a a estrutura do contêiner principal então É bem interessante você manter essa estrutura e aí com base nisso você vai conseguir criar layouts totalmente responsivel com essa estrutur Zinha bem simples né né então é mais ou menos isso espero que vocês tenham gostado desse vídeo se inscreva no canal deixe seu like e até a próxima