CURSO GRATUITO FLUTTERFLOW - CRIE SEU PRIMEIRO APP DO ZERO

fala pessoal beleza como é que você tá o meu nome é Israel Henrique e seja muito bem-vindo a dataset apps aqui você aprende a criar aplicativos utilizando o flutterflow uma tecnologia low code que permite com que qualquer pessoa crie qualquer tipo de aplicativo mesmo que não saiba nada de programação e dá uma olhada no aplicativo que nós iremos criar juntos passo a passo do zero já nessa aula aqui isso aqui que você tá vendo agora é a tela do meu celular então esse aplicativo eu acabei de publicar ele na internet e ele já está disponível

aqui para mim eu vou abrir aqui o aplicativo esse aqui pessoal é o aplicativo que você vai aprender a criar comigo nessa aula olha só que legal repare que isso aqui é um aplicativo de lanches de carrinho de compra e a primeira coisa que você vai aprender é criar isso daqui ó essa lista que você tá vendo aqui rolar na horizontal aqui embaixo quando eu rolo o meu dedo eu tenho uma lista de lanches também aqui em cima eu tenho um botão uma um campo de procura onde ele consegue fazer procura por parte da palavra

se eu escrever por exemplo frango e der um enter clicar em concluído ele vai trazer para mim apenas produtos que contenham a palavra frango no nome se eu escrever agora bacon por exemplo e der um enter ele vai trazer para mim ali e produtos ten a palavra bacon se eu escrever agora catupiri vamos escrever então Catu piri Eide o enter ele não encontrou nada aparentemente não não não devemos ter nada com essa palavra então se eu apagar e der um concluído ele vai trazer para mim então todos os registros que eu tenho no banco de

dados muito bem agora quando eu clico em um desses elementos por exemplo eu vou clicar aqui no primeiro o clássico reinventado cliquei aqui ele vem para uma outra tela onde eu tenho nessa tela os detalhes do pedido então eu tenho aqui a foto do elemento do do lanche o nome dele uma descrição e aqui embaixo eu tenho o valor unitário nesse caso R 39,99 quando eu clicar aqui ó nesse ícone de mais ele vai acrescentar uma unidade e aqui embaixo ele já vai fazer a soma r$ 99 então eu posso acrescentar mais um unidades ou

eu posso ainda retirar unidades bom eu vou tirar e eu vou clicar em adicionar clicando em adicionar esse nosso ícone Esse Nosso Lanche já foi adicionado ao carrinho aqui em cima eu tenho um ícone de carrinho de compra quando eu clico nesse ícone eu venho para uma tela onde eu tenho aqui a minha sacola vamos dizer assim e aqui está o nosso primeiro lanche bom eu vou voltar pra página inicial e vou clicar agora aqui na minha p pza frango com Catu catupiri Ok ah quando eu clico em mais aqui por exemplo três unidades e

clico em adicionar repare que agora ele já adicionou também aqui o meu frango com catupiri no meu no meu na minha sacola e aqui ele já calculou o Total Geral R 152 e assim eu posso ir fazendo deixa eu escrever aqui mais uma vez capiri será que eu escrevi errado aquela vez Catu pi catupiri com y Ah agora ele encontrou eu tinha escrevido errado aquela vez aqui então está o meu frango com catupiri Ok vou adicionar mais um item aqui então no meu banco de dados aliás no meu carrinho por exemplo vamos pegar aqui ó

o fogo do churrasco e Vou colocar cinco unidades vou clicar em adicionar vou clicar aqui no meu carrinho de compra e aqui está então o nosso carrinho com o total dos 277 se eu clicar em pagar não programamos nada para isso se eu clicar em limpar sacola ele vai limpar completamente a minha sacola E aí gostou do que você viu esse aplicativo é o que você vai ter no final dessa aula se você seguir passo a passo o que eu vou te ensinar esse aplicativo inclusive ele já está disponível em nosso curso Express de flutterflow

esse curso Express de flutterflow é um curso alternativo que nós aqui da dataset Apps criamos para que você inicie no flutterflow sem ter que pagar mais da metade de um salário mínimo em um curso que muitas vezes te oferece só o básico ou apenas um conteúdo introdutório Mas isso é assunto para depois lá no final da aula eu falo melhor sobre isso o fato é o seguinte esse vídeo aqui essa aula é é focada nos iniciantes é um conteúdo para iniciante se você já é uma pessoa que já tem um certo conhecimento em froter Flow

intermediário até mesmo avançado você pode assistir e sem nenhum problema com certeza alguma coisa de novo você vai aprender mas o foco é os são os iniciantes Ok ã por conta disso nós iremos focar totalmente na parte lógica do aplicativo então o banco de dados nós iremos utilizar o supa base como banco de dados nós não iremos criar a tabela eu vou disponibilizar para você uma planilha onde você vai fazer o upload dessa planilha direto lá pro supabase pro banco de dados e então nós iremos conectar ela com o flutterflow conectar o banco de dados

com o flutterflow para que a gente possa construir o nosso a nossa arquitetura e a nossa lógica do aplicativo Ok Israel como que eu faço para receber a o material complementar o banco de dados os dados a planilha as imagens que serão utilizadas para você receber esse material você precisa ir até o nosso Instagram @d apps vai mandar uma mensagem para mim escrevendo carrinho0 que vou te enviar essa planilha eu vou te mostrar agora bem agora um vídeo explicando exatamente o que você tem que fazer você vai acessar o nosso Instagram e você vai clicar

aqui ó em seguir isso se você ainda não segue a gente você vai clicar agora em mensagem e vai enviar a seguinte palavra carrinho carrinho assim 01 e vai clicar em enviar quando você enviar ele vai te responder aqui uma mensagem você vai clicar a clique aqui e receba E aí você vai ter acesso ao material você pode clicar aqui em cima e clicar aqui ó em Copiar link e aí você pode enviar esse link pro teu WhatsApp por exemplo e abrir direto no seu computador bom recados todos eles dados Então vamos pra aula Vamos

pro que importa Mas antes de começar deixa o like inscreve nesse canal que isso ajuda bastante o nosso trabalho beleza galera vamos lá então ok então se você ainda não tem uma conta no flutterflow aqui embaixo na descrição do vídeo Você vai clicar no link e você vai cair exatamente nessa página aqui nessa página você poderá colocar o seu nome seu e-mail você vai criar uma senha e vai clicar aqui ó em Create account Então você irá criar uma conta no flutterflow uma vez que você criou sua conta no flutterflow E você fez o login

você vai acessar o flutterflow quando você acessar o flutterflow pela primeira primeira vez independentemente de onde você esteja Você vai clicar aqui ó no canto superior esquerdo porque quando você clicar nesse ícone do floter Flow aqui no canto superior esquerdo você vai ser direcionado para a sua tela inicial do flutterflow a sua tela de projeto repare que eu tenho aqui diversos projetos eu posso criar quantos projetos eu quiser no mesmo ah com a mesma conta do flutterflow e com o mesmo plano Ou seja no plano gratuito do flutterflow você pode criar quantos projetos você quiser

ele não cobra por projeto beleza ótimo uma vez que você chegou até essa tela Você vai clicar aqui ó Create New clicando em Create New ele vai aparecer aqui uma tela escrito Project um projeto é um aplicativo então cada projeto que você cria é um aplicativo e você pode criar tanto aplicativos para celulares que é o exemplo dessa aula como também aplicativos para computadores ou seja aqueles aplicativos que a tela é grande você vai colocar o nome pro teu projeto então eu vou escrever o seguinte app carrinho compras que é o objetivo desse desse desse

minicurso é apenas criar um carrinho de compras tá não é um aplicativo de delivery é é um aplicativo de carrinho de compra essa é a lógica é aquilo que eu te mostrei no começo do vídeo e vamos clicar em Create Blank clicando em Create Blank ele vai aparecer para você essa janela se você quiser você já pode escolher aqui um tema pro teu projeto uma paleta de cores eu vou deixar essa aqui mesmo e aqui embaixo você vai desmarcar essa opção de configurar o firebase ok e vai clicar em start building muito bem Ah agora

nós temos aqui o flutterflow bom do lado esquerdo eu tenho alguns menus que nós iremos trabalhar ao longo deles durante essa aula então você vai se familiarizar muito bem com isso daqui quando eu clico em um desses menus aqui repare que aqui do lado eu tenho algumas mudanças na página então essencialmente quando eu clico aqui ó nesse esse elemento eu tenho acesso à minha a uma página específica quando eu clico nesse outro elemento aqui ó page selector eu tenho acesso a uma lista de páginas nesse caso temos apenas uma única página que é essa página

aqui ó que ele já criou chamada homepage Essa é a página que nós temos apenas uma eu posso criar mais páginas clicando aqui e adicionando páginas iremos fazer isso na sequência da a aqui embaixo eu tenho algumas configurações que não vem ao caso agora mas nós iremos utilizar aqui Muitas delas porque esse curso é um curso bem completo vamos dizer assim a gente vai trabalhar com api vai trabalhar com banco de dados vamos trabalhar com bastante coisa aqui no meio Eu tenho a tela do meu aplicativo então aqui ó eu posso escolher o tamanho isso

aqui é um tablet isso aqui seria um computador isso aqui é é um celular se eu clicar com o botão direito do mouse eu posso escolher até mesmo o modelo do celular que eu quero visualizar o meu aplicativo Ok vamos deixar aqui no padrão que é esse iPhone 13 aqui eu tenho um zoom Onde eu posso aumentar e diminuir aqui eu posso alternar entre a minha paleta de cores modo Dark ou o modo Light inclusive vamos já mexer nisso daqui ó você vai clicar aqui embaixo nessa paleta aqui ó nesse aqui onde está escrito ah

configurações de tema e vamos clicar aqui ó em Colors clicando em Colors repare que eu tenho aqui a paleta de cores do meu aplicativo eu tenho o modo Light quando o teu celular está no modo Light Então essa paleta de cores será escolhida e temos o modo Dark quando o teu celular tiver no modo Dark ou modo escuro essa aqui é a paleta de cores bom eu não quero me preocupar com isso agora então eu vou desativar Então temos apenas uma paleta de cores que é essa daqui perfeito vamos clicar aqui mais uma vez em

page selector e estamos aqui na nossa home page aqui eu clico e eu posso exibir a moldura do aparelho aqui eu posso dimensionar de forma um pouco mais precisa ou manual e aqui eu tenho outras ah configurações que não são importantes nesse momento muito bem e do lado direito eu tenho a janela de propriedades Então sempre que eu seleciono Um item na minha aqui no meu negócio na minha tela eu tenho as propriedades inerentes a esse item que eu selecionei Ok iremos trabalhar também com muito disso daqui ao longo dessa aula ótimo agora com a

minha homepage selecionada eu vou clicar aqui ó em P em Widget tre O que que é a widget tre é a árvore de elementos O flutterflow que é uma ferramenta criada em Dart o Dart é uma linguagem de programação do Google e o Dart ele é orientado digamos assim a widgets ok ele é feito de widgets então o que que são widgets são elementos então cada porção cada ah tijolo que compõe a minha tela digamos assim é um widget repare que eu tenho um negócio AZ zul aqui em cima isso é um widget chamado appb

que inclusive eu vou clicar com o botão direito e eu vou deletar essa app bar ótimo repare que dentro da minha homepage Eu tenho um widget chamado coluna e essa coluna é um widget que permite com que eu coloque elementos dentro dela UMS sobre os outros então se eu clicar aqui eu posso adicionar qualquer elemento sobre essa coluna se eu Se eu colocar se eu clicar no botão por exemplo Observe que esse botão apareceu aqui se eu adicionar agora um outro botão ele apareceu aqui embaixo Ora por que que o botão apareceu embaixo ou e

não do lado porque nós temos uma coluna e essa coluna empilha os elementos na vertical agora se dentro dessa coluna eu colocar uma linha por exemplo isso daqui repare que eu tenho uma linha então se eu colocar agora dentro olha só que legal repara que eu tenho uma coluna e dois botões aqui e eu tenho uma linha embaixo dos botões os três empilhados na vertical agora dentro dessa linha eu posso inserir um novo botão Então aqui tem um botão que está dentro da linha se eu clicar sobre essa linha e inserir um novo elemento agora

vamos colocar uma imagem a imagem fica ao lado do botão então nessa configuração nós temos uma imagem uma ao lado da outra um dois widgets um ao lado do outro porque eu tenho uma linha então em uma linha os elementos ficam um ao lado do outro ok iremos trabalhar bastante com linhas e colunas ao longo dessa aula por isso eu não vou me prender aqui nesses detalhes porque você vai aprender você a gente vai trabalhar com isso ah muito durante esse curso ótimo mas o que eu vou fazer nesse momento é o seguinte eu vou

clicar sobre essa coluna e vou simplesmente deletar botão direito e eu vou deletar essa coluna eu gosto particularmente de começar os meus as minhas páginas com um contêiner um contêiner é um elemento que ele admite apenas um filho o que que é um filho um filho é quando eu coloco um elemento um widget dentro do outro como nesse caso eu coloquei dentro do contêiner um texto Você viu que na coluna eu posso colocar vários elementos um abaixo do outro na linha um ao lado do outro eles são os filhos daquele elemento e eu posso ter

vários filhos uma coluna pode ter vários filhos uma linha pode ter vários filhos mas um contêiner pode ter apenas um filho eu coloquei um elemento de texto dentro desse contêiner isso quer dizer que se eu tentar colocar um novo elemento dentro desse contêiner ele vai dar um erro não é um erro na verdade é uma é um alerta dizendo o seguinte ora você está tentando colocar um um texto Dentro do contêiner Mas ele já tem um texto dentro dele ele já tem um filho você não pode ter dois filhos dentro de um contêiner Então que

tal você substituir isso por uma coluna ou por uma linha então se eu clico em uma coluna repare que agora dentro do contêiner que tínhamos um texto ele colocou uma coluna porque agora eu posso colocar dentro da coluna dois elementos Na verdade eu posso colocar agora Quantos elementos eu quiser Ok então essa coluna eu vou deletar clicar com botão direito e vou deletar temos aqui apenas um contêiner e esse contêiner eu já vou dar um nome para ele então vou clicar sobre ele e aqui aqui em cima do lado direito eu vou clicar nesse lápis

e vou escrever CTN principal Então adquira esse hábito de nomear os seus elementos porque isso aqui vai encher de widget e se você não nomea os elementos você vai se perder na construção do teu aplicativo Ok bom esse contêiner que eu coloquei aqui que é o contêiner principal ele tem aqui ó no lado direito algumas propriedades tanto de largura que é wi quanto de altura eu vou clicar sobre ele e eu vou definir que a sua largura será isso aqui ó infinito isso quer dizer que ele vai ser empurrado até o final então a sua

largura vai ser limitada de digamos assim pelo próprio tamanho da tela mas aqui embaixo nessa propriedade Max wif eu vou colocar 500 porque eu quero que essa altura ela seja infinita porém eu quero que ela se limite a 500 pixels então na medida em que a tela do meu celular for maior se for um tablet por exemplo ele não vai ser maior do que 500 pixels Ok ah agora em relação à altura eu vou clicar aqui nesse elemento nesse contêiner e a altura vou escrever vou fazer a mesma coisa vou clicar aqui então nós temos

também uma altura infinita e aqui está a nossa o elemento noss contêiner então eu eu prefiro começar as minhas telas com um contêiner ao invés de uma coluna justamente pelo fato de que eu posso colocar uma limitação de largura ou de altura ótimo o próximo passo agora é colocar dentro desse meu contêiner uma coluna então eu vou clicar bem aqui e vou clicar na coluna ou ainda eu posso clicar aqui ó e clicar sobre a coluna e arrastar para cá mas eu prefiro a segunda abordagem que seria clicar aqui por exemplo e colocar a coluna

que é o que nós já temos aqui bom eu tenho uma coluna e uma vez que eu tenho uma coluna agora eu posso digamos assim empilhar os elementos aqui dentro uma propriedade interessante que nós temos desses widgets é isso aqui ó paden o paden é uma espéci de espaçamento que eu posso colocar ã na vertical então por exemplo essa coluna se eu clicar aqui ó e colocar 16 repare que ele vai ficar espaçado aqui da tela em 16 pixels isso faz por exemplo com que os elementos Não fiquem eh grudados ok Não fiquem grudados na

tela Ahã eu posso clicar aqui colocar 16 pixels também e fazer isso em todas as direções se eu quiser colocar um ping de forma unânime eu posso clicar aqui ó de forma uniforme aliás E então eu posso colocar por exemplo 16 e e assim nós temos uma coluna que ela está com o espaçamento do canto da tela isso é um princípio bom de layout não é interessante que os elementos fiquem grudados um nos outros agora dentro dessa mesma coluna eu vou inserir uma linha então aqui está a linha eu tenho uma coluna e eu tenho

uma linha aqui embaixo dentro da coluna ã repare que se eu clicar na coluna aqui ó Eu tenho algumas propriedades chamada Main ais alignement que seria alinhamento do eixo principal o eixo principal é o eixo vertical e o alinhamento está de cima para baixo por isso que a minha linha tá lá em cima se eu clicar aqui agora a minha linha fica no meio porque o alinhamento está ao meio e se eu clicar aqui o alinhamento ficará de baixo para cima e aqui ele ficará distribuído bom vamos clicar aqui agora eu vou clicar sobre essa

coluna sobre essa linha e aqui dentro eu vou colocar dois elementos o primeiro el vai ser um elemento de texto onde aqui eu vou escrever alguma coisa bom e já vou escrever agora inclusive aqui eu vou escrever Rua dout Pedro 23 ou 34 tanto faz que seria o endereço que nós temos e dentro dessa mesma linha que inclusive eu já vou nomear essa linha como linha cabeçalho Então vou escrever aqui ó linha cabe para eu saber que é a linha do cabeçalho aqui nessa mesma linha vou clicar aqui e vou inserir um widget chamado ícone

eu posso escrever assim ó ícone e aqui eu tenho o widget ícone muito bem aqui está esse widget ícone eu vou já colocar aqui ó vou clicar sobre ele e vou colocar um tamanho de 36 esse tamanho eu acho que é um tamanho interessante pro meu ícone 36 ótimo e aqui eu vou clicar nas configurações do ícone vai abrir uma tela Onde eu posso procurar por um ícone eu tenho mais de 10.000 ícones disponíveis eu vou escrever o seguinte Shop Shop é carrinho em inglês aqui eu tenho esse carrinho vou clicar sobre ele eu gostei

dele e eu vou clicar agora aqui ó em icon color e vou colocar uma cor eu posso escolher uma cor qualquer aqui ou na minha paleta eu posso pegar essa aqui ó erro não que seja uma cor de erro né é uma cor vermelha bom Agora eu preciso dimensionar ou distribuir esses elementos aqui que que eu faço eu vou clicar sobre esse texto e vou clicar nessa propriedade aqui ó expansão isso fará com que o meu texto se expanda até o máximo possível E aí ele vai empurrar o carrinho até o final muito bem agora

eu posso aqui ainda no texto clicar aqui ó para alinhar ao centro mas se você observar o meu texto não está alinhado no centro da página ele está alinhado no centro dele pró pró Porque aqui nós temos 36 pixels de deslocamento da direita pra esquerda Então para que eu alinhe o meu texto no centro da página eu vou clicar sobre a a minha linha aqui ou pode ser sobre o texto também eu vou colocar um pading aqui ó de 36 Ok esse pading de 36 é justamente para compensar esses 36 pixels do ícone então assim

o meu texto fica exatamente no centro da tela muito bom agora o que vou fazer o próximo passo é colocar aqui aqui embaixo um texto bom então eu volto pra minha coluna Então essa linha aqui ó eu já fecho Ela tá aqui fechou voltamos pra coluna aqui embaixo eu quero colocar um texto eu posso simplesmente clicar aqui e inserir um texto vai ficar no centro o meu texto mas ah não é isso que eu quero eu quero que ele fique à esquerda eu posso clicar sobre a coluna e e ordenar com que seus elementos fiquem

à esquerda mas aí todos os elementos ficarão à esquerda também não é o que eu quero então o que que eu faço ao invés de colocar um texto direto eu vou colocar uma nova linha Aqui está a minha nova linha e dentro dessa linha agora eu coloco um texto porque aí ele fica alinhado à esquerda E nesse texto que eu acabei de colocar aqui eu já vou escrever o seguinte o o melhor lanche da cidade muito bem e agora eu vou formatar esse texto que eu acabei de colocar aqui então eu vou clicar sobre esse

texto e aqui ó na propriedade aqui ó Nessa propriedade test properties eu vou clicar aqui ó para escolher um tema eu vou escolher esse daqui ó ah display small esse ele vai deixar o texto grande perceba que ele explodiu isso gera esse tipo de erro aqui geralmente Ok como que eu resolvo isso bom você clica sobre o texto e aí você pode clicar em uma propriedade Cadê aqui que seria o seguinte pode clicar aqui ó pode clicar aqui que daí o seu texto ele fica digamos assim eh quebrado tá ele quebra ele não se expande

Isso aqui faz com que ele vá até o final Isso aqui faz com que ele quebre ou ainda você pode clicar aqui e simplesmente aqui no seu texto você pode dar um enter o melhor lanche da cidade Ok para esse caso específico essa abordagem é interessante para outros casos onde o valor do texto Ele é dinâmico Ou seja você não sabe o que vai dar escrito ali é interessante essa a segunda abordagem aqui OK mas tanto faz muito bem o melhor lanche da cidade agora o que eu preciso fazer já que aqui sumiu aqui a

minha barra eu vou aumentar minha tela muito bem agora o próximo passo é eu colocar aqui embaixo aquele botão né aquele Campo lá de de pesquisar que nós tínhamos então para isso eu vou colocar um Widget chamado um widget chamado test felder Então esse widget chamado test Field eu vou colocar dentro dessa coluna então eu vou clicar aqui ó e vou pegar o widget chamado test Field e aqui embaixo eu tenho esse test Field ele é um elemento de texto ok ele é um elemento de texto onde posso digitar alguma coisa esse elemento de texto

eu vou clicar sobre ele e aqui eu vou escrever já vou dar um nome para ele que eu vou chamar de TXT procurar ele é um elemento de formulário elemento de formulário são elementos onde o usuário insere informações nele ótimo esse elemento de texto possui algumas propriedades como por exemplo olha só paden eu vou tirar a aqui ó esses oito pixels que tem ao lado não é isso o que eu quero pen aqui embaixo eu tenho eu posso colocar por exemplo o nome o título para esse elemento eu vou deixar em branco então esse Label

text eu vou tirar e nós temos uma outra propriedade chamada hint text que seria a dica de texto Então aqui eu escrevo procurar pro usuário saber procurar que pro usuário saber que eu vou procurar alguma coisa aqui tá você pode usar a que você quiser tanto o hint text quanto a aquela outra que eu mostrei para você que seria o o Label né que seria o título procurar assim Tanto faz você pode usar as duas também ao mesmo tempo então um é o título do negócio e outro é o o texto do negócio vamos escrever

aqui procurar beleza clicando sobre esse elemento sobre esse test Field descendo aqui embaixo nós temos agora uma propriedade chamada input border Type que seria a borda então underline é uma borda aqui embaixo eu tenho também outline que seria borda em volta e sem borda vou escolher outline E aí Observe que nós temos agora uma borda eu vou clicar sobre ele mais uma vez e agora eu posso escolher também ah eu posso escolher a cor da borda então aqui border color repara que tá alternate que é uma cor ah é uma cor meio branca né Deixa

eu ver no outro que nós tínhamos qual que era a cor que eu tinha escolhido era essa mesmo alternate é essa cor aqui ó é un essa que já tá é um cinzinha que parece branco e aqui eu tenho fus border esse Focus é quando o usuário seleciona ele vai mudar a cor eu vou colocar a mesma cor tá a também então vai ficar sempre com a mesma borda border with é a grossura da borda então dois é grosso um é menos Grosso 3 é mais grosso e assim por diante vamos deixar o padrão que

seria dois e aí nós temos isso daqui o que eu posso fazer também é arredondar os seus a aos seus cantos existe uma propriedade aqui chamada Cadê a propriedade Deixa eu procurar a propriedade de arredondamento de borda aqui está Não não é você aqui ó border radius então eu posso arredondar as bordas de forma individual ou eu posso arredondar de forma uniforme eu vou arredondar para 16 pixels de raio de borda E aí temos essa configuração agora eu vou clicar sobre esse elemento e lá no final eu tenho duas propriedades que são vamos lá vamos

lá vamos lá Cadê Eu quero os ícones Deixa eu procurar aqui os ícones eu quero colocar um ícone no meu test Field aqui ó tá escondido aqui ó icon properties vou clicar aqui eu posso colocar dois ícones um à esquerda e um a direita eu vou clicar no primeiro aqui eu acho que esse é da esquerda já da direita e vou escolher o seguinte search esse search é procurar E aí eu vou pegar esse aqui ó tá então eu quero procurar Opa mas ele ficou desse lado mas tudo bem vamos deixar desse lado aqui eu

tenho um outro tá que seria desse outro lado mas então para esse caso vamos deixar no lado esquerdo mesmo não tem problema e aí eu posso colocar inclusive uma cor para esse meu ícone então aqui embaixo eu quero procurar Cadê o icon properties aqui está e a cor dele eu pode ser essa warning aqui que seria um amarelinho muito bem pessoal então nós já temos agora configurado o nosso a nossa primeira parte agora outra coisa que eu queria mostrar para você é o seguinte clicando sobre a coluna principal Ah o os elementos que eu vou

colocando aqui estão todos grudados entre eles é interessante que eu coloque sempre um espaçamento então aqui ó em Iron spac eu vou colocar 24 porque aí entre cada elemento que eu coloco dentro dessa coluna aqui ó vai ficar 24 pixels de espaçamento para não ficar muito grudado beleza muito bem então assim eu acho que a gente termina ah essa primeira parte aqui de cima agora nós iremos aqui embaixo colocar uma outra parte e essa outra parte é aquela parte que vai rolar é onde vai ficar listado os lanches tá os lanches do nosso aplicativo então

aqui na minha coluna principal essa aqui é a minha coluna principal inclusive vou nomear ela como coluna principal B beleza coluna principal nessa coluna principal eu vou colocar um outro elemento que é um um contêiner um novo contêiner então aqui está o meu novo contêiner esse novo contêiner ele vai ter a mesma propriedade então aqui em with eu posso deixar como infinito para ficar na largura e a altura eu vou clicar ao invés de clicar aqui em uma altura infinita vou fazer diferente eu vou clicar aqui ó para que ele se expanda então ele vai

se expandir até o final tá porque esse esse contêiner não pode ter uma altura infinita mais sen não ele iria ocupar iria ultrapassar o que já tem aqui então por isso eu cliquei nessa propriedade de expansão ele se expande até onde ele pode então Aqui nós temos um novo contêiner que eu vou nomeá-lo como CTN corpo bom CTN corpo porque ele será o corpo digamos assim da minha aplicação e agora aqui dentro nós iremos começar a construir os nossos lanches então aqui eu vou colocar aqui ó eu vou colocar aquela lista que rola pra esquerda

e pra direita depois aqui embaixo uma nova lista que vai rolar para cima e para baixo ok muito bem então continuando com o nosso projet projeto agora nós iremos criar Aqui as nossas duas listas repare que eu tenho um contêiner chamado corpo então recapitulando que fizemos tem um contêiner chamado corpo que está dentro da minha coluna principal na minha coluna principal eu tenho a minha linha cabeçalho eu tenho essa outra linha com o título eu tenho o meu test Field que eu chamo de TXT procurar e finalmente o contêiner corpo por que que eu coloquei

um contêiner corpo porque esse contêiner terá uma coluna rolável uma coluna onde o usuário vai deslizar para cima e isso aqui ficará fixo a parte de cima eu quero que fique fixa na tela ok dentro desse contêiner corpo eu já quero colocar aqui dentro uma coluna então repare que dentro do meu contêiner corpo eu coloquei uma coluna ótimo dentro dessa minha coluna eu quero colocar o meu primeiro elemento que vai ser um contêiner para ficar aqui porque que aqui eu vou colocar uma list viw ok uma list viw é um elemento que faz com que

os elementos fiquem Ah listados bom nessa coluna eu vou colocar um contêiner então aqui está o meu contêiner nós não podemos nos perder com isso então esse contêiner que eu acabei de colocar aqui em fio color eu vou colocar uma cor a qualquer Eu não vou usar para nada depois eu vou tirar essa cor essa cor é só eu não me perder Nos contêiners que eu posso ter vários contêiners aqui com a mesma cor esse contêiner que eu acabei de colocar aqui a sua largura será infinita também já a sua altura ela deve ser uma

altura fixa Como assim deve ser uma altura fixa como essa coluna será uma coluna rolável ela vai rolar para cima e para baixo então seus elementos dentro dela devem ter alturas de definidas porque Imagine que eu tenho um um contêiner que tem uma altura infinita se ele estiver dentro de uma coluna que rola isso vai causar um erro aqui no no no flutterflow porque eu não posso ter uma coluna que rola e dentro dela um elemento com uma altura infinita eu só posso rolar alguma coisa se existir uma limitação de altura ou de largura muito

bem então esse contêiner roxo Eu Vou Chamar esse de CTN promo Por que CTN promo porque aqui ficarão digamos assim as promoções ótimo muito bem esse contêiner que eu chamei de contêiner promo eu vou colocar aqui uma altura então aqui em hate de 120 pixels ah 120 pixels eu acho que tá Tá interessante agora esse meu contêiner que está aqui e eu já vou tirar a essa cor então vou clicar aqui vou clicar em Clear color e dentro desse meu contêiner eu vou colocar agora uma list View então eu vou escrever aqui ó list View

Aqui está a minha list viw ela está dentro do meu contêiner promo a list viw é um elemento que eu coloco dentro dela ã eu associo esse elemento a uma consulta a um banco de dados e então ela busca do banco de dados os valores e eles ficam listados aqui ok uma list viw os valores podem listar tanto para baixo aliás tanto na vertical quanto na horizontal Então eu não sei se você se lembra mas para esse elemento aqui para essa list vi os valores eles vão rolar na horizontal então eu vou clicar sobre a

listview e aqui ó em listview properties Vamos marcar a opção horizontal e aí os elementos eles irão rolar na horizontal Beleza agora eu vou clicar sobre essa Lest viw e dentro dessa Lest viw eu vou colocar mais um contêiner aqui está esse contêiner que eu acabei de colocar aqui Inclusive eu já vou colocar uma cor nele então eu vou clicar aqui em fio color e vou pegar uma cor roxa por exemplo ã deixa eu ver aqui cor que eu posso pegar esse accent olha ficou interessante essa cor que eu selecionei aqui é chamada accent 1

é uma cor roxa que inclusive eu acho que ela combinou aqui eu posso clicar sobre esse contêiner clicar sobre a cor e ainda deixar ela mais transparente aqui isso aqui é o grau de transparência da cor tá então você que decide ora esse contêiner que está tá aqui dentro que está dentro da list viw eu vou colocar uma uma largura nele aqui ó wif de 250 pixels então perceba que ele tem uma largura de 250 pixels ele tem uma altura também mas essa altura aqui não não tem influência em nada por quê Porque no Dart

as alturas E larguras dos filhos são determinados pelo pai Então se esse contêiner promo já tem uma altura definida em 120 pixels a altura Desses desse contêiner será 120 pixels independente do valor que eu coloque aqui ok isso é um princípio aí do Dart da do do flutter também bom esse contêiner então eu vou clicar sobre esse contêiner e vou nomeá-lo como CTN Lanche porque aqui ficará um lanche bom aqui ficará um lanche e essa propriedade border radius eu também vou colocar aqui um arredondamento por exemplo 16 pixels Opa 16 então repare aqui que 16

pixels eu tenho essa configuração aqui tá ótimo agora aqui dentro aqui dentro desse contêiner lanche eu preciso colocar dois elementos para que você entenda melhor eu é é interessante que eu mostre PR você o aplicativo original então eu vou tentar abrir ele aqui para que você entenda o que nós estamos fazendo ele tá carregando aqui então eu vou pausar o vídeo enquanto isso ok ok já carregou Então vou trazer aqui para você o arquivo original que é esse daqui ó então perceba aqui no arquivo original nós temos a esse contêiner e aqui ó eu tenho

um título embaixo desse título eu tenho preço e aqui eu tenho uma imagem Qual que é a estrutura que eu utilizo para construir isso daqui Como assim o que que eu tenho que colocar dentro desse contêiner lanche bom perceba que eu tenho um elemento em cima do outro mas eu também tenho um elemento ao lado do outro linha ou coluna bom eu começo com uma linha porque eu primeiro coloco esses dois e depois esse do lado vamos entender essa lógica nesse meu contêiner lanche eu vou clicar aqui e vou colocar uma linha então eu tenho

uma linha dentro desse meu contêiner lanche Ah uma vez que eu tenho uma linha dentro do meu coner lanche eu preciso colocar então no lado esquerdo aqui uma coluna porque no lado esquerdo da linha eu coloco dois elementos um sobre o outro então nessa minha linha eu coloco uma coluna Aqui está a minha coluna e do lado direito agora no outro lado da minha linha eu coloco uma imagem Então vou escrever imagem aqui está image e aqui a apareceu a minha imagem repare que ela estourou também né Por que que a minha imagem estourou Porque

essa imagem possui 300 piels por 200 pixs de altura 300 pixs de largura e 300 pixs de altura bom nesse caso eu preciso então fazer algumas adaptações em primeiro lugar a largura dessa imagem eu vou colocar 120 piels Por que 120 pixels porque esse contêiner lanche aqui ele tem 250 então isso aqui é meio que arbitrário vai no olho mesmo tá e a altura da imagem eu vou clicar aqui ó em infinito porque daí ele vai ficar com a altura do seu pai que seria o lanche tá ele vai barrar ali no lanche no lanche

não nesse contêiner mas repare que esse essa coluna está aqui e ainda temos um espaço sobrando bom nesse caso que que eu faço eu vou clicar sobre a minha coluna essa aqui tá que está aqui dentro da linha e vou clicar nessa propriedade de expansão que que que ela faz ela expande ela se expande até onde dá então para esse caso é interessante eu quero que a minha colona se expanda empurre expra a imagem no canto e Aqui nós temos então uma coluna bom Agora sim dentro dessa coluna eu posso colocar um texto em cima

e um texto embaixo Mas antes eu vou clicar sobre esta imagem e eu vou definir aqui primeiro lugar essa propriedade para que o elemento a foto fique aqui dentro sem se distorcer e também uma borda a de 16 pixels acho que de 16 pixels tá interessante e essa coluna aqui ó agora se eu colocar nessa coluna um texto vai ficar grudado lá em cima bom não é isso o que eu quero eu não quero que o texto ele fique grudado lá em cima eu quero que tem um espaçamento em volta vou clicar sobre então a

coluna e aqui ó em PIN eu posso colocar um espaçamento Vamos colocar por exemplo o piels 8 pixels eu acho que ficou interessante aqui o pixels ficou interessante ah ok oito pixels deixa eu ver é muito bom ficou bom esse texto aqui eu quero que ele fique Ah aqui à esquerda então eu vou clicar sobre a coluna e vou marcar essa propriedade aqui ó para que os elementos fiquem alinhados à esquerda ok aqui nesse texto eu já vou escrever o seguinte ah escreva lá por exemplo Big Mac que aqui vai ficar o nome do lanche

eu quero formatar vou clicar sobre esse texto Então aqui embaixo eu vou pegar a opção aqui aqui em TH test Style eu vou escolher deixa eu ver qual que posso escolher Body large hum Body large não ficou bom quero que seja algo realmente grande deixa eu ver qual que que eu utilizei lá naquele nosso original ah Deixa eu procurar aqui ty Lord esse aqui ó ty Lord eu vou aumentar a fonte aqui ó para 22 22 a cor eu vou colocar uma cor essa aqui ó e isso aqui ó Font weight é o peso que

seria quão é vamos colocar 500 bom aqui sim eu acho que está interessante tá assim está interessante perfeito eu vou escrever mais coisas para ver o que acontece Ah ele vai quebrando para baixo então está está bom assim eu acho que está bom se você acha que não vai dar que não vai caber você pode ficar à vontade para aumentar aqui o tamanho das coisas pode clicar sobre o contêiner lanche por exemplo e aumentar a sua largura assim tá aí você pode ficar à vontade bom agora nessa coluna eu vou colocar um outro elemento aqui

embaixo vou colocar um contêiner Mas por que um contêiner porque dentro desse contêiner eu quero colocar um texto repar que o contêiner quebrou ele explodiu né porque temos 100 pixs de altura tanto ainda não tem problema dentro desse contêiner que explodiu eu vou colocar um novo texto assim ó ótimo Na verdade eu vou tirar esse texto dentro desse contêiner vou colocar uma coluna Porque daí eu consigo colocar o texto agora aqui dentro da coluna então no contêiner esse aqui é o contêiner preço eu vou até nomear como CTN preço aí essa coluna aqui eu consigo

clicar aqui ó para deixar o meu o meu texto ali no centro mas ele não apareceu né agora esse meu contêiner preço eu posso simplesmente tirar a linha ó tirar a altura Aliás quando eu tiro essa altura ele vai ficar com a altura do texto que está dentro dele eu vou tirar também a sua largura que daí ele vai ficar o contêiner fica exatamente com a largura que está dentro dele o texto agora eu clico sobre o texto e aí eu posso definir um pading no texto vou clicar aqui pading de 4 pixels E aí

ele vai colocar o contêiner com quatro pixels em volta e agora eu posso clicar sobre esse meu contêiner preço e colocar um arredondamento de borda de qu pixels também E aí nós temos essa configuração ou eu posso deixar mais arredondado ainda então eu colocar aqui em border radius 8 assim ficou mais interessante bom mas eu quero que esse contêiner fique aqui embaixo e esse texto fica aqui em cima então vou clicar sobre a coluna que acomoda esses dois elementos e vou clicar nessa propriedade aqui ó Isso prende o elemento lá em cima e prende outro

elemento embaixo Ok bom pessoal então assim nós acabamos de finalizar o nosso a nossa primeira list viw o que eu preciso agora é conectar isso aqui com o banco de dados para eu poder ver funcionando então na próxima aula no próximo vídeo né ou no próximo capítulo se tiver vendo no YouTube nós iremos conectar com o bco de dados Ok com o supabase bom agora nós iremos conectar o nosso projeto a um banco de dados supabase que é um banco de dados relacional também tem uma versão gratuita onde você pode fazer muita coisa nele se

você ainda não tem uma conta no supabase aqui embaixo na descrição do vídeo se estiver vendo pelo Youtube tem um link escrito criar conta no suase tu vai clicar vai pausar esse vídeo vai lá e vai assistir e vai criar sua conta depois vem para cá se já tiver a conta Ótimo vamos prosseguir se tiver vendo esse vídeo pela plataforma de cursos do acelerador low code ou do curso Express Nós também já ensinamos a criar conta no suabase em aulas anteriores mas mesmo assim eu vou disponibilizar o vídeo para você criar sua conta assumindo que

você já criou a sua conta no supabase vamos lá aqui no suabase Você vai clicar você vai entrar dentro do seu projeto então eu já estou dentro aqui do meu projeto ó tá eu tenho uma tabela aqui inclusive Eh chamada de produtos ã que é coincidentemente igual ao nome da tabela produtos que a gente vai criar bom uma vez que você acessou o teu painel do supabase esse aqui repare que eu tenho várias tabelas eu vou clicar aqui ó em new table e eu vou criar uma tabela nova bom mas nós não precisamos criar tabela

coluna por coluna porque eu já disponibilizei para você isso no começo da aula então você vai clicar aqui ó em Import data via spreadsheet importar dados de uma planilha Ok vou clicar aqui então vou clicar aqui e vou procurar agora a minha tabela que é essa aqui ó produtos eu vou clicar em abrir e repare que já apareceu aqui a minha lista de produtos Pode ser que depois a essa tabela tenha mais registros ainda tá Então dependendo do momento que você vai ver esse vídeo Pode ser que eu coloquei mais coisas aqui vou clicar aqui

em save pronto então perceba que nós temos aqui a nossa tabela importante a primeira coisa que você vai fazer você vai marcar o primeiro campo como uma chave primária isso é importante o restante pelo que eu estou vendo aqui não tem problema nenhum ele pode ficar Como está esse float 8 na verdade vamos colocar como float 4 mas se não colocar também não vai fazer nenhuma diferença é apenas eu gosto aqui em cima vamos dar um nome paraa Nossa tabela eu vou chamar de produtos dois Porque eu já tenho uma tabela chamada produtos então por

isso que eu vou chamar de produtos dois você pode chamar do nome que você quiser isso tem que estar marcado e vamos clicar aqui em save então ele vai criar a nossa tabela produtos no meu caso produtos dois e aí eu vou explicar para você o que nós temos em cada Campo dessa tabela vamos esperar vamos aguardar OK tá adicionando então ele criou aqui a minha tabela nesse Campo aqui ID eu tenho a identificação de cada registro Isso é uma chave primária isso é um campo que nunca se repete é como se fosse o CPF

daquele registro O que é o registro um registro é uma linha esse campo chamado Create é o campo que diz Em que momento esse registro foi inserido no banco de dados aqui tá uma data passada porque isso aqui é uma cópia né o campo nome e produto tem o nome dos produtos o campo descrição temos a descrição de cada produto esse campo chamado destaque é um campo boano ou seja ele admite valores ou verdadeiro ou falso apenas verdadeiro ou falso nós iremos utilizar isso aqui como filtro daqui a pouco basicamente esse destaque seria os produtos

que estão em oferta repare que aqui ó não aparecem todos os produtos aparecem apenas aqueles produtos que eu determinei que estão em em oferta ou promoção ou algo assim o campo categoria vai dizer qual que é a categoria desse produto o campo preço é um campo decimal float ou Double no floter flow e ele é separado por ponto e não por vírgula então o que separa a decimal no suabase é o ponto e no campo imagem Eu tenho um link que me leva até aquela imagem então eu vou clicar aqui ó em copiar o conteúdo

da C e aqui eu tenho a imagem tá então é dessa forma que nós trabalhamos com imagens em um aplicativo nós temos na tabela sempre o endereço dessa imagem muitas vezes a imagem ficar armazenada dentro do seu próprio banco de dados dentro do próprio supabase como nesse caso aqui eu vou disponibilizar essa tabela para milhares de pessoas não faz sentido que eu armazene isso no meu banco de dados por isso que eu Estou utilizando um serviço externo e todas estas imagens que estão aqui são imagens exclusivas que eu criei utilizando Inteligência Artificial eu criei essas

e outras imagens são todas com inteligências artificiais tem mais de 50 imagens que eu vou disponibilizar todas elas para vocês Então essa é a estrutura da nossa tabela aqui no spase agora aqui ó em no Active RL policies Você vai clicar aqui e nós iremos ativar as políticas de segurança porque senão Nossa tabela fica indisponível pab não admite que ninguém acesse ela vamos clicar em new policies aqui embaixo em for full customization Vamos dar um nome para essa política de acesso geral vamos marcar que todas as operações serão permitidas aqui isso Não mexe em nada

aqui você vai escrever true e true também e clicar em preview save policies ótimo podemos clicar mais uma vez aqui ó em table editor e então nós temos aqui a nossa tabela agora prontinha para uso Agora eu preciso conectar isso com o flutterflow como que eu conecto a minha tabela com o flutterflow você vai acessar o flutterflow e aqui em configurações Você vai clicar aqui ó em supabase você vai clicar em enable base para habilitar o spase aqui em API URL você vai colocar a URL da sua da do seu projeto Então você vai clicar

aqui você vai clicar aqui ó em configurações ou Project settings vai clicar em API a URL é essa aqui você vai clicar em copiar e vai colar aqui e aqui nós temos a chave prima chave anônima Então você vai pegar essa chave anônima aqui embaixo ó vai clicar em copiar e você vai colar também aqui e vai clicar em get schema fazendo isso repare que todas as suas tabelas que você tem já deverão aparecer aqui a minha tabela produtos dois está aqui isso aqui é o tipo de dado dop base que é um banco de

dados postgre e aqui é o tipo de dado equivalente no flutterflow então int 8 aqui é apenas inager T test aqui é apenas string boa que chama-se boleano é a mesma coisa eles só mudam aí a forma de se de se referir ao elemento ao ao tipo de dado muito bem Como que eu faço agora para trazer Então essa tabela para cá você vai clicar na sua consulta aqui na sua list View tá E aqui ó você vai clicar em back and carry agora vai clicar em add back and carry e aqui escolha a opção

super base Carry só vai aparecer o superbase Carry se você tiver conect com o spase qual tabela eu quero trazer para cá bom no meu caso é a tabela produtos dois no teu caso pode ser a tabela produtos e aqui embaixo eu quero aplicar um filtro o que que é um filtro eu quero trazer todas esses esses esses registros aqui para aquela parte principal para isso daqui para essa parte não não quero trazer todos os registros eu quero apenas os que estão em promoção os que estão em destaque e os que estão em destaque são

esses aqui ó onde a coluna destaque é igual a verdadeiro então eu vou aplicar esse filtro aqui em filtro eu vou escolher a opção a coluna destaque a relação é igual equal to ou seja então filtre aquilo cuja coluna destaque é igual a verdadeiro true e vou clicar em confirmar clicando em confirmar mensagem de confirmação confirmar E aí você já observa que ele já replicou aqui pro lado a mesma coisa bom vou clicar sobre a list View E clicando aqui ó em properties aqui embaixo eu tenho uma opção chamada em spac que significa espaçamento entre

os itens e aqui eu vou colocar um espaçamento para que não fique grudado os elementos um no outro então eu vou colocar 24 aí vai ficar assim ó beleza agora Como que eu faço para testar isso daqui quando eu clico nesse olho eu tenho acesso a a pré-visualização do meu aplicativo mas apenas a a título de layout eu consigo apenas ver o layout Ok ó eu não consigo interagir com variáveis então está ficando desse desse jeito aqui para que eu possa interagir com variáveis para que eu possa conectar e conectar com o banco de dados

eu clico aqui ó tá bem aqui ó então vou clicar aqui nesse raio E aí ele vai começar a compilar então ele vai demorar um pouquinho na primeira vez que você compila vai levar uns 3 minutos então vamos esperar isso daqui eu vou clicar aqui e pausar o vídeo por enquanto Beleza então ele compilou o projeto e perceba que agora eu tenho aqui ó exatamente a minha consulta tá então cada um desses elementos representa uma linha que veio na consulta eu preciso agora colocar aqui essas informações então quando eu volto para cá e clico por

exemplo aqui ó nesse elemento de texto Observe que eu já posso clicar aqui ó e aparece para mim essa opção ó produtos Row esse produtos Row é justamente a minha tabela produtos com os campos da tabela Então nesse texto aqui nesse elemento de texto eu quero colocar o nome do produto então ponho clico em nome do produto e ele sempre vai pedir para você um valor padrão esse valor padrão aqui você é obrigatório colocar tá é para evitar tá que caso o banco de dados esteja com valor nulo ele não coloque aqui um valor nulo

o que resultaria em um erro então preencha sempre isso daqui ok aqui nesse elemento de texto eu quero colocar o o preço então eu vou clicar aqui e eu vou escolher a opção produtos Row e preço como como preço é uma um númeroe me sugere aqui algumas opções como por exemplo formatar Se eu colocar no for Changes não vai aplicar nenhuma formatação Se eu escolher Number Format eu posso aplicar uma formatação Então você vai clicar aqui e vamos escolher a última Custom porque aqui sim eu consigo formatar do jeito que eu quero por exemplo hash

vírgula hash 0.00 isso vai formatar com duas casas decimais mesmo que ele não tenha casas decimais e aqui em locale ou lo PTBR de Brasil display as currency exibir como moeda clica aqui e coloca o símbolo RS espaço e o valor padrão im muito bem e na imagem a mesma coisa vai clicar na imagem e qual que é a foto que vai aparecer aqui ó aqui embaixo você vai escolher a opção pef aqui aqui imed Type Network aqui em pef você vai escolher a opção produtos Row e imagem certo pode acontecer de o teu banco

de dados não ter uma imagem se não tiver imagem aqui estiver em branco vai dar um erro Ok vai vai aparecer uma tela vermelha para você então para isso é sempre muito interessante que exista uma imagem padrão você pode pegar por exemplo uma imagem genérica imagem genérica de produto por exemplo clica aqui em imagens deixa eu pegar aqui lanche Ok você procura uma imagem genérica lanche vetor aqui pronto Isso é uma imagem genérica ah abrir Ah deixa eu copiar endereço da imagem Ok pronto então o que você precisa é sempre ter uma imagem genérica você

pode copiar esse endereço aqui copiar esse endereço e aí você coloca aqui ó tá aqui ó porque se não tiver imagem no teu banco de dados não vai dar erro ele vai colocar essa no lugar o ideal é que você faça o seguinte ó O correto é que você clique aqui ó em assets faça upload de uma imagem Então você baixa aí uma imagem no teu computador uma imagem genérica Por exemplo essa daqui tá tá E aí aqui você copia a URL dela porque daí isso não vai depender de sites externos né Aí você copia

essa URL e cola aqui então se acontecer de eu teu banco de dados não ter uma imagem você vai colocar uma imagem padrão como ele colocou aqui agora OK agora vamos clicar em Instant Reload que ele vai recarregar novamente para nós ele vai compilar o código para nós agora é mais rápido na primeira vez demora mas depois ele vai mais rápido então aqui está o nosso o nosso elemento nossos o nosso filtro né ó foram cateri e aqui deu esse erro Por que que deu esse erro porque o clássico reinventado ele ocupou mais espaço do

que esse contêiner ele é capaz de suportar Então esse contêiner aqui ele tem uma uma contêiner lanche né que é esse aqui ó ele está com 200 ah na verdade o pai dele aqui o pai dele está com 120 piels então se eu colocar 130 vai ficar um pouquinho maior né Um pouquinho maior ah contêiner promo Ok 130 ele ficou um pouquinho maior posso aumentar também por aqui se eu quiser Ok bom vamos botar como é estava 130 por conta dessa limitação deu aquele problema clica aqui e ele vai resolver uma outra alternativa seria ou

você reduzir o tamanho da letra ou colocar uma limitação de caracteres aqui você pode colocar ó Max characters allowed máxima caracter permitido tem várias formas de resolver ó já assumiu o problema Beleza então essa é a primeira parte agora se eu voltar pro meu projeto e eu colocar por exemplo Ah esse cara aqui ó o último aqui ó o último já tá vamos pôr esse novo aqui ó esse aqui é é o vegetariana se o vegetariana ficar como verdadeiro então ele está em destaque agora ó vegetariana ele vai atualizar aqui tá ó lá já apareceu

instantaneamente entrou em destaque então o dono do estabelecimento ele vai no aplicativo ele Ah eu quero colocar isso aqui como eh promoção ele só clica no botão altera o banco de dados e automaticamente ele vai aparecer aqui beleza o próximo passo da aula é nós criarmos a outra lista aqui embaixo e essa lista será feita via chamada API que é uma abordagem um pouco diferente dessa que nós fizemos aqui por que via chamada api porque eu consigo eu consigo eh aplicar filtro filtros dinâmico né escrever parte da palavra e ele filtrar do jeito que tá

aqui apenas utilizando um backend Carry eu não consigo fazer e filtros dinâmicos Beleza agora criar a nossa segunda lista aquela que vai aparecer aqui embaixo então aqui dentro do nosso Cadê o nosso contêiner corpo eu tenho uma coluna e eu tenho o meu contêiner promo vamos recolhê-lo Ok nessa coluna aqui eu vou inserir um texto aqui está repare que ele ficou no centro bom em primeiro lugar eu vou clicar sobre a coluna eu vou definir que os elementos fiquem alinhados ah aliás aqui embaixo em idens Space eu quero que fique 24 e 24 pixels de

espaçamento entre os meus elementos Ok ã e vou clicar aqui ó em apply to start and end isso quer dizer que ele vai colocar o espaçamento também no começo e no fim ó Ok é totalmente digamos assim ah arbitrário né perfeito esse texto aqui eu vou eu quero que ele fique na verdade dentro de uma linha então a invés de de eu deletar o texto colocar uma linha e colocar o texto Dentro da linha eu vou clicar com o botão direito e vou clicar em wraap Widget isso vai envolver esse elemento em uma linha aqui

está agora nesse elemento de texto eu vou escrever produtos pro produtos ótimo e aqui eu vou colocar um tema esse pode ser esse title Lord Ok e vamos deixar aqui semibold que é e assim eu acho que tá bom agora aqui embaixo eu preciso colocar um uma list View aqui embaixo Então vamos clicar aqui vamos colocar uma list viw e essa minha list viw Ela será de fato uma list viw agora na vertical perceba que essa list viil está com a propriedade de expansão essa aqui ó marcada e deverá ficar assim você não pode clicar

aqui nem aqui porque nós iremos fazer com que essa coluna seja rolável E mais uma vez se ativil tiver expandida e a coluna rolável vai dar um erro de layout Ótimo então essa minha list View aqui dentro eu vou construir a mesma coisa que eu fiz aqui porém de uma forma diferente vou clicar sobre list View e vou clicar aqui um contêiner Então tem um contêiner dentro da list viw esse contêiner que eu vou chamar também de CTN lunche CTN lunche mas eu já tenho um esse vai ser CTN lunche ok ele ele aceitou com

o mesmo nome Ah eu acho que eu não tinha um CTM Ah era CTN promo Ok CTN lanche então aqui ficará o lanche vai ser exatamente vamos seguir exatamente a mesma lógica eu começo então colocando uma linha aqui tá porque desse lado eu vou colocar uma imagem então o tamanho desse contêiner aqui Ah aqui está com 100 pixels um tamanho interessante pode ser 100 pixels mesmo para esse contêiner sem pixels ã de altura e aqui na largura né ele independentemente do valor que eu colocar aqui ele sempre vai se expandir porque está dentro de uma

list viw mas a altura 100 pixels eu acho que está OK Então dentro dessa linha eu coloco uma imagem Aqui está a imagem ótimo essa imagem eu vou dizer que ela vai ter também ah 100 pixels de largura e 100 pixels de altura porque eu quero que ela fique quadrada Já que as minhas imagens do banco de dados são quadradas e agora dentro dessa minha linha eu coloco uma coluna então eu tenho a coluna do lado da imagem essa coluna eu vou clicar aqui para se expandir ela se expande no eixo principal que é a

horizontal agora dentro dessa coluna eu posso colocar a as informações do meu do meu lanche então na coluna aqui embaixo eu vou definir já primeiro lugar ã um espaçamento de quantos pixels deixa eu ver uma quantidade de pixels pode ser quatro mesmo então Quatro pixels aqui deixa eu clicar aqui quatro pixels de espaçamento beleza na minha coluna e o paden também vou colocar um paden de quatro pixels assim ou oito pixels melhor para que não fique tudo grudado e dentro da minha coluna agora eu coloco elemento de texto poss pode ser esse texto aqui vou

clicar sobre a coluna e vou colocar aqui esse elemento de texto eu vou clicar sobre ele e eu vou escrever por exemplo ah pizza calabresa algo nesse sentido pizza calabresa aqui vai ficar o título né o título do elemento bom eu vou aqui embaixo escolher uma formatação pode ser essa mesmo Body porém eu vou colocar uma fonte de 14 vou deixar ele assim 500 ou posso colocar um tamanho 15 beleza não deixe também muito pesado aqui embaixo nessa coluna eu vou colocar um outro elemento de texto Ok esse elemento de texto vai ficar a descrição

do lanche que é são digamos muitos carac tá muitos caracteres E aí vamos testar uma coisa eu vou clicar aqui por exemplo nesse daqui vou copiar esse texto e vou colar aqui aqui ó nesse elemento de texto olha só o que aconteceu aconteceu isso daqui ele quebrou então eu posso clicar aqui tá para ele se expandir até onde pode até onde ele tem permissão vai até onde ele quiser e eu posso também colocar aqui nesse cara uma limitação de caracteres que é o que nós iremos fazer a a a a opção de limitar o caracter

ainda não aparece para mim por quê Porque esse valor aqui não é de uma variável quando for de uma variável vai aparecer aqui para mim e aí a gente vai limitar ali em 80 caracteres tá aí no olho você vai meio que medindo Então por enquanto eu vou deixar só um texto normal assim e finalmente eu vou colocar uma linha agora aqui embaixo Ora por eu coloquei uma linha aqui embaixo porque eu quero colocar um elemento aqui que seria o preço e aqui umas estrelinhas então eu vou colocar eu vou colocar Ah um texto aqui

nessa linha e eu vou colocar uma nova linha aqui dentro da linha por que uma linha dentro da linha porque agora nessa outra linha ela vai servir para acomodar as minhas estrelinhas que seri os meus ícones então se eu clicar sobre a primeira linha que seria essa linha aqui e clicar nessa propriedade repare que ele vai colocar um nessa ponta e um nessa ponta e dentro dessa linha eu coloco vários ícones então eu vou clicar aqui ó vou escrever ícone aqui está Vamos diminuir um pouquinho o tamanho dele podemos colocar por exemplo 16 pixels assim

ó 16 ficou muito pequeno né 18 acho que 18 tá bom e eu vou deixar isso aqui numa cor dourada pode ser esse warning vou clicar aqui e vou escrever Star de estrela beleza e aí eu posso clicar sobre esse ícone e duplicar duplica o ícone duplica o ícone duplica mais uma vez E mais uma vez Pronto agora sim temos aqui a nossa estrelinhas nessa ponta se eu clicar sobre a coluna principal e clicar nessa propriedade aqui ele vai prender aqui embaixo esse e esse vai prender lá em cima beleza perfeito e aqui eu quero

colocar o preço do produto ainda não tem o preço do produto vai vir de uma variável Mas o que eu posso fazer nesse momento é talvez aumentar aqui o tamanho do texto colocar uma fonte negrita e uma cor verde Talvez para deixar em destaque esse preto esse preço aliás ótimo agora eu preciso apenas aplicar aqui nessa minha list viw a minha consulta eu falei que seria via api Ok e será via api porque eu posso fazer um filtro dinâmico mas só pra gente testar vamos clicar aqui na list viw e fazer inicialmente a consulta da

forma que já fizemos antes que é através do suase e aqui repare que eu mudei o nome da minha tabela tava de produtos dois eu mudei para produtos para ficar igual a sua Mas é a mesma coisa então eu vou clicar aqui não tem filtro aqui não tem filtro nenhum então é só puxar da tabela produtos vou clicar em confirmar ótimo repare que houve aqui embaixo uma explosão Por que que houve essa explosão porque evidentemente eu vou ter V elementos nessa minha tabela nessa minha listw que não vão caber na tela então para isso eu

vou clicar na minha coluna principal que está dentro da coluna corpo e aqui embaixo vou marcar a opção scrollable Pronto agora minha coluna ela está rolável ok isso funcionará desde que você tenha feito exatamente como eu fiz aqui essas questões de Deão etc vou clicar sobre a minha list viw essa list viw aqui e aqui eu vou colocar um espaçamento de oito pixels entre os elementos para que não fiquem tão grudados ou 12 pixels tá melhor e finalmente vamos testar aqui vou clicar aqui já para ele abrir uma nova página ótimo ele vai então a

carregar tudo de novo né porque tá acabou já o tempo então vou dar um pause no vídeo e depois eu volto pessoal então ele carregou e funcionou perfeitamente olha só que legal a única coisa que nós não fizemos foi colocar aqui as informações referente a cada um desses negócios né desses Lanches mas não iremos fazer não porque essa consulta que eu fiz eu vou tirar ela daqui e iremos fazer a consulta via api tá era só para mostrar para você a construção dessa lvw então vou clicar aqui nessa l viw vou clicar aqui em em

back and carry e vou clicar aqui ó para remover ótimo ele removeu a consulta tá então finalizamos esse capítulo ou essa aula Independente de onde você esteja vendo se é no curso ou no YouTube e na próxima na próxima aula então iremos fazer a consulta via api é uma outra forma de fazer consultas que me dá muito mais flexibilidade tá iremos trabalhar com data types também que é um conceito poderosíssimo do flutterflow Vamos fazer uma chamada api agora vamos fazer uma consulta via chamada api como que funciona a chamada api no flutterflow clicando aqui nesse

ícone você tem acesso à suas apis no plano pago no plano gratuito do flutterflow você pode trabalhar com duas com dois end points de chamada api no plano pagos pode trabalhar com infinitos end points para esse caso o plano ainda gratuito funciona perfeitamente tá e tem algumas técnicas que você pode utilizar para criar apenas uma chamada api e deixar os valores todos dinâmicos E aí sim você consegue ter mais chamadas api mas iso é o assunto para outro vídeo bom clicando aqui em add Create api Call eu vou dar um nome para essa minha chamada

API de buscar Lanches muito bem o método eu tenho vários opções Vamos trabalhar com o get aqui no nosso flutter Flow o nosso suase na sua tabela Você vai clicar em API Docs E aqui nessa página você vai ter acesso aos end points da sua tabela você pode clicar aqui ó e escolher a opção Bash que é o que já está e aqui ó em cur você tem o seu endp então você vai selecionar até o nome da tabela então a minha tabela chama-se produtos o que está depois não é necessário você vai colar o

endp exatamente aqui e você pode já clicar em add Call para salvar uma outra informação importante que nós precisamos é o header o header seria uma espécie de autenticação para saber que você é você é isso aqui é o que você vai colocar api ke e a sua chave api repare que ele não mostra aqui a chave api você pode clicar aqui ó em show Keys e então você copia do API Key até o final sem pegar as aspas você copia isso daqui e então você cola aqui em header add header e você cola aqui

e agora você vai clicar em save bom se eu clicar agora em response text clicar em test ap Call perceba que ele já traz para mim todas os registros da minha tabela instantaneamente Isso aqui é uma resposta de uma chamada api toda a chamada api do floter flow do supabase aliás será uma lista O que que é uma lista são várias informações tá iguais ou ou iguais não de mesma natureza é uma lista e você identifica uma lista sempre com colchetes então tem o colchetes você sabe que é uma lista Você pode clicar sobre esse

resultado apertar control control a para selecionar todo mundo e aqui aqui na internet tem um site chamado Jason viewer você escreve lá Jason viwer P staco hu stack P hu só escrever no Google Jason viwer que já acha se eu vou clicar em texto e vou colar o resultado E aí quando eu clico aqui em viewer ele vai formatar para mim Então nesse caso eu tenho 10 registros do zero aqui até o o nove né quando eu abro eu tenho exatamente essas informações de cada um desses registros bom Como que eu faço então para pegar

isso daqui e colocar dentro da minha list viw a primeira coisa que eu preciso é de um criar um datatype um datatype é um modelo de dados é um tipo de dado que eu crio então eu vou criar um tipo de dado para armazenar esse tipo de informação aqui você vai clicar aqui ó em dat types aqui ó em datatypes vamos clicar em Create datatype você pode dar qualquer nome vamos chamar de produtos tá datatype chamado produtos vou escrever DT para ele saber que é um datatype para eu saber que é um datatype DT produtos

e agora nós vamos colocar os campos para esse der Type e esses campos tem que ser exatamente igual ao que estão aqui Ok então se eu colocar um campo ID aqui tem que ser escrito com o mesmo nome e o tipo de dado tem que ser igual então repare que o ID nesse caso aqui ó é um número inteiro tá é um número integer então aqui é um número clica em Create Vamos colocar um novo Campo o outro Campo que eu coloco é o campo nome produto eu não sou obrigado a colocar todos que que

estão na chamada api eu posso colocar apenas os que os que eu quiser da mesma forma que eu posso colocar Campos que não estão aqui o que eu não posso fazer é colocar Campos com o mesmo nome e tipos diferente aí vai dar erro não vai funcionar nada então por exemplo o campo nome produto eu vou escrever aqui ó nome nome underline produto Isso é uma string então não posso colocar um número inteiro por exemplo outro Campo que nós temos é o campo descrição Então esse campo também quero eu quero aproveitá-lo descricão sem acento sem

cedilha é uma string também o outro Campo que eu tenho é o campo destaque esse campo eu não não vou precisar para nada nesse caso eu tenho o campo categoria então aqui eu vou escrever categoria é uma string também e eu tenho o campo preço o campo preço eu escrevo preco sem cedilha e esse campo é um double atenção com isso é um double que é um número que tem vírgula número decimal sempre Double e por fim o campo imagem o campo imagem é uma string um texto Ok então eu acabei de criar um modelo

de dados chamado DT produtos que vai armazenar essas informações depois nós iremos acrescentar aqui alguns Campos que vai ser a quantidade o total pra gente fazer lá o carrinho de compra bom sempre que eu crio o modelo de dado ã Geralmente eu crio junto uma variável para armazenar esse modelo de dado aqui nesse caso não será necessário porque eu vou ah conectá-lo diretamente com a minha list viil então presta bem atenção agora no que vou fazer eu vou clicar sobre essa list viw e o resultado que antes viria de uma Carry agora ele virá de

uma chamada api Então antes ele buscava direto da na integração Nativa agora virá de uma chamada api e aqui aparecem as chamadas apis que eu tenho uma chamada api chamada buscar Lanches vou clicar em confirmar Pronto agora essa list viw ela já está invocando uma chamada api mas lembre-se que ainda ela não se repetiu aqui embaixo então aqui do lado em generate dynamic Children Vamos criar um nome vamos chamar isso aqui de LV de list viw itens aqui em value eu vou puxar o valor que está aqui ó isso aqui ó é a minha chamada

api que está agora associada a essa buscar Lanches respon a resposta da chamada api eu vou clicar aqui e aqui aqui aqui eu escolho Jon bar e aqui embaixo eu vou escol opção tope ou seja o resultado da minha chamada ap eu vou converter em um datatype qualype o datatype d produtos Isso é uma lista confirmar e salvar agora ele se repetiu e perceba que se eu clicar aqui nesse texto agora e escolher aqui o valor dinâmico LV itens isso aqui é o meu é o que tá se repetindo é a minha chamada api esse

LV itens eu tenho a opção dera structor Field que é o meu dera Type e aqui eu tenho os campos da minha chamada api que eu cadastrei para esse caso eu quero o nome do produto Vamos colocar um valor padrão de var aqui eu quero a descrição então clica aqui clica aqui descrição Ok e para descrição Vamos colocar aqui embaixo agora número máximo de caracteres 80 para Não explodir lembre-se para Não explodir aqui aqui eu vou colocar o valor o preço o preço a mesma coisa eu vou clicar aqui aqui vamos escolher aqui o preço

ó preço como é um valor numérico ele dá a opção de eu formatar então eu vou escolher aqui Custom que é personalizado # v0.00 que é formatar com duas casas decimais aqui PTBR que é o Brasil displ as currency mostrar como moeda a moeda será essa aqui e aqui um valor padrão confirmar ótimo é isso aqui perfeito vamos clicar aqui agora para dar um Instant Reload e ver a a resposta Ah faltou a imagem então a imagem você pode clicar aqui antes deixa eu pegar a imagem padrão aqui ó pegar imagem padrão copiar aqui na

imagem tem um segredinho pessoal quando eu clico na imagem aqui marcar isso aqui perceba que ele quer um tipo image paf e aqui ó nós não temos a opção image paf seria a imagem não deixa eu selecionar que que eu faço nesse caso então aqui ó antes de eu clicar aqui então você vai clicar aqui ó vamos fechar Você vai clicar deixa eu cancelar Você vai clicar aqui antes de clicar em aqui você vai clicar em combine text que seria combinar texto aqui eu posso combinar textos agora ele ele espera uma string então se eu

clico aqui ó agora ele espera uma string eu posso buscar a minha imagem daqui ó que agora ele aceita uma string imagem só que eu não vou ah aqui vou colocar minha imagem padrão tá só que eu não vou simplesmente juntar combinar o texto com ninguém né era só um artifício que eu utilizei para ele aceitar então aqui nós teremos já a resposta vamos esperar ele carregar Aqui já carregou Inclusive a imagem não aparece porque eu não tinha atualizado até aquele momento né então vou clicar aqui ele vai atualizar e esse texto aqui eu posso

deixar ele um pouquinho mais leve clicando sobre ele aqui ó em peso da fonte 300 beleza pronto pessoal aqui está então aqui está os nossos produtos Ah temos um pequeno problema que é o seguinte a minha list vi tá rolável e a minha coluna também isso pode gerar um grande problema se você jogar lá para cima e agora eu não consigo mais rolar a minha coluna porque eu estou rolando a list como que eu resolvo isso claro com o mouse é uma coisa né mas com o dedo é outra clica sobre a sua list viw

clica em propriedades e aqui ó em primaries desmarca porque a rolagem principal não é da viw é da coluna é a coluna que tem que rolar não é Lil Beleza agora na próxima aula ou no próximo capítulo nós iremos aprender a escrever um texto aqui e ele fazer a procura com base no em algum Campo aqui beleza isso então na próxima aula ou no próximo capítulo bom como que funciona um filtro em uma chamada api no supabase especificamente aqui em chamadas api ã quando eu clico aqui ó em Carry parameters eu posso adicionar parâmetros e

aqui em name eu vou colocar exatamente o campo que eu quero utilizar como filtro bom eu posso utilizar qualquer Campo vamos utilizar por exemplo o campo ID então se eu escrever ID aqui ó valor específico Vamos colocar uma string eu escrevo o seguinte ó a eq que seria igual a ponto um clicar em save E aí quando eu executo ele vai filtrar aquilo cujo ID é igual a 1 bom eu não quero filtrar pelo id eu quero filtrar na verdade pelo pela descrição então aqui eu coloco o descri Clic e aqui eu quero filtrar por

parte da palavra para filtrar por parte da palavra eu coloco o seguinte e like ou I ponto i ponto isso é o operador E aí eu coloco percentual hã hambúrguer amb apenas amb percentual amb e percentual então percentual antes e depois quer dizer que ele vai me trazer tudo que contém a palavra Hambúrger Independente se está no começo ou no fim se eu clicar aqui e testar aqui está Então tudo cuja descrição contém a palavra hambúrguer e ele traz para mim ok tudo cuja descrição contém hambúrguer cinco cinco coisas ele trouxe se eu escrever pizza

aqui clicar em save e executar vai trazer tudo cuja descrição contém a palavra pizza aparentemente nós não temos nenhuma nada aqui em termos de descrição né com a palavra pizza bom ah deixa eu escrever por exemplo aqui a a frango para ver se tá funcionando frango frango Ok clicar em save e executar Ótimo então tudo que tem descrição a palavra frango ele vai trazer tá agora eu preciso transformar isso em uma variável então vou clicar em verbos e vou criar uma variável que vou chamar por exemplo de descrição ou palavra tanto faz o nome aqui

aqui tanto faz o nome que você vai dar para ele vou chamar de descrição essa variável é uma string Ok e aqui vou deixar em branco e agora no meu parâmetro o valor não é específico esse valor ele é de uma variável da variável descrição isso quer dizer que quando eu chamar essa chamada api quando eu executar eu preciso passar pra variável descrição um valor Ok como que eu faço isso aqui na minha list viw aqui em list viw clicando aqui ó em back and carry eu tenho a minha chamada api Lembra agora eu posso

adicionar uma variável e aqui na variável descrição é onde vou passar o valor valor a ser filtrado esse valor será proveniente desse widget aqui ó desse test Field mas vou cancelar Porque antes eu preciso criar uma variável que vai armazenar esse valor que está nesse test Field eu não quero que ele seja executado na medida em que eu digito eu quero que ele seja executado sempre que eu D um enter porque sen não eu posso acabar criando aí um problema né imagine a palavra frango tem cinco letras imagine que para cada letra que eu digito

ele vai fazer uma busca isso pode ser desnecessário pode até me custar algum me custar alguma coisa em termos de performance deixar aplicativo lento então eu vou criar uma variável clicando aqui ó você clica fora clica aqui e vamos criar uma variável chamada ah palavra mesmo tanto faz o nome e essa variável ela vai armazenar ela vai armazenar o valor que eu digitar aqui então sempre que eu digit tá uma coisa aqui eu vou clicar aqui ó ó Actions clicando em Open eu tenho aqui agora ações que eu posso atribuir a esse elemento de texto

a esse test Field essa ação pode ser disparada no on submit Ou seja quando de enter digitou de enter on Change que é enquanto estou digitando então para cada letra ele faz uma chamada api ou quando o foco muda ou seja quando eu seleciono ele clicar em onsubmit então quando eu digitar e der um enter a ação que será executada será simplesmente para atualizar essa variável então aqui vou escrever o seguinte update e aqui embaixo eu tenho a opção update page state vou clicar aqui e a minha variável que eu criei já está aqui então

essa variável eu vou clicar aqui ó em set value Vou definir para ela um valor Qual o valor que eu vou que eu vou colocar na variável Olha vou clicar aqui e o valor que vai ser atribuído à variável é o valor que está no widget state TXT procurar é só isso então quando eu digitar alguma coisa aqui e der um enter ele vai pegar o texto que está aqui e vai colocar na variável palavra agora o que está na variável palavra eu vou utilizar para filtrar a minha api aqui em set additional variable no

argumento descrição eu vou colocar a minha variável palavra mas lembre-se que eu não posso apenas colocar o nome da variável que eu estou digitando eu tenho que pôr o i like então aqui em combine text o primeiro texto que eu vou escrever vai ser I like I likee pon percentual vou adicionar um texto e esse texto finalmente é o que está na variável então page state palavra e por fim eu adiciono um outro texto que é um percentual e assim eu vou passar essa conjunção de palavras como parâmetro na variável na api ele vai aplicar

o filtro corretamente vou esperar aqui uns TR segundinhos Ah aqui ele já acabou inclusive vou clicar aqui para ele abrir uma outra tela para mim então aqui já expirou bom como ele já expirou vamos esperar aqui mais dois TR minutinhos pra gente poder testar isso daqui ok ele carregou Então vamos ter eu vou escrever essa palavra aqui ó verdadeiros então eu vou escrever aqui verdadeiros e vou dar um enter Ok funcionou perfeitamente Ele trouxe Verdadeiros Se eu apagar e der um enter ele vai trazer todo mundo lembre-se estou filando pela descrição e não pelo nome

ok então se eu escrever Hamburger ele deverá filtrar por Hamburger ó não tem nada porque faltou um acento então isso aqui ele está considerando ainda Ok então tá funcionando então aqui ele trouxe os nossos hambúrgueres beleza pessoal então acabamos de aprender como fazer um filtro por parte da palavra e assim o nosso aplicativo Já está criando o cara a primeira parte nós finalizamos Lembrando que lá no acelerador low code o nosso programa nosso curso completo de criação de aplicativos o curso mais avançado e com dados do Brasil sobre o tema você aprende tudo e eu

disse absolutamente tudo sobre as apis dos P base a fazer filtro a fazer filtro por pal por parte da palavra a fazer Contagem relatório soma funções enfim absolutamente tudo aqui nós trouxemos apenas a algo básico para quem está iniciando o que eu preciso fazer agora é criar uma página para que quando eu clico sobre um desses elementos ele avança para essa outra página e eu vou ter ali ah informações desse elemento para poder salvar isso em uma sacola adicionar ao carrinho Essa é a próxima parte do nosso projeto então faremos isso no próximo capítulo Ou

na próxima aula Vamos criar agora a página detalhes do pedido então eu vou clicar aqui ó vamos clicar aqui em page mesmo Create Blank vamos chamar essa página de detalhes Create page ótimo em primeiro lugar essa app bar eu vou deletar em segundo lugar eu vou deletar essa coluna também porque como eu disse para vocês no começo da aula eu gosto de começar com um contêiner Então esse contêiner que está aqui que é o nosso contêiner principal até nome alo como CTN cpau eu vou deixá-lo a sua largura infinita e a sua altura também a

largura máxima vou limitar em 500 pixs dentro dessiner Eu quero eu vou colocar uma coluna Aqui está a minha coluna e essa coluna eu já vou colocar um pading aqui de 16 pixels 16 piels ok e aqui embaixo em iden spacing vou colocar 24 já para que os elementos dentro dela fiquem espaçados em 24 pixels e vou clicar aqui para aplicar no começo e no fim aliás 24 não vamos colocar 16 bom então nessa coluna A primeira coisa que eu faço é colocar uma linha ah dentro da coluna né aqui ó dentro da coluna então

aqui eu quero colocar uma linha nessa linha eu vou colocar Inicialmente um ícone na parte da esquerda E depois um texto bom esse ícone Vamos colocar como 36 pixels ele será para voltar vou escrever Back e vamos pintá-lo de vermelho assim ó esse texto aqui eu vou escrever o seguinte eh detalhes do pedido você pode melhorar isso se você quiser e esse texto vamos expandi-lo assim e nesse texto Vamos colocar 36 pixels na direita para compensar esse ícone e vamos agora caliz muito bem agora então essa minha linha que seria a linha cabeçalho então linha

cabeçalho finalizada nessa coluna agora eu vou colocar mais um elemento que é um contêiner Aqui está um elemento contêiner eu vou expandi-lo assim também aqui na wif vou deixar ele semi expandido isso quer dizer que ele vai se expandir na medida em que ele os elementos aqui dentro forem empurrando ele para fora ele vai se expandir isso aqui não isso aqui quer dizer que ele vai até lá embaixo Independente se precisar ou se não precisar vou deixar assim bom e vou colocar nessa minha linha um outro ele um outro contêiner ok Aqui está esse outro

contêiner também vou deixar assim comif expandido esse coner que eu coloquei por último eu vou chamar de CTN rodapé CTN rodapé ele vai ter um tamanho que eu vou ainda configurar vou clicar sobre esse contêiner mesmo vou deixar uma corzinha assim depois a gente muda vou clicar sobre a coluna e vou clicar aqui ó Nessa propriedade para que ele prenda lá embaixo tá o [Música] nosso contêiner rodapé deixa eu ver aqui está o nosso outro contêiner Ele está aqui embaixo deixa eu clicar na coluna mais uma vez e clicar aqui aqui em cima depois eu

depois eu faço isso agora esse contêiner aqui que eu coloquei no meio eu vou chamar de CTN corpo que aqui ficará o corpo tá o corpo do do Nossa da nossa página né vamos dizer assim nesse contêiner corpo eu vou colocar dentro dele uma coluna Ok e essa essa coluna eu vou colocar aqui as informações do nosso do nosso nosso lanche bom inicialmente eu vou colocar uma linha aqui em cima e dentro dessa linha uma imagem eu coloco a linha né Porque daí a minha imagem fica no centro orha tivemos um problema aqui ah esse

contêiner corpo eu vou clicar aqui aí eu consigo aumentar assim um pouquinho o tamanho dele tá vou clicar aqui e vou clicar aqui ó em altura infinita ótimo era isso que eu queria fazer então agora o nosso contêiner corpo está com uma altura infinita Quando eu digo altura infinita ele tá se expandindo né tá com essa propriedade aqui sem expandida até onde ele consegue bom então se eu clicar nessa linha aqui eu posso agora clicar aqui para deixar a imagem no centro beleza essa coluna que está aqui eu vou marcar já essa opção aqui ó

scrollable para que ela fique rolável caso inscrição seja muito longa e assim por diante mas lembre-se que o nosso contêiner tem que estar com essa opção marcada ou com essa Aliás nem com essa nosso contêiner corpo ele tem que estar com essa opção aqui essa do Meio marcada para que eu possa deixar minha coluna aqui rolável muito bem a minha coluna que está dentro do meu contêiner corpo eu coloco agora uma nova linha ficou grudado aqui então vou clicar na coluna eu vou colocar um espaçamento aqui por exemplo de 24 pixels também então nessa linha

aqui eu coloco agora um texto e esse texto vai armazenar o título do lanche então aqui vamos deixar por exemplo esse Body ah display display small Hum muito grande mas vamos diminuir a fonte para a 24 e vamos colocar mais uma vez uma linha então nessa coluna que está dentro do contêiner corpo mais uma linha e dentro dessa linha colocamos um texto que vai armazenar a descrição Então esse texto eu posso clicar aqui ó já para ele se expandir caso ele seja muito grande Ok perfeito agora aqui nesse contêiner de baixo vamos montar o nosso

resumo então eu já vou clicar aqui e tirar essa cor clicar em Clear color nesse contêiner rodapé eu insiro inicialmente uma coluna beleza nessa coluna eu vou colocar um elemento chamado divider que é esse cara aqui ó divider ele é um traço apenas vou clicar sobre ele Vamos definir uma cor para ele uma cor exess secondary text por exemplo e o estilo Vamos colocar isso aqui ó dashed é esse tracinho bom essa coluna de vi coluna aqui vamos colocar por exemplo o pixs de espaçamento entre os elementos agora eu insiro uma linha nessa linha eu

insiro um texto e também um outro texto vou clicar sobre a linha e vou clicar aqui ó para que esses elementos fiquem espaçados bom esse texto que está aqui eu vou escrever o seguinte ó valor uni unitário e aqui vou colocar o preço o preço do produto eu posso até inclusive formatar já colocando uma fonte negrita 500 e aqui 16 pixels e também eu posso colocar uma cor verde bom Vamos colocar esse divider Mais uma vez vou clicar sobre ele botão direito e vamos duplicar duplicate e agora eu clico sobre ele e arrasto para baixo

aqui ó tá você pode tá por aqui também clicando por aqui também muito bem dentro dessa coluna que está dentro do rodapé eu vou colocar um elemento chamado Counter Controller aqui está Cadê Counter Cadê o nosso Counter aqui ó Counter Button aqui está esse Counter Controller o Counter Button vamos clicar aqui na sua largura para para que também fique aqui ó with desse jeito perfeito isso vai servir para eu selecionar a quantidade de itens que eu quero e para finalizar eu vou colocar aqui embaixo um botão mas já Observe que o meu meu roda meu

contêiner não vai suportar esse tamanho então eu já posso aumentar aqui ó o tamanho dele para que ele aguente né então nessa coluna eu vou colocar um contêiner esse botão que eu vou fazer aqui vai ser um contêiner eu vou montar através de um contêiner aqui está esse contêiner ele tem 100 pixels por isso que explodiu Vamos colocar 50 pixels de altura no contêiner agora ele ele comportou muito bem vamos clicar nesse contêiner aqui em wif vamos pintar esse contêiner com a nossa cor secondary vamos colocar aqui uma borda de 16 pixels raio de borda

de 16 pixs muito bem eu posso até aumentar esse R de borda colocar 24 para ficar mais Redondo ainda eu posso utilizar essa opção chamada Box Shadow para que ele crie uma espécie de sombreamento você pode controlar aqui o nível desse sombreamento por aqui para mim isso aqui já tá ótimo agora dentro desse eu coloco uma linha nesse contêiner ainda Aliás na linha que eu coloquei dentro do contêiner vou colocar um espaçamento aqui de oits aqui e o pi aqui para não ficar grudado e finalmente dentro dessa linha eu coloco dois texos esse texto aqui

e um out texto aqui vouli sobre a linha e vou ccar aqui perfeito aqui eu vou escrever adicionar adicionar e aqui ficará o valor total que nós iremos colocar depois muito bem Ah vou clicar sobre essa linha e vou aumentar esse espaçamento aqui ó aqui de 16 pixels aqui também 16 pixels perfeito então nós já temos Ah esse Counter Controller Vamos colocar também 24 pixels de arredondamento para que fique padrão então cê a bord aqui ó border radius 24 Opa 24 para que fique igual a nossa nosso botão Então é isso pessoal é isso é

exatamente isso que nós precisamos esse botão aqui ó ó esse ícone vamos clicar aqui ó em ações e aqui em add Action Vamos ouvir pegar a opção navigate it back para que ele volte pra tela onde ele estava agora o próximo passo é aqui na minha homepage quando eu clicar sobre qualquer item desse eu quero que ele Navegue para outra página e passe as informações que nós temos aqui pra outra página para Finalmente nós termos as informações na outra página faremos isso na próxima aula ou no próximo capítulo bom agora quando eu clicar sobre essa

list viw eu quero que ele navegue de página para outra página e nessa outra página nós tenhamos aqui a informações a primeira coisa que eu preciso é criar nessa página aqui de destino parâmetros parâmetros são informações que serão passadas para essa página então o que que eu preciso eu preciso da imagem então eu vcar aqui em page parameters e Vamos definir um parâmetro chamado imagem imagem que será do tipo string eu preciso também do nome do produto Então vamos criar um parâmetro chamado nome produto opa não pode ter underline Então tira o underline nome produto

será também uma string eu preciso de um parâmetro também que será a descrição do produto então aqui des crição também será a uma string e preciso de um valor de um parâmetro que será o valor unitário do produto então vamos clicar aqui ai não acredito eu não salvei não tem problema imagem que será uma descrição depois eu vou clicar aqui em nome do produto que é uma string ah descrição que será uma string o valor do produto ou preço né do produto que é um Double o preço é um double que tem número tem a

vírgula aliás vou confirmar agora salvei Então aqui estão os parâmetros e vou colocar também o ID tá caso é importante a gente sempre ter o ID do produto que é um número inteiro muito bem então aqui ó nessa imagem eu vou colocar a imagem que vier como parâmetro Como que eu faço isso vou clicar sobre a imagem aqui ó ah vou clicar aqui aqui em F lembre-se que o meu parâmetro imagem é um texto uma string ele não aceita Então aquela técnica que eu já falei para você combine Text e aqui a gente consegue agora

pegar a imagem Ah se não for passado nenhuma imagem preciso de um valor padrão né Eu acho que inclusive eu achei que eu tinha salvo mas não tinha pegar aqui ó então sempre tenha isso aqui em mente senão vai dar uma tela vermelha e você não vai saber o Onde tá o problema bom Aqui nós temos o nome do produto Então vamos clicar aqui ó e do parâmetro de página nome do produto valorzinho padrão Ok a mesma coisa paraa descrição então vou clicar aqui descrição Ok para esse caso específico aqui ó em Line heate Vamos

colocar 1.3 isso quer dizer que a linha será 30% maior do que que a letra isso vai fazer vai causar um espaçamento entre a linha entre as as linhas tá ótimo e Aqui nós temos o valor unitário Então vamos clicar aqui preço vamos formatar isso com aquele jeito que nós já conhecemos # vírgula # h0.00 aqui PT under B r displ currency r espaço valor padrão zer confirmar perfeito perfeito ah e aqui eu o total n isso será feit depois B agora quando eucar aqui nessa list viw então Nav de elementos e esse meu primeiro

minha primeira list onde ela aqui no contêiner promo nós temos a minha list viw e o primeiro elemento que tá dentro da list viw é o contêiner lunche é esse contêiner lunche que se repete Então nesse coner lanche aqui eu vou clicar em ações Open add Action ou seja onap então aqui no onap é no Clique então add Action Eu quero uma ação de Navegar para eu quero navegar pra página detalhes ok bom na página detalhes repare que tenho parâmetros para para serem passados parâmetro imagem vem da onde ora Você vai clicar aqui e aqui

ó em produtos Row que é minha consulta eu tenho a minha imagem que eu passo como parâmetro o próximo parâmetro é o nome e esse nome também vem daqui ó produtos Row nome produto eu posso inclusive clicar aqui e copiar essa variável e depois a descrição eu posso simplesmente clicar aqui e colar e aqui eu só altero para descrição Ok o próximo parâmetro é o preço então mesma coisa vou clicar aqui e vou colar e aí eu altero aqui para preço valor padrão zero e não temos acho que não temos Ah o id o id

também eu posso clicar aqui vou passar o ID zero perfeito se eu testar clicando aqui ele deverá funcionar mas temos uma outra list aqui embaixo Então vamos clicar aqui na list de baixo Vamos abrir o elemento que se repete a o coner lanche vamos clicar em ações Open add Action Navigate to Navegue para a página homepage e vamos passar também os parâmetros né aliás que aconteceu aqui né eu mandei Navegar pra página homepage não é a página homepage é a página detalhes e os parâmetros são os mesmos Então vamos passar tudo de volta a imagem

repare que a imagem aqui ó no LV ID que seriam os itens de struct Field imagem aqui eu coloco aquela imagem padrão já já tá copiada aí o nome bom o nome LV idens vamos pegar aqui de structure Field e o nome produto e vou clicar aqui ó vou confirmar clica aqui e copia a variável o próximo descrição a mesma coisa clica aqui ó em past descrição passa um novo parâmetro preço o preço Cola altera apenas para preço aqui zero e por fim nós temos o ID também clica aqui [Música] ah Cola ID zero confirmar

Maravilha isso deverá funcionar agora acabou Mais uma vez vou clicar então em New session para fazer para carregar de novo e assim que ele carregar a gente testa aqui bom carregou vamos fazer o primeiro teste vou clicar aqui no clássico reinventado Olha só funcionou muito bem aqui está a descrição o clássico reinventado eu poderia até colocar a categoria aqui né não coloquei a categoria ã inclusive é interessante que eu coloque a categoria aqui ok aqui temos isso aqui funcionando vamos voltar aqui vamos clicar aqui em frango crocante agora aqui na de baixo funcionou também perfeitamente

Vamos colocar a categoria então isso não tinha no original vamos acrescentar aqui então essa linha vou duplicar ã mas ele ficou muito distante da primeira Hum porque minha coluna está com 24 Vamos colocar 16 de espaçamento ok aqui eu vou colocar um pouco menos não precisa ser tão grande assim 16 o tamanho perfeito aqui será a categoria Então vou criar um parâmetro de página chamado categoria que será também uma string Vou salvar e aqui eu vou colocar a categoria Ah mas não a categoria tá aqui ó parâmetro de página Ok categoria e igualmente né deu

dois erros por porque quando eu passo agora esses parâmetros aqui ó eu preciso passar a categoria é obrigatório então aqui em CTM lanche vamos arrumar para passar também a categoria agora então aqui está produtos Row categoria E aqui também nesse CTN lanche que é o da vertical a mesma coisa P categoria Ah aqui ó itens data structure Field categoria Pronto agora a categoria está sendo passada também outro ajuste que eu tenho que fazer é o seguinte aqui na minha nessa tela esse count Controller ele tem que ter um valor mínimo de um então não pode

ser zero e a contagem inicia no um valor máximo pode deixar em branco ou você pode limitar também se você quiser então é isso pessoal na próxima aula nós iremos aprender a como adicionar itens à sacola Então chegou aqui vou clicar vou escolher um um novo valor vou clicar aqui ele vai adicionar esse valor a sacola Cola tá isso será feito na aula que vem bom já estamos nos aproximando no final do nosso projeto e agora vamos aprender a lógica para adicionar itens a sacola então nessa página de detalhes eu vou criar uma variável aqui

em local page state variables aqui você vai clicar fora e vai clicar aqui vamos adicionar uma variável que nós iremos chamar de Total Ok ah na verdade vamos chamar essa variável de var total porque nós não podemos nos confundir com nomes de variáveis Ok var Total hum não melhor melhor Total item pronto Total item para eu saber que esse total é o total desse item e essa variável será um número inteiro não número inteiro não um Ok um double Por que um double pessoal porque esse Total item ele vai armazenar o valor em reais Total

Então se custa 10,99 e eu comprei 3 isso vai dar 30 V alguma coisa ou 31 V alguma coisa então número com vírgula por isso que é um double bom quando eu clicar nesse botão nesse botão não nesse contêiner que na verdade ele é um botão né né então esse aqui dentro de contêiner rodapé Eu tenho esse contêiner aqui ó você pode nomeá-lo inclusive como CTN botão então quando eu clicar nesse CTN botão eu quero que ele Atualize o valor dessa variável aqui ó pro valor que corresponda à multiplicação desse número por esse número que

é o total do item então eu vou clicar em CTN botão vou clicar em Open vou clicar em add Action como que eu atualizo uma variável update update page state essa variável é uma variável de página ou seja ela só existe e só é visível e só é acessível dentro dessa página por isso que é um page state vou clicar em addfield e essa aqui é a variável Total item vou clicar aqui ó em set value Qual que é o valor dessa variável bom o valor dessa variável é a multiplicação do da quantidade de itens

que vai est no count Controller pelo preço do produto Como que eu faço um cálculo dentro do flutter Flow aqui cálculo simples tem várias formas de fazer cálculo para esse caso cálculo simples vamos escolher a opção cor Expression e aqui eu escrevo Qual que é o meu cálculo mas eu preciso de dois parâmetros para realizar esse cálculo o primeiro parâmetro é o parâmetro preço e o preço é um double e da onde que vem o preço bom o preço vem aqui ó do parâmetro de página o preço já foi passado pra página quando ela foi

carregada eu preciso de um outro parâmetro que é a quantidade Então eu tenho o preço e vou criar um parâmetro chamado quantidade a quantidade é um número inteiro 1 2 3 da onde que vem esse valor bom a quantidade ela vem daqui ó não vem de parâmetro de página ela vem do widget state ou seja ela vem do count Controller que é aquele mais e menos que a pessoa fica clicando então eu tenho o preço eu tenho a quantidade tendo o preço e tendo a quantidade aqui ó em Expression preço vezes CTD isso já vai

retornar para mim Ah isso aqui já vai retornar para mim o valor total item vou clicar em checar erros não teve erro então tá certo a minha conta o valor padrão zero então muito bem eu acabei de atualizar a minha variável Total item ela é o resultado da multiplicação entre o preço do produto do lanche vezes a quantidade que foi selecionada pelo usuário confirmar muito bem então aqui ó já nesse elemento aqui de texto eu já vou colocar esse valor que é o total item vou clicar aqui aqui ó em agora page state eu posso

pegar o total item vamos formatar isso daqui ó vamos formatar para formato que estamos utilizando desde o início desse curso # ví ví 0.00 PT under BR display as currency mostre isso como moeda espaço ok aqui zero perfeito temos já o total agora quando eu clicar nesse botão nesse contêiner ele atualizou a variável muito bem hum ah na verdade eu fiz errado na verdade eu fiz errado essa variável deve ser atualizada quando o cara clicar aqui ó no count Controller Ok quando ele clicar nesse count ã Controller ele vai clicando e ele vai atualizando deixa

eu ver se realmente é isso deixa eu parar um pouquinho para pensar OK É isso mesmo aqui eu vi havia feito de uma forma diferente da outra vez e acabei me confundindo mas aqui funciona também então sempre que ah eu clicar vamos lá nesse meu botão aqui na verdade quando eu clicar nesse botão de adicionar hum agora que eu entendi quando eu clicar no botão a nesse botão adicionar ele precisa adicionar o total geral na sacola e quando eu clico no count Controller é que ele tem que atualizar o Total Geral Então na verdade o

que eu fiz aqui é o seguinte vou clicar em CN botão vou clicar aqui e essa ação Que Nós criamos de atualizar o item Total item vamos copiar ó Cut copiar e quando eu clicar no count Controller é que eu tenho que atualizar V cliar aqui Open clicar em P pronto É só isso apenas coloquei no lugar errado então essa ação de fazer o cálculo disso aqui vezes o número que tá aqui esse cálculo deve ser atualizado sempre que eu clicar no Controller Ok e aqui ele vai continu exibindo normalmente perfeito eu quero testar isso

aqui para ver se ele já tá funcionando feito isso quando eu clicar no botão verde Aí sim é que ele vai colocar tudo isso em uma sacola vamos lá então eu vou clicar aqui no clássico reinventado aqui está zer 0 Ok [Música] Hum já identificamos um problema porque aqui ele deveria estar R 39 ok porque é esse valor aqui então quando eu clico aqui agora ele atualiza ó perfeito agora ele atualizou Por que que veio 0 né então quando eu venho aqui ó ele vem 0 porque essa variável ela só é atualizada quando eu clico

nesse botão Então ela nasce valendo zero como eu não cliquei nesse botão ainda então essa variável ela está digamos assim zerada Então o que eu posso fazer é o seguinte sempre que eu carregar essa página então aqui ó eu tenho esse essa ação clicando sobre a página eu tenho essa ação aqui ó de on page load então quando a página carregar eu já vou atualizar a variável a variável update update page state então eu quero atualizar a variável Total item para o valor que é o valor unitário do lanche aqui ó tá no parâmetro de

página pronto então quando eu entrar na página o valor unitário do lanche essa variável já vai assumir o valor do lanche se lanche vale R 30 Então essa variável já vai ter 30 e aí na medida que eu for clicando aqui é que ela vai se atualizando clicar em Reload pronto 39,999 aqui agora sim ele vai se atualizando perfeito ok uma vez que eu tenho agora todas as informações que eu preciso eu preciso agora eu posso agora colocar isso e na sacola então quando clicar no botão adicionar vamos pegar informação que temos e colocar na

sacola finalmente então isso faremos na próxima aula ou no próximo capítulo bom Agora sim vamos entender como funciona finalmente a lógica da sacola então na minha sacola eu preciso de mais duas [Música] ã informações Eu preciso da quantidade de cada item porque quando aparecer a minha sacola é que eu não tenho aqui agora ah pronto para mostrar para você mas na minha sacola quando eu aparecia a lista de pedidos eu quero que apareça a quantidade de itens que eu pedi por exemplo o Big Mac Ah eu pedi três Big macs e pedi quatro pizzas então

para cada item eu pedi uma quantidade certo e também preciso saber qual que foi o total que aquele item unitário deu então se eu pedir três big max esses três big max eh deram quanto em reais e as minhas quatro pizzas deram quanto em reais então eu tenho que ter o o total de itens e o valor em reais desses itens então aqui ó no nosso no nosso derat Type Vamos criar mais dois Campos um deles vai ser a quantidade então a quantidade que é um número inteiro e o total esse total é um double

que é o número que pode ter vírgulas e precisamos também agora criar uma variável tá Ah uma variável uma appstate Na verdade dois appstate então clicando aqui ó nós podemos criar app States que são a mesma são variáveis igual page state a diferença que essas variáveis aqui appstate elas são visíveis em todo aplicativo elas são acessíveis em todo aplicativo a primeira variável que eu preciso é uma variável que vai me dar o Total Geral da sacola Então tudo no final resultou em quantos quanto que vou pagar passar o cartão não o total por item Total

Geral que será uma Double e esse valor eu vou clicar aqui persist para ele manter Então se usuário Sair do aplicativo e voltar vai salvo o valor total geral e uma outra vari preciso é a variável que vai armazenar os itens na sacola Ok vou chamar de itens sacola Então essa variável é do tipo dat Type Então essa variável é a variável que é um datatype do tipo DT produtos é uma lista porque dentro dessa variável item sacola eu vou ter vários itens de produtos Ok e o valor também será persistente persistent muito bem então

quando eu clicar no botão adicionar aqui ó no botão adicionar então vou clicar nesse nesse cont vim por aqui ó nesse etn botão quando eu clicar nesse cara eu quero então adicionar então vou clicar aqui na minha ação update update appstate appstate então primeiro eu vou atualizar a variável item sacola tem que ser nessa ordem não pode ser invertido você vai entender porquê na variável item sacola eu vou clicar aqui ó em add to list eu quero adicionar um item à lista Um item a sacola Qual item que eu quero adicionar a sacola Ah aqui

ó DT produtos certo e aí eu vou agora preencher campo por campo Então nesse item que eu vou adicionar a sacola o dele está onde ora está na página no parâmetro de página aqui ó Ok Ahã o nome está onde também no parâmetro de página depois eu tenho a descrição também no parâmetro de página descrição tomei um gole de água depois eu tenho a categoria também está no parâmetro de página e e depois eu tenho o preço que também está no parâmetro de página preço unitário do produto Deixa eu tomar uma gole de água e

agora tem mais duas informações que a gente criou ah a imagem também né Vamos botar imagem que está aqui ó na parâmetro de página e duas informações adicionais que é a quantidade desse item que está no widget state aqui ó count Controller ó e por fim o total que resultou esse item que está na variável Que Nós criamos na aula passada chamada Aqui ó page state Total item então quando eu clicar no botão verde ele vai pegar e vai criar um item na sacola desse tipo aqui vai adicionar sacola e depois nós temos aqui ó

a nessa mesma ação addfield eu vou atualizar o Total Geral isso é o tanto que eu vou pagar correto como que eu faço para atualizar esse valor eu vou clicar aqui ó increment decrement então aqui eu quero adicionar incrementar ou decrementar um valor bom se eu acabei de adicionar um item na SA colola Então esse item que eu adicionei naa Cola esse último item que eu adicionei naa Cola será acrescentado a variável Total Geral como que eu tenho acesso ao último item de uma lista vamos clicar aqui aqui ó appstate Total Geral aqui aliás aqui

ó item sacola eu tenho a opção item at index quero um item em um determinado índice em uma determinada posição eu quero o último last é o último Então eu vai pegar o último item dessa Cola e eu quero o campo ó o campo Total então o total que deu no último item daa colola ã o o último lanche no caso né então foram três big max então três Big Mac eu adicionei por último Então adicionei três big max por último isso Deu quantos é que eu tô pegando aqui ó isso eu vou incrementar na

variável Total Geral e assim eu adicionei itens a sacola então depois que eu fizer isso vou clicar aqui ó em add Action e vou escrever o seguinte aqui ó Snack Bar Snack Bar é aquela Barrinha que aparece embaixo adicionado perfeito e aí eu já navego para a página naveg ou navegate back volta pra página onde estava Ok então clicando aqui nesse botão ele vai adicionar isso aqui a sacola e vai sair da página muito bem na página inicial homepage aqui ó ah nós temos esse carrinho né então quando clicar nesse carrinho de compra ele vai

navegar pra página carrinho de compra então na próxima aula será a última aula acredito eu nós já iremos Então vamos pra reta final vou clicar aqui ó em AD Page para adicionar uma página nova Create Create vamos clicar aqui ah vamos chamar isso aqui de sacola Create page mesmo esquema então eu vou deletar essa app bar essa coluna também eu vou adicionar aqui um contêiner tá aqui infinito e aqui também vamos limitar o nosso contêiner a 500 pixels Vamos colocar aqui dentro uma coluna essa coluna Vamos colocar 16 de espaço de espaçamento e um pen

aqui também de 16 pixels vou inserir na coluna uma linha nessa linha eu vou colocar inicialmente então o ícone esse ícone ele será para voltar então será aqui aqui back Ok Ah aqui vamos deixar com essa corzinha vermelha 36 pixels vamos adicionar nessa linha um texto esse texto vamos expandi-lo assim e vamos escrever meu carrinho ou minha sacola tanto faz e aqui eu vou clicar aqui e colocar 36 aqui para manter o padrão né perfeito Ah agora eu vou inserir aqui um contêiner nessa coluna um contêiner esse contêiner vou também aqui expandi-lo esse contêiner eu

vou chamar de CTN corpo CTN corpo é o corpo ainda não vou expandir ele ele para baixo aqui tá porque eu vou colocar o um outro contêiner aqui vou clicar aqui vou colocar um outro contêiner esse contêiner ele se chamará CTN roda pé igual o que a gente já fez roda pé perfeito ah pintar com uma corzinha diferente pra gente enxergar esse contêiner corpo eu vou agora expandi-lo ó Isso vai empurrar ele até o final lá para baixo perfeito Então vamos montar aqui o nosso nosso negócio nesse contêiner corpo ã deixa deixa eu ver eu

vou colocar uma uma coluna ok uma coluna e dentro desse dessa coluna eu coloco uma list viw list viw perfeito então nessa list View eu vou montar agora os itens então eu vou clicar ah essa list View eu posso Ah expandi-la tá vou clicar aqui eu vou clicar nessa opção aqui ó do Meio nessa aqui e E aí eu vou quer colocar um contêiner dentro da list View e nesse contêiner eu vou montar o meu carrinho então Ah nesse contêiner eu coloco inicialmente uma linha por do lado esquerdo da linha eu vou ter uma imagem

Ok essa imagem deixa eu ver que tamanho que eu posso dar para essa imagem Vamos colocar 100 pixels por 100 pixels esse contêiner principal aqui eu vou deixar 100 sem uma uma altura essa imagem eu vou deixar com 100 pixels de largura e 100 pixels de altura ótimo se eu clicar sobre esse contêiner agora e tirar a sua altura ele fica com a altura da imagem Ok beleza então nessa linha agora eu vou colocar uma coluna e essa coluna eu vou clicar aqui ó tá para se expandir ó ótimo perfeito então aqui está a minha

coluna Ah deixa eu ver uma coisa na verdade eu vou clicar sobre esse contêiner e vou colocar uma altura vou voltar a colocar altura de 100 pixels ã porque assim acredito que a minha minha coluna ela fique se expandida tá ok então meu contêiner principal agora voltou a ter uma altura que senão minha coluna ia ficar aqui no meio bom essa coluna aqui agora essa coluna aqui ah eu vou fazer o seguinte vamos colocar aqui um espaçamento de talvez 8 pixs entre os elementos e um pad também aqui de qu pi PR não ficar tudo

grudado ou o piels tá bom E aí nessa coluna eu vou colocar um texto vou clicar sobre a coluna vou colocar o texto à esquerda vou inserir um novo texto assim agora eu vou colocar deixa eu ver um divider então divider aqui está esse divider ele vai ser essa cor secondary Text e vamos deixar assim ó das perfeito vou inserir agora nessa coluna uma linha assim já estou ficando sem tamanho então eu vou aumentar o tamanho do meu contêiner beleza nessa linha eu vou colocar o seguinte dois textos um texto aqui e um segundo texto

aqui e eles ficarão nessa posição aqui ó ótimo você já vai ver o que vai aparecer aqui e esse divider eu vou duplicar então duplic e quero que ele fique embaixo Aqui ó bom eu vou aumentar mais uma vez o tamanho do meu coner nó estamos com problemas Ok então esse divider vou arrastar para baixo aqui ó eu posso fazer por aqui também tá então eu quero que esse divider fique embaixo da linha então vou clicar sobre o divider arrasto Espero ficar azul e solto Pronto agora sim perfeito aqui está o nossa imagem no centro

Ok então nossa imagem está no centro Aqui está a minha coluna Hum deixa eu ver agora eu quero arrumar isso da aqui ó esse espaçamento aqui ó ah ok vou clicar aqui ó pra minha coluna ficar os elementos no centro muito bem era isso que eu precisava Era exatamente isso eu posso tentar aumentar o tamanho dessa imagem se eu quiser Ok mas não vou fazer isso agora bom agora esse cara aqui de baixo esse contêiner que está aqui embaixo o contêiner roda pé ou espandi assim perfeito ele vai ter um tamanho também que vou aumentar

acredito que precisar aumentar então vou arrastar com o mouse mesmo 140 vamos 140 vou tirar a cor dele vamos colocar uma cor sem cor Clear color aqui está Vamos colocar uma coluna E aí fazer a mesma cois então eu coloco Inicialmente um divider ok Aqui está o divider esse divider Vamos colocar uma cor secondary Text e aqui vamos escolher o Dash beleza vamos colocar uma linha agora então uma linha nessa linha eu vou esc eu vou colocar dois textos também então esse primeiro texto e este segundo texto clica aqui e clica aqui ó aqui eu

vou escrever Total Geral Total Geral e aqui eu vou colocar o Total Geral vou deixar até um pouquinho assim ó tamanho 16 talvez já vou preencher inclusive da onde vem o Total Geral ora da minha variável no meu appstate chamado Total Geral vamos formatá-lo para esse formato aqui específico hh v0.00 PT under BR display as currency Ok zer perfeito esse vamos duplicá-lo botão direito dup ele arrasta ele para cá assim perfeito e aqui embaixo dois botões então nessa coluna vamos inserir um elemento botão agora não vamos colocar o contêiner esse botão mesmo clicar aqui aqui

vamos escrever pagar Vamos aumentar o seuf assim altura 50 é uma altura boa para botões 50 vamos deixar aqui ó a bord 2 Rai de borda ficar padrão e a corzinha dele Verde em Ok e nós temos um outro botão vamos duplicar esse botão aqui dupli que não vai caber Ok então aumenta oer mais uma vez op não o botão botão contar em duper Rod euo eu posso fazer o seguinte também posso tirar a altura deixa eu ver quando eu tiro a altura o contêiner se adapta ao tamanho que ele precisa beleza Ah vou clicar

sobre essa coluna a primeira que está dentro do contêiner e um espaçamento entre os itens de oito pixels pronto então esse contêiner aqui embaixo eu vou escrever limpar limpar sacola Ok a cor pode ser essa aqui uma cor secundária não é para chamar atenção mesmo como que eu faço para clicar no botão e limpar a sacola bom vou clicar na coluna primeiro e aqui vou colocar espaçamento final também de 4 pixs Ok não ficar e aqui Inicial não precisa então quando clicar no botão limar sacola vamos executar essa como que eu limpo essa cola clicar

aqui ó a update update app state então eu vou clicar aqui ó Total Geral eu vou simplesmente Clear value quero limpar o total geral e também itens da sacola Clear value quero limpar também então quando eu clico aqui ele vai limpar tudo isso aqui agora isso aqui é simples Eu vou clicar sobre a list viw essa list viw vamos clicar aqui ó em generate dynamic Children vamos escrever LV itens e o valor que eu vou colocar aqui está aqui ó no appstate na variável itens sacola confirmar e save pronto aqui eu coloco o nome do

produto aqui eu vou copiar tá para não perder tempo então aqui eu coloco vou colar ah a categoria do produto aqui eu vou colocar a quantidade de itens que ele que ele comprou por exemplo 1 x r tá então uma combinação de texto combine text aqui eu vou escrever o seguinte ó primeiro a quantidade de itens então vou clicar aqui está aqui ó quantidade um aí isso aqui ó eu vou juntar com um x por exemplo tá espaço e agora eu coloco o valor unitário então por exemplo três vezes de R 50 seria então o

valor unitário eu pego aqui ó preço vamos formatar hash v0.00 loque PTBR displ as currency e aqui RS espaço Ok confirmar valor padrão pode ser um zero também perfeito aqui Total aqui eu vou colocar o total que deu né então se três três Big Mac três Big Mac custa C R 50 aqui o Total Geral então vou clicar aqui Total vamos formatar aqui ã # vírgula 0.00 PT underline BR display as currency Ok e aqui zero pessoal está finalizado o nosso carrinho de compra a lógica Ah não falta aqui a imagem Então vamos clicar aqui

na imagem clica aqui im pef ok ele não vai aceitar tá será que vai aceitar não né então aquele esquema que já já fizemos antes Aqui ó combine text Agora sim sim e sempre Mantenha sempre mantenha Ah isso aqui em mente nunca deixe de colocar um valor padrão porque senão vai aparecer uma tela vermelha você vai ficar desesperado ótimo ã isso aqui funciona vamos testar Então vamos clicar aqui e vamos para o último teste antes de encerrar essa aula obviamente nós não iremos configurar o botão de fazer o pagamento não é o objetivo desse curso

é um curso Básico como eu falei no início dessa aula mas no acelerador low code nós já temos algo semelhante com integração ali com stripe com pagamento vamos esperar ele carregar bom então ele carregou vamos testar né Ah vou clicar aqui em Pimenta picante Ah temos um problema como que eu chego na no carrinho né não não configuramos então eu vou fazer isso aqui agora vamos clicar aqui na home page e nesse botão aqui Navegar para então aqui ó add Action navigate navegate aqui naveg to a sacola pronto então ten que ter uma forma de

chegar na minha sacola senão não funciona então vamos clicar aqui em Instant Reloaded e vamos ver bom carregou então vou clicar ó então vou clicar primeiro aqui ó repare que nós não temos nada então Aparentemente está certo ok tudo Zerado Então vou voltar ah esse botão não configuramos também então vamos lá a gente vai testando vai Vai vendo os erros né Na hora Ah aqui aqui navig it back Beleza então vamos testar aqui mais uma vez Tent Reloaded vamos lá então eu vou clicar aqui bom aqui já está voltando eu vou clicar aqui no clássico

reinventado eu vou adicionar dois elementos adicionar adicionar essa cola ótimo mostrou aqui a mensagem voltou pra página inicial vou clicar aqui e Olha só pessoal incrível incrível está aqui r$ 7 79,98 aqui temos a o Total Geral então duas vezes de 3999 Tá certo vamos adicionar a Marguerita então vou clicar aqui vou adicionar TR R 104 e vou clicar em adicionar Ok vamos entrar nessa Cola R 104 e 70 Cent e aqui já o Total Geral somando todo mundo então se V adicionar muitos itens aqui vamos adicionar vários itens eu quero ver como que você

vai se comportar a nossa list viw então V clicar aqui olha só eu quero que ela role Então vamos voltar V adicionar mais itens aqui ok assim isso isso que eu queria ver ok pessoal tá finalizado então o nosso aplicativo Aqui nós temos título você pode melhorar esse layout tá se eu clicar em pagar a gente não fez nada e se eu clicar em limpar sacola ele limpa a sacola completamente Ok finalizamos com sucesso para publicar o aplicativo pessoal você vem aqui ó em aqui você vai clicar aqui ó em em platforms você vai clicar

em web para habilitar a web depois você vai clicar aqui em web publishing e você vai clicar em publish E aí ele vai publicar o teu aplicativo na internet vou clicar em publish e vou esperar ele publicar pra gente ver como é que ele funcionaria eu fiz teve uma coisa que eu não fiz aqui ó que foi o seguinte que foi configurar o meu contêiner para que ele fique no centro da tela isso a gente faz clicando no contêiner e Clic fando aqui ó tá alignments então por isso você vai ver que ele vai ficar

à esquerda mas isso não tem problema não tem problema importante a gente ver ele publicado e outra coisa né ele foi feito para celular também vamos esperar aqui ou pausar o vídeo enquanto isso ok Ele publicou vou clicar aqui ó nesse olho e aí a gente tem o nosso aplicativo funcionando na internet tá ele vai carregar quando ele carrega aqui na web primeira vez demora um pouquinho então aqui você pode já pegar o teu link colocar aí no teu celular que ele vai abrir perfeitamente Beleza então aqui está como eu falei né ele tá alinhado

aqui à esquerda eu quero ver se eu no carrinho de compra Ah tá achei que no carrinho de compra eu não tinha colocado uma limitação de tamanho então é por isso eu que eu coloco aquela aqueles 500 pixels de limitação por causa disso aqui sen não ficaria na tela inteira ok pessoal então aqui na internet ele funciona bem rápido inclusive ele funciona muito mais rápido os filtros quando tá publicado né Muito mais rápido do que no próprio flutterflow aí beleza então finalizamos o nosso o nosso projeto aqui construir a nossa página carrinho de compras e

colocar as informações da sacola e finalizamos o nosso projeto carrinho de compra eu Espero realmente que você tenha gostado tenha entendido e principalmente tenha aprendido aqui a toda a lógica do negócio como eu falei lá no início da aula pessoal isso aqui é um uma aula para iniciantes então muita coisa aqui nós não fizemos e poderíamos ter feito como por exemplo como que eu faço para tirar um item da lista eu coloquei lá o o o Supremo bacon lá e eu quero tirar não implantamos essa lógica mas com o que nós fizemos aqui com os

recursos que nós trabalhamos eu tenho certeza que você é capaz de aplicar essa lógica fazendo um esforço mental você consegue isso eu deixo como desafio para você ok poderíamos colocar muitos outros recursos aqui também mas como eu falei Esse aplicativo é um aplicativo para iniciantes beleza pessoal já deixa o like se inscreve nesse canal isso ajuda bastante o nosso trabalho aqui no YouTube escreve aqui embaixo a sua opinião se você gostou ah escreve aqui um comentário beleza aqui embaixo na descrição do vídeo você vai encontrar dois links o primeiro link é para nosso programa o

acelerador low code um curso completo avançado e aprofundado de flutterflow onde você vai acelerar na criação do seu aplicativo já temos diversos exemplos e casos de alunos que entraram em pouco tempo 3S meses Já conseguiram tirar a sua ideia do papel já publicaram o aplicativo nas lojas já fecharam contratos de mais de r000 Alunos novos com 3 meses Esse é o acelerador low code um curso criado por mim um especialista uma pessoa que já tá nesse mercado há mais de 10 anos com muita experiência no assunto e temos também um outro link o nosso curso

Express de flutterflow um curso para aquela pessoa que tá iniciando um curso alternativo como eu falei que tá iniciando no mundo do flut Flow e às vezes não quer gastar uma Fortuna ou metade de um salário mínimo comprando outro curso para depois descobrir que esse outro curso é um curso básico um curso introdutório mas que foi vendido para você como um curso do básico ao avançado então o curso Express é para você para iniciar no flutterflow te dá toda essa base que você precisa e as aulas elas são aulas nesse nível aqui que você que

você acabou de assistir e depois do Express se você quiser avançar pro próximo nível o ac o acelerador low code evidentemente você vai ter um desconto vai pagar somente a diferença beleza pessoal Espero realmente que tenha gostado siga aqui o nosso canal siga no Instagram que mais conteúdos como esse daqui nós iremos trazer para vocês um forte abraço e até a próxima