ESQUEÇA O DJANGO! FAZER SITES FICOU 1000x MAIS FÁCIL AGORA NO PYTHON

Olá seja bem-vindo aqui ao canal do programador Aventureiro eu sou Dalto Peixoto e nesse vídeo a gente vai aprender a construir esse c de produto que é muito comum a gente ver em e-commerce na internet então ele já vai ter esse design que a gente vai fazer no final onde a gente pode né trocar aqui as imagens do produto que a gente tá vendo vai ter a descrição a categoria do produto o preço a classificação dos Usuários esse Tab bar aqui que a gente pode né mudar entre a descrição do produto os detalhes dele selecionar

Qual que é a cor que a gente quer nesse produto Qual que é a quantidade de itens né que a gente tá querendo comprar aqui então a gente também pode trocar adicionar o carrinho ou adicionar ali a nossa lista de desejos e o mais legal desse projeto é que a gente vai construir ele 100% com python utilizando uma biblioteca gráfica que se chama flat E que é totalmente responsivel Então se a gente mudar aqui o tamanho da tela da minha aplicação ele vai se ajustar né o tamanho da tela aqui e se a gente diminuir

muito aqui ele vai automaticamente né Quebrar aqui minha aplicação para esse design né onde a foto do produto vai ficar em cima e toda a descrição ele aqui embaixo né já que não vai comportar aqui um do lado do outro então se gente diminuir aqui lado da minha aplicação ele vai estar sempre Se ajustando aqui ao novo espaço que ele tem disponível aqui para poder renderizar o aplicativo então conforme a gente vai aumentando ele já vai né automaticamente identificando o espaço disponível e renderizando o componente conforme o espaço que ele tem aqui na aplicação E

aí você pode utilizar esse mesmo projeto para construir esse Card né de detalhe de vários tipos de produtos não precisa ser necessariamente o e-commerce pode ser por exemplo um Site de receitas onde aqui você tem a foto da receita que vai fazer por exemplo uma lasanha né Então aqui tem todas as fotos da Lasanha que o usuário vai fazer Qual a categoria dela então massas por exemplo o título da Lasanha aqui em vez de preço Você poderia colocar tipo tempo total de preparo Qual a classificação dos usuários né que fizeram Esse produto que fizeram essa

lasanha uma descrição passo a passo né de como fazer e aqui os ingredientes que Vão ser utilizados e várias outras coisas então por exemplo se você tiver fazer uma aplicação de um aplicativo mesmo de receitas aí pode ter a opção aqui pro usuário adicionar em vez de C você deseja adicionar aos itens salvos dele que aí ele pode depois voltar e sempre visualizar todas as receitas que el deixa salvo ali no seu aplicativo Além disso O mais legal dessa biblioteca aqui do flat é que com esse mesmo código a gente consegue renderizar essa Aplicação aqui

para um aplicativo desktop como eu tô fazendo aqui né que eu tô rodando na macos mas também dá para gerar para Windows e Linux a aplicação e com esse mesmo código também a gente consegue gerar essa versão web e a versão para dispositivos mobiles como um APK Pro Android e a versão Ipa pro iOS então a gente consegue até mesmo testar Nossa aplicação em instalar ela como se fosse um aplicativo nativo né no Android no IOS no Windows no Linux no Mac OS inclusive colocar Nosa aplicação no ar na internet como se fosse um site

mesmo então é exatamente o mesmo código que a gente consegue renderizar ele para qualquer plataforma que a gente quiser então para isso vamos começar a desenvolver esse projeto aqui vou aqui pro nosso vs code e aqui dentro dele né a gente já tem a estrutura mínima que a gente precisa para poder construir uma aplicação aqui utilizando flat Então a primeira coisa é fazer a instalação da Biblioteca então se você ainda não tiver instalado você utiliza o comando PIP install flat e ele já vai fazer toda a instalação aqui da biblioteca pra gente na versão mais

recente feito isso basta a gente fazer então a importação aqui do flat então a gente importa ele sft e cria uma função principal aqui que normalmente a gente chama de Main que vai ser a função onde a gente vai colocar todos os detalhes ali da nossa aplicação do layout dela dos componentes Dela que vai renderizar na tela do nosso aplicativo feito isso a gente vai precisar colocar o comando flat app que vai de fato gerar a tela da aplicação e falar qual que é a função principal que tá todos os ali do meu aplicativo que

no nosso caso vai ser a função M Então essa aqui é a estrutura mínima necessária que a gente precisa poder criar uma aplicação ali com flat bom E aí aqui dentro então tudo que a gente precisa fazer agora só é rodar o nosso Aplicativo pra gente poder já ir vendo ele aqui na nossa tela e a gente for fazendo as alterações aqui nele em tempo real então para isso eu vou utilizar o comando flat Run e aqui na frente do Run eu coloco Qual que é o nome do arquivo né que tá renderizando a minha

aplicação nesse caso meu arquivo se chama aula PP então só colocar flat Run aula PP aqui vou executar ele já vai automaticamente abrir para mim aquela a tela da minha aplicação nova aqui e agora vamos Começar a personalizar ela então vou colocar ela aqui do lado do meu vs code dividindo aqui a tela que aí fica mais fácil da gente ver aqui vou Minimizar aqui o terminal e agora a partir de agora tudo que a gente fizer de alteração dentro da nossa função M aqui dentro desse arquivo né aula ponp ele vai renderizar automaticamente aqui

no nosso aplicativo perit Então a primeira coisa que a gente vai fazer é mudar aqui alguns detalhes da tela da minha Aplicação como eu tô no meu computador no modo Dark o flat automaticamente se adapta a isso Então como ele Já identificou que o modo do meu computador tá no modo Dark ele já colocou aqui o fundo da tela da minha aplicação com esse fundo escuro se o seu computador tiver no modo Light Provavelmente o fundo daquela da tela do aplicativo Flash vai est branco ou um tom bem claro aqui então para isso a gente

pode colocar uma cor específico aqui no Background da nossa aplicação pra gente ficar com a mesma coisa independente do sistema operacional e do tema que a gente tiver no nosso computador então para isso eu vou colocar aqui que o background color que eu quero na minha page sendo que a page seria a minha aplicação vai ser FT pon Colors pbl que são as cores que já vem embutida aqui no flat Então dentro do flat aqui então eu tô chamando flat deft dentro dele eu tenho um módulo chamado Colors e dentro Dessas Colors eu tenho diversas

cores aqui que eu posso utilizar no meu aplicativo então eu vou querer colocar aqui a cor preta lembrando que também eu posso utilizar uma cor personalizada basta passar uma string aqui com a cor Rex aqui que a gente queira utilizar então por exemplo a cor preta no padrão hex seria né uma sequência né de seis zeros aqui sempre começando pel uma hashtag que é definição aqui de uma cor hex feito isso eu só preciso fazer uma Atualização na minha página Então vou dar um page.on update Vou salvar e ele já automaticamente né atualiza aqui minha

aplicação aplicando todas as alterações que eu fiz né no meu código então aqui ele trocou a cor para preta que é a mesma coisa que eu tivesse colocar FT P Colors pon Black aqui também também é a cor preta só que já dentro do módulo aqui Colors do flat legal feito isso vamos criar agora o layout geral aqui da nossa aplicação Então para isso eu vou criar uma variável aqui chamada layout e dentro dela eu vou criar um contêiner esse contêiner ele vai receber diversas propriedades aqui dentro dele que eu posso definir por exemplo a

cor de fundo se ele vai ter uma margem Qual que é o tamanho dele se ele vai ter uma sombra basicamente o contêiner aqui na nossa aplicação é esse quadrado aqui onde a gente vai renderizar todo o nosso aplicativo dentro dele né todo esse Componente aqui então dentro desse quadrado principal aqui eu vou ter outros dois componentes que é essa lateral aqui que tá com fundo branco que vai ser Onde vai ficar a imagem do meu produto e essa outra lateral aqui que onde eu vou ter as informações do meu produto Então nesse nosso quadrado

maior aqui que seria o nosso contêiner principal eu vou querer colocar essa cor de sombra aqui nele nesse tom de azul aqui que a gente tem e definir também um Tamanho máximo para esse contêiner de 900 pixis que assim se a minha aplicação tiver uma tela muito grande ele não vai ser maior do que 900 pixis porém se a gente for diminuindo a tela da minha aplicação ele vai se ajustar conforme o tamanho disponível ali da tela né então ele vai diminuindo aqui porém ele não cresce mais de 900 pixels aqui na tela Então a

primeira coisa que a gente vai colocar aqui então vai ser uma largura máxima de 900 pixis aqui pro nosso Contêiner vou colocar também uma margem para para ele então V colocar FT margem P All ou seja uma margem em todas as direções de 30 pixs para poder separar aqui o meu contêiner né da borda da minha aplicação então ele ficar pelo menos com 30 pixels aqui de espaçamento em cada uma das laterais então mesmo que eu diminuo também da minha tela sempre vai ter esse espaço aqui ó de 30 pixels de cada lateral aqui da

nossa aplicação que é a margem aqui desse nosso Contêiner Então vou criar pelo menos uma margem aqui de 30 PX em todas as direções e vou criar uma sombra que é o nosso Shadow que é a aquela sombra ali que a gente criou ao redor do nosso componente de Tom Azul então para isso a gente vai ter ter uma propriedade chamada Box Shadow e dentro dela eu defino Quais são as características dessa sombra que eu quero criar então se eu passar até o mouse por cima a ideia já me mostra aqui quais são todas as

Propriedades que eu posso alterar aqui nesse Box Shadow seria o spread radios o Blue radios Qual que é a cor que eu quero dar para essa sombra se eu quero deslocar ela aqui pra direita pra esquerda para cima para baixo aqui qual que é o estilo da sombra e várias outras coisas aqui também Então a primeira coisa que a gente vai mudar vai ser o BL rid que é qual que é o raio da minha sombra então eu vou querer que ela ela se expanda 300 pixis para fora do meu Contêiner e qual que é

a cor que eu quero que essa sombra tenha Então vou colocar aqui que a cor dela eu quero que seja lá do módulo Colors do flat e vou querer utilizar a cor Siano que é um tom de azul claro que a gente pode colocar na nossa aplicação legal vou salvar aqui já e pra gente poder já ver esse componente aqui renderizado na tela da nossa aplicação a gente só precisa adicionar ele aqui no nosso aplicativo para fazer isso eu pego a variável aqui Onde eu tô definindo esse componente eu adiciono ele a minha page então

então em vez agora de eu fazer um update eu vou dar um page add e vou colocar aqui o meu layout né que é o componente que eu quero renderizar né dentro da minha tela da minha aplicação Vou salvar e aí agora Observe que a gente ainda não tá vendo nada aqui na tela da minha aplicação isso porque um contêiner para ele poder mostrar alguma coisa aqui dentro dele ele tem que ter no mínimo um tamanho Especificado né que seria uma altura e uma largura Nesse caso a gente só definiu a largura dele ou então

ele tem que ter um componente dentro dele né que seria esse content aqui ele tem que renderizar a alguma coisa dentro dele que aí ele vai se ajustar ao tamanho do conteúdo que ele tem só pra gente ver o nosso contêiner aqui eu vou colocar um height nele aqui de 200 pixis aqui vou salvar e a gente já vê aqui renderizando alguma coisa na tela da nossa aplicação Então que a gente consegue ver é que a gente tem um contêiner que ele tem 30 pixis de Margem aqui e ele tem uma sombra então de 300

pixels né se expandindo além do nosso container como a gente não tem nada dentro dele não dá para ver exatamente onde é que começa e termina o Meu Container e onde é que é que a sombra né começa ali a sua expansão então para isso né Eu não vou querer definir uma uma altura específica pro meu contêiner porque eu vou querer Que ele se ajuste a altura do conteúdo dele então não vou definir um height ali e vou falar então que o conteúdo desse contêiner eu vou criar uma responsive Roll que é uma linha responsiva

né onde eu vou colocar componentes dentro dela aqui no parâmetro controls que eu vou passar Então quais são os componentes que eu quero renderizar dentro dessa linha aqui por padrão uma linha Então os componentes renderizados um do lado do outro então no nosso caso aqui a gente Vai ter um componente que vai ser essa parte aqui que seria a as nossas imagens do nosso produto e por est num mar Row ele vai renderizar um do lado do outro então esse componente vai ser renderizado ao lado desse outro componente aqui porém a vantagem uma responsive Row

é a gente pode definir né quando que a gente quer que o nosso componente ocupe de espaço aqui na tela da nossa aplicação dessa forma né Se a gente for diminuir a tela da aplicação Eu posso falar então que eu quero né que esse primeiro componente por exemplo ele ocupe todos os espaos disponíveis da minha Row numa determinado tamanho de tela e quando a tela for maior por exemplo eu quero aquele compr só a metade do espaço dessa forma a gente cria esse efeito aqui de desse design né responsivo aqui então vamos ver aqui ó

então na minha responsivel Roll eu vou primeiro colocar aqui o parâmetro chamado colums dela que é quantas Colunas virtuais né Eu quero que gere para mim por padrão é 12 mas eu vou colocar aqui 12 só para poder ficar explícito Vou colocar aqui um spacing que é qual que é o espaçamento que eu quero entre um componente e outro então qual que é o espaço que eu quero dar aqui né Essa margzetta colado aqui um lado do outro então espaçamento de zero pixis e o Run spacing que eu também vou colocar de zeros pixis então

o Run Space Seria a Mesma coisa né Qual o espaçamento mas quando um componente está abaixo do outro então quando um componente ficar agora abaixo um do outro né Qual que é o espaçamento que eu quero dar aqui é entre eles né então também vou colocar de zero Pixel que eu não quero que tenha um espaçamento ali Entre esses componentes feito isso né então vamos criar agora os componentes que eu vou querer ralizar dentro dessa Row Então qual que é o nosso componente aqui da Lateral esquerda aqui é nossas imagens e o da o direito

aqui que seria a descrição do nosso produto então aqui eu vou querer fazer isso em propriedades separadas Então vou criar uma variável chamada product images e uma outra variável que vai se chamar product de Tails feito isso vamos criar essas duas variáveis aqui em cima só para el não dar erro quando salvar aqui o nosso componente então product imag eu vou criar como sendo um contêiner vazio Então V colocar FT P container e também vou criar aqui o nosso products como também sendo um contêiner vazio aqui só para não dar erro na hora de gente

salvar aqui o nosso aplicativo Então vou salvar e aí ele sumiu lá o nosso a nossa sombra aqui porque a gente tirou aquele parâmetro de do height dele né de qual que é a altura que esse componente vai ter Então dessa forma agora o nosso container vai se adaptar ao tamanho do conteúdo que ele tem então Quando a gente começar a criar alguma coisa agora no nosso product maes ou product details que são os componentes que estão dentro do nosso contêiner ele vai se adaptando aqui ao tamanho da tela da nossa aplicação legal então vamos

fazer primeiro aqui a parte da esquerda aqui on a gente tem a imag do nosso produto então para isso aqui no nosso produto te images aqui no nosso contêiner eu vou criar um content que é qual o conteúdo que vai estar sendo Renderizado dentro dele eu vou querer criar uma Colon que é que eu vou querer colocar né um componente abaixo um do outro então uma colum onde eu vou ter uma imagem aqui em cima e uma outra parte aqui embaixo onde eu vou ter todas as imagens que eu posso né Navegar aqui dentro do

nosso aplicativo Então dentro dessa colum a gente tem o p chamado cont controls que também igual o responsive r aqui né é uma lista de componentes do flat que eu posso renderizar eles né só Que diferente do responsive r em vez de colocar um do lado do outro numa colum eu tô colocando um embaixo do outro então vamos renderizar primeiro a nossa imagem principal do nosso produto Então vai ser FT pimage e aqui eu vou falar qual que é a search dessa imagem ou seja qual que é o URL ou caminho ali do arquivo de

imagem que eu tô querendo renderizar na nossa aplicação para isso eu vou pegar uma imagem da internet então joguei ali no Google né ptron Amarela de escritório e peguei o link de uma imagem qualquer lá então peguei esse link aqui se eu salvar ele já vai renderizar aqui a nossa imagem na nossa aplicação então a observa que a gente já consegue ver algumas coisas aqui acontecendo primeiro a gente tá renderizando aqui a nossa imagem como a nossa imagem Ela já tem uma largura uma altura especificada aqui o nosso contêiner vai se adaptar à altura né

dessa imagem e aí ele vai Aplicar essa sombra aqui né em toda a extensão do contêiner Então como por enquanto só tem a imagem dentro do contêiner sendo renderizado ele tá aplicando aqui ao redor da nossa imagem aqui essa sombra legal feito isso né vamos avançar aqui nessa parte da lateral aqui que a gente vai precisar criar então essa parte aqui de baixo a gente vai ter várias imagens aqui que quando a gente clicar a gente vai poder trocar aqui entre a visualização delas Aqui na nossa parte principal aqui então para isso a gente já

criou aqui a nossa imagem Então dentro da minha colum ainda né Qual que é o próximo elemento que eu vou querer criar dentro da minha cola ou seja qual que o elemento tem ficar agora embaixo Aqui dessa nossa imagem então eu vou querer criar uma Row agora que vou querer colocar várias imagens só que uma do lado da outra então a minha Row vai ter um controls que vai ser quais são os componentes que não tá renderizado Dentro dela E aí dentro dessa Row aqui eu vou querer renderizar um contêiner então colocar FT P container

esse container vai ter uma propriedade que imag sece ou seja qualquer imagem de fundo que eu vou querer colocar aqui no nosso container Então a primeira imagem vai ser igual a a imagem ali de cima né que vai ser a imagem principal aqui do produto posso falar Então qual que é a largura e a altura que eu quero que esse contêiner tenha então eu vou colocar Aqui por exemplo 80 piis de largura e 80 pixis de altura também já vou salvar pra gente ver então a gente já tem agora o efeito aqui da nossa ess

imagenzinha pequenininha aqui embaixo também feito isso a gente só precisa né Eh copiar e colar esse componente aqui várias vezes para poder ir criando as outras imagens que a gente quer aqui poder navegar entre elas na nossa aplicação porém eu já vou colocar um outro parâmetro aqui que é opacidade Vou definir como um que É o valor padrão já que ou seja ele fica 100% visível aqui mas eu vou deixar essa propriedade definida porque aqui quando a gente clicar numa imagem a gente vai querer diminuir um pouco a opacidade da outra para poder dizer né

que a gente tá dando destaque aqui para essa imagem que foi clicada Então ela tá com destaque agora tá com destaque e a gente vai diminuindo a opacidade aqui das outras Então vou colocar aqui opacidade igual a 1 e vou criar uma função que é um on Click Ou seja quando eu clicar aqui nesse componente o que que eu quero que aconteça eu quero disparar uma função que você vai chamar Change Main image que é para poder trocar a imagem principal ali da nossa aplicação então só para não dar erro aqui eu vou criar essa

função aqui em cima então Change Main image ela vai receber um evento e só vou criar essa função sem nenhuma definição aqui só para ele não dar o erro para de que essa função não existe Quando eu salvar aqui esse componente feito isso né vamos copiar e colar esse componente aqui três vezes para poder gerar mais três imagens aqui pra gente então vou ter aqui três vezes e observe que como a gente criou agora a função um clique né quando a gente passa o mouse por cima agora desse componente o nosso cursor automaticamente muda né

para essa mãozinha indicando né que eu posso clicar agora nesse componente por enquanto quando eu clico não acontece Nada porque tá disparando essa função aqui e essa função não faz nada mas depois essa função vai trocar a imagem principal ali da nossa aplicação então agora vamos só trocar as imagens aqui que a gente vai utilizar no nosso componente Então vou pegar algumas outras imagens que eu peguei lá do Google também vou colocar aqui algumas outras imagens de poltronas que a gente tem aqui então para poder renderizar salvar e aí tem essas outras imagens Aqui que

eu achei lá no Google de poltronas eh no modelo mais ou menos parecido com esse daqui legal feito isso né como eu falei como essa aqui vai ser a nossa imagem principal né a primeira que é a que tá sendo renderizada então eu vou querer que as outras ten um foco um pouco menor ou seja uma opacidade aqui de 0.5 para elas poderem ficar com uma cor um pouco mais clara ali ó tá vendo sem aparecer tanto aqui na nossa aplicação legal feito isso né o nosso Componente aqui lateral já tá praticamente pronto então a

gente só precisa colocar agora algumas propriedades para poder definir esse layout dele deixando um tamanho aqui específico aqui para ele né na nossa aplicação colocando um espaçamento aqui na lateral do nosso aplicativo colocar uma cor de fundo aqui para ele e né definir aquela função lá que faz aquela lógica de ir trocando aqui a imagem principal aqui do nosso componente Então Vamos terminar de fazer toda a personalização desse componente aqui lateral que é o nosso product images então para isso primeira coisa que eu vou fazer é que aqui na nossa Row eu vou querer que

as opções de imagem que a gente tem aqui elas fiquem alinhadas no centro aqui da minha Row então aqui nem na minha Row eu vou colocar aqui o parâmetro alignment vai ser igual FT P Main x alignment e vou querer alinhar elas no centro então já alinhei aqui no Centro e vou colocar agora uma cor de fundo aqui aqui pra nossa tela né para que isso aqui tudo fique branco né com uma cor de fundo para poder não ficar com esses espaços aqui vazio né mostrando ali o fundo do meu Shadow por exemplo então aqui

no nosso contêiner principal aqui do nosso produto de images eu vou definir que a cor de fundo dele vai ser FT P Colors pwh ou seja queria colocar na cor branca vou salvar então a gente já viu ali que ele colocou A cor branca em todo o nosso componente e vou colocar um paging que é um espaçamento ali do conteúdo né do nosso contêiner pras bordas então colocar um espaç aqui só para poder dar um espaço maior aqui entre os elementos né e a borda aqui do nosso contêiner então colocar f. pag.all Ou seja eu

quero um espaçamento em todas as laterais aqui de 30 pixis vou salvar ele já fez ali o espaçamento para mim e eu vou querer então que o nosso elemento aqui né ele Tem um aspect ratio de 9x 16 Vou salvar ele já criou esse aqui espaçamento nosso componente né com esse tamanho aqui especificado que que é esse spect ratio né eu tô falando para ele que basicamente eu eu quero que a largura desse componente seja mais ou menos a metade da altura dele ou seja se eu for dividir 9 por 16 Isso aqui vai dar

0,56 então 9 di 16 dá 0,56 isso aqui vai ser a minha proporção entre a minha altura e a largura do componente ou seja Se a minha altura tiver 100 piis eu quero que a minha largura tenha aproximadamente 56 pixis se a minha altura tiver 200 piis eu quero que a minha largura tenha 112 piis e assim por diante Ele sempre vai manter uma proporção entre a altura e a largura aqui do nosso componente assim né se eu for diminuindo aqui a tela da minha aplicação aumentando ele sempre mantém esse quadrado aqui de proporção né

da minha aplicação aqui e essa proporção Pode ser qualquer coisa né eu posso colocar por exemplo uma proporção de um Ou seja eu quero que a altura e a largura sejam exatamente iguais então ele vai ficar um quadrado aqui então tanto a altura quanto a altura tem o mesmo tamanho aqui na nossa aplicação Então nesse caso eu vou querer colocar 9x 16 que eu quero que a largura seja aproximadamente a metade aqui do tamanho da altura do nosso componente feito isso agora dentro da minha cola né eu posso Simplesmente colocar um espaçamento aqui entre esses

componentes né para não ficar aqui eh as opções aqui que eu das minhas imagens né ficarem colados aqui com a minha imagem superior só aqui nem da minha colum eu posso também colocar um alignment então alignment nele que vai ser igual a FT P Main exess alignment e eu posso colocar então várias opções aqui por exemplo eu posso centralizar os meus componentes então salvar aqui ó eles vão ficar todos Centralizados aqui na minha tela do min aplicação por padrão ele vai ser o start ou seja vai ficar todo mundo na parte superior aqui pode ser

o end também ou seja todo mundo para baixo aqui na minha tela e no nosso caso eu posso colocar um espaço aqui nos componentes no nosso caso eu vou querer colocar um Space between ou seja ele vai pegar o primeiro componente aqui vai jogar lá para cima e o último componente e jogar lá para baixo e colocar um espaçamento né entre O primeiro e o segundo aqui preenchendo toda a tela Então dessa forma a gente coloca Space between a nossa primeira imagem aqui né que é o primeiro componente da nossa Colon vai lá para cima

nosso último componente da nossa Colon que é a nossa Row vai lá para baixo e ele coloca um espaçamento aqui né entre esses dois componentes aqui legal e agora que a gente já tem esse efeito Vamos só criar ajustar a nossa função Change me image para que quando Eu clicar aqui em alguma outra imagem né ele trocar a imagem principal ali do nosso componente então para isso eu só vou atribuir uma variável para cada um desses componentes aqui para que eu possa pegar as propriedades né que eu tenho dentro deles então se você tiver utilizando

uma versão mais recente do Python a gente tem o operador wus que a gente consegue utilizar aqui para poder definir uma variável dentro de uma instanciação aqui de uma propriedade que Seria esse operador aqui seria o dois pontos igual Então o que eu tô falando é eu tô criando aqui o meu componente image dentro aqui da minha colum e ao mesmo tempo que eu tô fazendo isso eu tô criando uma variável chamada Main image que eu tô adicionando esse componente aqui então esse componente vai estar sendo salvo aqui dentro da minha variável Main image e

vou fazer a mesma coisa aqui PR a nossa Row aqui então vou colocar aqui o meu options vai ser dois Pontos igual a minha Row aqui então tô criando também uma variável chamada options que tem esse componente aqui se tiver utilizando uma versão mais antiga do Python que não tem aqui o operador warus você pode fazer a mesma coisa né só desestruturando aqui esse componente igual a gente fez por exemplo com o nosso product imag lá embaixo então eu posso criar uma variável aqui em cima então colocar aqui meu Main image vai ser igual a

minha imagem aqui eu vou Pegar essa imagem e vou renderizar ela aqui dentro do nosso componente então dá para fazer também dessa forma definir a variável aqui do lado de fora e aí utilizar essa variável para poder renderizar aqui dentro da nossa cola no nosso caso eu vou fazer tudo aqui num passo só só para poder ficar todo o design da nossa aplicação aqui num único local feito isso né eu já consigo agora utilizar essas variáveis aqui na minha função para poder mudar algumas Propriedades desses componentes Então a primeira coisa que eu vou fazer aqui

na minha função Change m ou seja quando o usuário clicar aqui em alguma das imagens que eu tenho aqui embaixo eu vou querer percorrer todos os elementos que eu tenho aqui dentro da minha Row ou seja dentro da minha da minha variável options eu vou querer pegar todos os controls ou seja essa lista de componentes e verificar qual desses elementos aqui que disparou essa função Então para isso eu vou colocar uma iteração aqui então fazer para cada elemento dentro da minha options então da minha variável options Lembrando que dentro da minha variável options eu tenho

aqui meu parâmetro controls então options controls para cada elemento que eu tenho aqui dentro da minha options controls então esse aqui é um elemento esse aqui é outro então para cada um que eu tiver aqui eu quero verificar então vou fazer uma verificação Então se Esse elemento então elemento ele vai ser igual ao elemento né o controle que disparou esse evento né que chamou essa função aqui então lembra que a nossa função ting min ela recebe um parâmetro chamado e aqui que é o evento Ou seja é Qual o componente né que disparou essa função

Então se a gente clicar aqui nesse daqui por exemplo nessa poton aqui do meio essa aqui vai ser a que disparou a função se eu clicar nessa essa aqui vai ser a que disparou a função Então Vou verificar se o elemento né que eu tenho ali na minha controls foi ele que disparou a minha função então e pon cont Control se foi o controle que disparou essa função Se isso for verdade ou seja se eu encontrei o elemento que disparou aqui a minha função eu vou querer que esse elemento específico então a opacidade dele seja

igual a um E além disso eu vou querer pegar né Qual que é a imagem sece aqui desse componente e vou substituir a imagem aqui eh a search Né da minha Main image aqui então vou pegar a minha Main image ponto src então aqui é minha variável me image eu quero pegar a propriedade src dela e quero alterar ela eu quero que a a imagem principal seja igual a imag do meu componente aqui que disparou a minha função se isso não for verdade eu vou querer que a opacidade do meu elemento Então opacity opacity seja

igual a 0.5 feito isso eu só preciso fazer a atualização dos meus componentes né Então vou atualizar a minha imagem principal porque eu troquei agora qual que a imagem que tá sendo renderizada aqui dentro dela né eu troquei a minha cers e também vou precisar atualizar o meu options aqui e porque eu troquei as propriedades de opacidade de algum dos seus componentes ali dentro então vou fazer um options p update Vou salvar aqui e agora quando a gente clicar aqui na nossa função nossas imagens aqui embaixo ele vai automaticamente trocar a Nossa imagem al em

cima então por exemplo quando eu clicar nessa imagem aqui que vai ser o meu segundo container aqui então vou clicar nessa imagem e toda vez que eu clicar nessa imagem ele vai disparar a função Change Main image então vou clicar aqui que que ele vai fazer disparou a função Change M image a função Change M image então o que que ela vai fazer é verificar todos os os elementos que eu tenho aqui dentro das nossas options né então n minhas options Aqui tem meus contol então todos os componentes e vai verificar se o se um

componente né Ele é o que disparou ação então por exemplo vou pegar aqui o meu primeiro ele vai ver esse primeiro aqui esse elemento aqui ele é o elemento que disparou a minha função não é então isso aqui vai dar falso então se ele não é eu vou mudar a opacidade dele para 0.5 então ficou aqui mais claro aí ele foi pro próximo elemento aqui na minha conta que foi ser essa segunda imagem aqui aí Ele vai verificar esse elemento foi o elemento que disparou a minha função e a resposta é verdadeira né então foi

o elemento que disparou a função Então como ele é o elemento que disparou a função eu vou mudar a opacidade dele para um e vou pegar a image sece dele então vou pegar aqui a image sece dele que é essa imagenzinha aqui que tá sendo renderizada e vou utilizar ela para poder substituir a imagem da minha imagem principal aqui do nosso Aplicativo Então vou substituir a imagem principal aqui da nossa aplicação feito isso depois né dele verificar todos os componentes eu vou atualizar aqui a minha imag principal e atualizar aqui minhas ras para poder aplicar

essas alterações que eu fiz aqui então eu fiz uma alteração na search aqui da minha image por isso que eu tenho que atualizar ela e fiz uma alteração aqui na opacidade de todos os elementos que estão aqui dentro do meu options então Por isso que eu vou atualizar aqui o meu options e aí a gente já tem esse efeito aqui sendo aplicado aqui no nosso componente legal feito isso vamos avançar agora pra criação né do próximo elemento aqui da nossa aplicação então essa parte aqui já tá pronta vamos criar essa segunda parte aqui que seria

os detalhes né do nosso produto aqui então para isso a gente já tem aqui nossa variade de produtos de tus aqui e vamos começar a personalizar ela para isso eu Vou só comentar aqui o nosso product images no nosso layout aqui pra gente só ver o nosso producto de tus aqui e depois eu abelito aqui pra gente poder ver tudo né só que como esse aqui já tá concluído né pra gente não precisar ficar eh visualizando ele aqui toda hora na nossa aplicação tem que ficar dando um scroll aqui na tela e se você quer

aprender todas as técnicas para poder construir aplicativos e interfaces modernas utilizando sempre % do Python e Fazer com que o seu código funcione em qualquer tipo de sistema seja web sistemas desktop ou mobile Então você precisa conhecer o curso flat 360 onde você vai aprender do básico até o avançado de todos os componentes de personalização que o flat tem além de construir diversos projetos práticos para você pôr no seu portfólio assim como esse que você tá vendo aqui nesse vídeo o curso conta com mais de 40 horas de muito conteúdo mais de 170 exercícios E

diversos projetos práticos com interfaces modernas e super modular você pode reutilizar em qualquer projeto que você quiser para saber mais sobre Flash 360 clique embaixo no link que eu vou deixar aqui na descrição e conheça tudo sobre esse curso completo sobre flat para ficar mudando então aqui dentro do nosso contêiner do produto de T vamos começar a personalizar ele então vamos colocar mais ou menos as mesmas propriedades que a gente já fez lá no Nosso Main image Então vou colocar um espaçamento aqui para ele né então . paging em todas as direções de 30 pixels

Vou salvar a já começa a conseguir ver ali o no componente Vou colocar aqui uma cor de fundo nele então background color vai f. Colors p black 87 que é um tom de preto com uma opacidade um pouco menor então ele já criou ali pra gente e também como assim como a gente fez a nossa imagem lá vou colocar o mesmo aspecto ratio nela aqui também então vai Ser 9 por 16 que é a mesma coisa de colocar aqui né 0 0.56 é a mesma coisa só que ele vai fazer a divisão aqui na hora

pra gente Então temos aqui já o nosso C aqui então com a nossa rate né de 9x 16 uma cor de fundo preta aqui de opacidade 87 Então ela tá uma opacidade um pouco mais clara por isso que a gente consegue ver um pouco do tom de azul ali da cor de fundo um espaçamento de 30 pixels aqui né dos componentes que a gente vai começar a criar então vamos lá Começar a criar o conteúdo aqui desse contê então ele vai ter um content eu vou querer criar uma colum aqui que eu vou querer colocar

os componentes um abaixo do outro aqui e toda colum recebe um parâmetro controls que é uma lista de elementos do flat né sendo que cada elemento que eu for adicionando aqui Dent na minha col tá colocando um abaixo ali do outro então a primeira coisa que a gente vai fazer aqui vai ser criar esse text né que vai ser a categoria do Nosso produto depois vai ter um outro texte aqui que vai ser o título do nosso produto depois mais um texte aqui que vai ser por exemplo uma categoria principal né da onde esse produto

ele é encontrado por exemplo lá nas categorias do site Então vai tá lá dentro de sala Star depois a gente vai ter mais um um uma Row aqui né onde eu vou ter de um lado o texto do produto do outro lado aqui essas imagens então basicamente a gente vai criando um componente agora Aqui e eles vão sempre colocando um abaixo do outro então vamos criar aqui primeiramente o nosso text que vai ser então o value dele vai ser Qual que é o texto que vai est escrito dentro dele vai ser cadeiras Vou salvar ele

já começa a aparecer al para mim e eu vou querer que a cor desse texto Então color vai ser uma cor Amber que é um tom de amarelo aqui vou salvar ele já vai trocando ali para mim em tempo real na minha aplicação então a gente consegue Desenvolver muito mais rápido assim conforme a gente vai fazendo as alterações a gente sempre vai clicando em salvar aqui e já vai vendo em tempo real as alterações sendo a nossa aplicação então só para finalizar esse componente aqui eu vou colocar uma espessura aqui no nosso texto em Então

vou colocar aqui el Font B para ele poder ficar um texto inito feito isso a gente concluiu aqui esse texto Vamos pro próximo componente aqui que Vai ser o título da nossa aplicação então aqui pro título a gente também vai ter um text então um text também o valor desse text vai ser o título nosso nosso componente né então vou colocar aqui poltrona amarela moderna Vou salvar já estamos vendo ela ali vou colocar Então essa essa texto né na cor branca f.c. White também vou colocar uma espessura nele aqui em né então colocar um Font

weight Bolt para ele poder ficar em E além disso né eu vou colocar Um tamanho aqui de 30 pixels para esse texto para ele poder ficar com tamanho bem maior ali então Já criei aqui também então um texto poorno amarela moderna com uma cor branca em e um tamanho de 30 pixels aqui para esse texto para ele poder ficar com maior destaque continuando aqui vamos criar um outro texte aqui também então vai ser um texte o valor aqui desse texte eu vou colocar sala de star Vou salvar a gente já tá vendo ele ali vou

colocar esse Text numa cor cinza então FT pcolor pgy e vou colocar ele em Itálico então só colocar propriedade italic igual a true aqui que ele vai definir esse texto como Itálico ali pra gente bom feito isso a gente já pode ir pro próximo componente aqui que vai ser né o nosso preço aqui né que é um text também e do outro lado a gente vai ter esses icones aqui né das estrelinhas né Que o usuário deu aqui pro nosso produto Então como a gente vai ter dois elementos aqui dentro Da minha Row se eu

fosse Criar e esse text aqui depois do nossas estrelinhas eles ficariam um abaixo do outro por conta disso eu vou criar também uma responsive Row para eles poderem ficar um do lado do outro aqui nessa parte aqui do nosso layout Então vou colocar com responsivel Row vou colocar o colons dela aqui igual a 12 e Vou definir Quais são os control aqui Quais são os elementos que vão ser renderizados aqui dentro da minha Row então o primeiro Elemento vai ser o nosso text lá que vai ser o preço do produto Então esse text aqui eu

vou colocar um value para ele então value dele vai ser igual a r s cifrão 399 vou colocar ele na cor branca f. Colors White aqui e também podou fechar ele com 30 pixels de tamanho também então nosso text ali já tá pronto Qual que é o próximo componente que que vai ficar do lado desse text aqui dentro da nossa Row eu vou querer criar uma uma Outra Row aqui onde eu vou renderizar várias vezes aquelas estrelinhas nossas Então vou colocar aqui nessa Row o nosso controls que são os componentes que eu quero renderizar dentro

dessa R aqui vou querer renderizar um ícone e qual que vai ser o ícone que eu vou querer utilizar então vou falar qual que é o name desse ícone Lembrando que o flat já tem vários ícones já embutidos dentro dele então a gente tem tantos os ícones padrões aqui do material Y né que Geralmente são os ícones que a gente vem em aplicativos Android como a gente tem o Cupertino icons que são os ícones do iPhone então você pode utilizar tanto ícon do iPhone aqui quanto ícones do Android aqui na sua aplicação nesse caso eu

vou utilizar o icons mesos que seria os ícones do material Yi que são os ícones padrões ali do Android Então dentro daqui eu vou colocar o ícone Star que é o ícone de uma estrela Lembrando que tem vários ícones aqui dentro desse Componente Então se a gente colocar aqui colocar aqui Star ele já mostra para mim vários tipos de estrelas aqui que a gente tem né para poder utilizar a nossa aplicação Então tem muito muito ícone aqui disponível dentro dessa biblioteca decones padrão aqui do flat se eu salvar coloquei start é T Então aqui tem

a nossa estrela e eu vou mudar a cor dela aqui então eu quero que essa estrela tem uma cor aqui que seja igual FT pon Colors pon umber deixar essa estrela na Cor amarela salvei criou aqui a nossa estrela então a gente pode né copiar e colar isso aqui várias vezes para poder gerar as outras estrelas né para poder fazer cinco ou como a gente tá já dentro de um de uma lista a gente pode fazer um list interation no Python para poder gerar isso automaticamente pra gente assim a gente evita de ter que ficar

copiando e colando várias vezes o mesmo componente então para isso a gente pode fazer aqui ó para cada elemento aqui Dentro de um Range de cinco componentes então ele vai fazer o quê vai iterar isso aqui cinco vezes e cada iteração ele vai gerar pra gente Esse icon aqui com uma estrela né na cor amarela então gerou esse componente aqui pra gente cinco vezes se a gente quiser fazer uma condicional ou seja não quero que todas as estrelas sejam amarelas eu posso fazer uma condicional aqui na cor Então posso falar aqui então que eu quero

que a cor seja amarela se a nossa iteração Tiver no quatro for menor for menor do que quatro né senão eu quero que a cor da minha estrela então f. color seja branca aqui vou salvar então pronto então até a quarta estrela ele vai utilizar a cor amarela passou da quarta Estrela né ele vai utilizar a cor branca da mesma forma podia mudar então eu quero que só op que só duas estrelas aqui sejam amarelas então até a segunda estrela vai ser amarela passou da segunda Estrela né elos Vai ser branco Aqui vou deixar quatro

mesmo para poder ficar igual o nosso layout lá da nossa aplicação feito isso né a gente já terminou essa parte aqui do nosso componente mas se aí você perceber ele tá um embaixo do outro mas ele não é uma responsive Row então não deveria ficar um do lado do outro isso porque por padrão né ele eu tô falando que eu quero que cada componente ocupe 12 colunas virtuais aqui na nossa aplicação só que eu não não disse né quanto que cada um Deles aqui tem que ocupar dessas 12 colunas Então por padrão ele coloca 12

para cada uma delas Então esse componente aqui tá ocupando uma linha inteira e aí como ele já tá ocupando uma linha inteira esse outro componente vai pra linha de baixo ocupando também uma linha inteira então pra gente poder mudar isso eu coloco coloco aqui qual ou seja quantas linhas eu quero na verdade quantas colunas né virtuais nessas 12 colunas eu quero que esse componente Tex Aqui ocupe e aqui que entra a grande vantagem da responsive Row que eu posso definir isso por tamanho da tela da minha aplicação então eu posso falar assim ó que quando

a tela da minha aplicação for muito pequena ou seja XS aqui que seria um parâmetro de 576 pixis Ou seja quando a minha tela da minha aplicação for menor de 576 pixis eu quero que ele ocupe todo o espaço disponível ou seja todas as 12 colunas aqui da minha e se a tela da minha Aplicação for maior do que 576 pixis aqui que seria um tamanho de tela small ou seja SM aqui eu quero que ele ocupe só seis Ou seja aquele ocupe metade do espaço disponível ali eu posso fazer a mesma coisa aqui pro

nosso componente Aqui de baixo então a minha Row aqui embaixo vou colocar a mesma propriedade se eu salvar agora se eu aumentar a tela da minha aplicação um componente vai ficar do lado do outro Ou seja quando a tela da minha aplicação for maior de 576 Pixel isso aqui é um Break Point tá que a gente tem lá no CSS lá é um Break Point padrão aqui a gente tem no Xbox por exemplo então quando a tela da minha aplicação for small né seja pequena ou seja maior do que esse tamanho ele vai ocupar metade

aqui do espaço disponível que são de 12 colunas Quando ela for muito pequena ou seja quando ela for Extra small aqui ele vai ocupar 12 espaçamentos né que seria a row inteira aqui então um elemento vai ficar embaixo Do outro Isso serve para deixar nosso componente aqui responsivo né então a gente consegue eh colocar eles aqui responsiv aqui na tela do Nossa aplicação deixar assim e vamos criar agora as nossas tabs aqui né onde a gente vai ter as descrição o detalho do produto aqui com essa animação indo pro lado aqui pra gente poder alterar

entre uma Tab e outra aqui do nosso aplicativo então depois da nossa responsiv Row aqui eu vou criar o nosso próximo componente Que vai ser um um FT ptbs aqui são algumas Abas né al um componente de Abas ali que a gente pode criar na nossa aplicação bom a primeira coisa que eu vou criar aqui dentro dele vai ser as tabs né que é o conteúdo né Desse componente então o nosso tabs aqui também vai ser uma lista de componentes aqui do tipo Tab então componente aqui do tipo Tab no singular tá então o tabs

no plural é o componente total né então todo o componente aqui e o tabs seria Uma uma aba específica aqui dentro dele né então eu tenho uma vou dentro da do nosso componente T eu vou ter uma aba específica que ela vai ter um text aqui que é o título dela vai se chamar descrição se eu salvar eu já consigo ver aqui então ten uma aba que se chama descrição e eu vou querer criar uma outra aba então FT ptab aqui que ela vai se chamar detalhes então tem agora uma aba descrição e uma aba

detalhes aqui Então já tem esse componente aqui agora Vamos criar o que que vai ser renderizado dentro desse componente então quando eu clicar aqui na descrição o que que eu quero que apareça aqui embaixo Então qual que vai ser o conteúdo da minha Tab descrição vou querer que seja um FT P container esse container Então vai ter um espaçamento aqui de 10 Pixel em todas as laterais então um p de 10 pixis e dentro desse contêiner eu vou querer criar aqui um text que vai ser lá o descritivo né da Do nosso produto no caso

né então vou colocar um texte aqui dentro dele vai ser a descrição do nosso produto para is S eu vou pegar aqui o texto que eu já tinha escrito para esse produto que vai ser é a poltrona decorativa que vai ser né a poltrona decorativa cadeira reforçada ou pala então várias informações aqui sobre essa cadeira Peguei lá da internet uma um texto qualquer Ai que tinha sobre uma cadeira feito isso eu só posso trocar aqui agora A cor desse texto não quero que ele fique branco por exemplo como ele tá dentro de um texte aqui

eu posso personalizar qualquer coisa que um texte permite a gente personalizar como a espessura dele que a gente já viu se ele vai est em metálico não a opacidade dele o tamanho desse texto várias outras coisas aqui então vou mudar só a cor dele aqui vou colocar aqui numa cor cinza TT pcor pgy para ele ficar ali num tom de cinza feito isso a gente já Personalizar aqui o conteúdo da nossa Tab aqui descrição vamos fazer a mesma coisa aqui pra nossa Tab detalhes Então vou criar copiar todo esse contente aqui da nossa Tab que

vai ser basicamente a mesma coisa aqui paraa outra tb aqui a diferença só vai ser o texto que vai tá escrito que eu vou só mudar aqui esse texto PR as descrições de um produto também que eu peguei aí na internet então dimensões de 0,8 m de largura 0,9 met de altura e assim por diante Material dos pés eucalipto então é a mesma propriedade aqui bom feito isso né a gente já criou aqui nossas TBS aqui agora a gente pode só personalizar essa cor aqui dela aqui em vez de ficar esse tom de azul que

ele pega pro padrão aqui que seria a cor do nosso tema a gente pode trocar essa cor aqui para poder ficar uma cor Amber né que é a cor que a gente já tá utilizando pro padrão aqui na nossa aplicação Então dentro aqui do nosso tabs aqui eu posso personalizar Esse componente então por exemplo primeiro parese aqui select index eu posso definir como zero que é o padrão já né que seria Qual que é o a Tab que vai estar selecionada pro padrão quando renderizar a tela da minha aplicação para pro padrão vou querer que

esteja selecionado o zero né que seria o nosso primeiro aqui se eu colocar um por exemplo pro padrão ele vai estar selecionado aqui no detalhes né que seria a nossa nosso componente de índice Um então Esso aqui você pode mudar também Qual que é o índice que vai estar selecionado por padrão e qual que é a cor do nosso indicador do nosso indicator color aqui eu posso mudar ele então pra cor Amber por exemplo que é a cor que eu tô usando na nossa aplicação então nosso indicator color essa Barrinha que fica aqui embaixo né

da nossa Tab e o nosso Label color então Label color é a cor do texto que tá selecionado Então vou colocar aqui nosso Label color vai ser a cor Amber então que o texto quando tá selecionado agora vai ser Amber e o indicator Color também vai ser Amber a gente também pode mudar Qual que é a cor do texto quando ele não tá selecionado Então por padrão colocou aqui para mim na cor branca eu posso colocar aqui o unselected Label ou seja quando ele não tiver selecionado eu quero que ele tenha a cor cinza por

exemplo então vai ficar num tom de cinza quando eu clicar ele fica aqui no tom Amber né com o nosso indicador também no tom Amber feito isso a gente terminou aqui essa personalização das tabs então vou clicar aqui e vamos criar o nosso próximo componente aqui depois das tabs que basicamente vai ser também né uma responsive Row aqui então eu também vou ter uma responsive Row mas basicamente a mesma coisa que a gente fez aqui nos component de cima eu vou ter uma responsive R aqui que eu vou renderizar né metade da tela da aplicação

aqui vai Ser o nosso input aqui onde eu posso selecionar né Qualquer a cor qualquer desse componente aqui e aqui nesse outro lado a quantidade que eu quero desse determinado produto então vou clicar aqui uma responsive Row que ela vai ter então um total de 12 colunas virtuais e quais são os componentes que eu quero renderizar nessa responsiv rle né então eu vou querer renderizar um drop Down esse drop Down Então já vou colocar aqui que ele vai ocupar seis espaçamentos né Que Ou seja a metade do tamanho aqui da nossa responsive Row quero que

el Cop de seis aqui de seis colunas desse total de 12 aqui né que tem então seria a metade o Label dele né Qual que é o texto que vai aparecer nesse drop Down eu quero que seja cor se eu salvar já vou começar a conseguir ver ele aqui só não tô vendo aqui porque a nossa Tab tá ocupando todo espaço disponível aqui da tela da nossa aplicação então para isso vou vir aqui em cima da minha Tab e Vou definir que o Tamanho máximo dela aqui vai ser de 150 pixis salvar agora então como

minha Tab tem um tamanho máximo de 150 pixis já tô vendo aqui o nosso drop Down aqui aparecendo Então vou dando aqui pro pro nosso dropdown eu defini aqui então que ele vai ocupar a metade do tamanho disponível aqui da nossa Row né E que ele vai ter um Label padrão que vai est escrito cor feito isso eu também posso personalizar esse Label né então Label Style aqui eu posso colocarlo text Style Que qual o estilo que eu quero aplicar no texto nesse texto aqui do Lab né que tá a cor aqui então eu quero

que ele tenha uma cor a cor do texto em si né seja Branca então White aqui e eu quero que ele tenha um tamanho de 16 pixis vou salvar então agora o nosso texto aqui com tá na cor branca né num tamanho de 16 pixels ali o tamanho da fonte Além disso eu posso colocar uma cor na borda aqui do nosso componente né então ele tá com uma cor preta aqui na borda eu posso Trocar essa cor aqui colocar uma cor cinza e também mudar a espessura dessa borda né então V colocar uma border wif

aqui de 0.5 para poder ficar uma borda um pouco mais fina aí na nossa aplicação Então pronto aqui mudei a cor da borda a espessura dela tudo que ficou faltando fazer agora é definir Quais são as opções que vão estar disponíveis nesse drop Down então só clicar nele aqui agora ele não abre nada para mim porque não tem nenhuma opção é definida aqui Dentro dele então vamos criar essas options agora que vai ser uma lista aqui de comentes do flash do tipo option drop Down option Então temos aqui o drop Down option e aqui eu

vou colocar só o texto né que vai aparecer aí na minha opção vou ter aqui um vai ser Amarelo vou copiar e colar aqui três vezes deixar aqui um amarelo outro vai ser vermelho e o último Vai ser azul salvei quando eu clicar agora no meu drop Down ele aparece aqui né essas opções para mim Que são os meus options tá então tenho amarelo vermelho e azul quando eu clicar nem um ele automaticamente já seleciona esse componente aqui dentro do nosso drop Down aqui bom feito isso a gente pode copiar e colar esse componente aqui

porque basicamente o outro vai ser exatamente a mesma coisa então vou copiar e colar aqui vou salvar já então a gente já tá vendo aqui a nossa cor também então vamos só mudar aqui as propriedades dele então em vez de cor Vai ser quantidade então quantidade e as opções aqui eu posso ir colocando né uma por uma né então tipo uma unidade e aqui duas unidades opid e aqui três unidades posso ir colocando na mão aqui a quantidade de unidades ou como isso aqui é a única coisa que muda né É só o número aqui

eu posso também fazer um list comprehen igual a gente fez ali em cima no nosso componente de estrelas aqui né da classificação do usuário então a gente pode fazer também Um list comprehension aqui já que tô dentro de uma lista né no nosso componente então vou falar aqui que eu vou querer então que esse text então ele vai ser um campo do tipo F string né e ele vai ter um número aqui que é o que eu vou renderizar aqui dele então vai ter aqui o nit ponto então para cada número que eu tiver aqui

num Range de 1 até 11 por exemplo Lembrando que o Range não inclui a ponta da direita então ele vai começar no um e vai terminar no 10 Porque ele sempre vai até um um elemento a menos aqui então S estô falando que eu quero até o 11 ele vai até tipo o 10 né que seria um um anterior aqui vou salvar e aí ele já cria dinamicamente aqui para mim ó uma unidade duas três quat que ele tá fazendo essa iteração várias vezes que para cada iteração ele cria um novo option aqui para mim

nesse drop Down aqui dessa forma eu tenho né dinamicamente eu posso criar quantas opções eu quiser aqui na nosso dropdown Feito isso né Só tá faltando agora alguns steps pra gente poder finalizar esse nosso projeto então aqui depois da nossa responsive Row aqui nossos próximos componentes que a gente vai criar são os nossos botões de adicionar a lista de desejos e adicionar o nosso carrinho Então vou colocar aqui um elevated Button e aqui dentro do nosso elev Button eu vou colocar aqui um wf nele de 900 pixels que eu vou quer que ele tem um

tamanho máximo de 900 pixels Para ele poder se esticar ali em todo o tamanho ali da tela do nosso da nossa aplicação vou colocar um text nele aqui que vai ser adicionar a lista de desejos vou salvar então a gente já tá vendo aqui o nosso componente né então adicionar se a gente deseja ele tá ocupando Todo o espaço disponível aqui da no nosso componente e basta agora a gente alterar o estilo desse texto Então colocar aqui que o Style dele então Style Vai ser igual FT P botão Style e aqui dentro do botão Style

tem várias as coisas que a gente pode mudar aqui no estilo dos nossos botões a gente pode mudar a cor do texto a cor do fundo Qual que é a cor do overlay né quando a gente clica no nosso botão se ele vai ter uma sombra o Surface chint color qual que a elevação dele que aquela sombra Projetada que ele tem se ele vai ter animação espaçamento tamanho tudo que a gente quiser mudar aqui nesse botão a gente pode mudar aqui Dentro desse buton Style Então a primeira coisa que eu vou mudar aqui eu vou

querer colocar um page nele aqui que é um espaçamento de 20 pixels Então vou colocar FT paging All de 20 pixels aqui nosso componente vou salvar então já deu um espaçamento maior aqui para ele e vou querer criar aqui o nosso Side que seria a borda do nosso componente eu vou definir ela então como sendo FT P material state pon default ou seja o estado padrão da borda eu quero que seja Um border Side que é com um dois pixis de espessura e uma cor branca F Colors P White aqui vou salvar então eu quero

que a cor padrão da minha borda né ela seja branca e ela tenha dois pixis aqui de espessura aqui além disso né a gente pode mudar diversas as propriedades aqui do nosso botão Então vou colocar aqui a cor de fundo dele então background color Eu também quero que seja um FT P material state então o estilo padrão Ou seja o default desse botão eu quero que A cor de fundo padrão seja Branco vou salvar então a cor de fundo default né padrão do meu componente vai ser na cor branca feito isso agora só preciso mudar

a cor do texto que o parâmetro color aqui pro parâmetro color eu vou fazer uma animação então uma vantagem de utilizar aqui o Button Style é que você viu que a gente tá passando aqui um dicionário para ele Esse dicionário vai ter uma chave que vai ser um materal state que esse material state pode ser Várias coisas então vai ser Qual que é o estilo do botão quando o estilo padrão né quando ele tá desabilitado quando ele foi quando ele tá sendo arrastado né no nosso componente quando acontece algum erro quando ele tá em Foco

quando a gente passa o mouse por cima então a gente pode definir várias propriedades aqui com nosso Bot botão então quando eu passar o mouse por cima dele eu quero que ele tenha uma outra borda ou uma outra cor tudo isso a gente pode definir Aqui e ele vai criar uma animação automaticamente aqui prente o nosso eh componente né então aqui no nosso botão eu vou querer que a cor dele padrão FT P mature state Def seja preta então FT P Colors p black vou salvar então a cor padrão tá preta se eu passo uma

azul por cima nada acontece né Então ele continua preta a cor de fundo continua Branca Mas eu posso fazer o seguinte eu quero que o nosso acord do texto então vai ser FT P mature state quando ele tiver S eh Passar o mouse por cima né que vai ser quando ele tiver coverage eu quero que a cor dele mude para preto na verdade deixa eu só alterar aqui Então na verdade a cor de fundo padrão do nosso componente eu não vou deixar nada eu vou mudar a cor de fundo aqui só para quando ele tiver

a gente passar o mouse por cima que eu quero que seja branco então e aqui o nosso a nossa cor do texto Então vou querer que ela seja branco por padrão e quando eu passar o mouse por Cima ela fique Preto então Observe que agora sim o nosso background color aqui ele só vai trocar pra cor branca quando eu passar o mouse por cima dele então passei o mouse por cima e o nosso botão ficou com a cor de fundo Branca quando eu tiro o mouse ele volta para cor padrão e da mesma forma cor

do texto né quando eu passar o mouse por cima dele eu quero que o texto fique branco e por padrão ele seja Branco quando eu passar o mouse por cima eu quero que ele fique Preto e a cor padrão Vai ser branco aqui então ele já faz automaticamente pra gente né Essa troca aqui nas cores do nosso componente e a gente pode mudar várias outras coisas aqui né também a borda para ela poder mudar quando eu passo o mouse por cima qualquer coisa nesse sentido aqui a gente pode criar a nossa aplicação feito isso eu

posso copiar esse componente aqui colar ele aqui de baixo de novo que eu vou ter o nosso próximo elemento que vai ser Adicionar ao carrinho vou salvar então já tem aqui nosso adicioná ao carrinho e agora só vou trocar qualquer cor dele né que eu quero dar mais destaque aqui para esse carrinho Então vou querer que a borda dele seja na cor Amber então ele tem uma cor amarela ali e da mesma forma né eu vou querer agora né que a cor de fundo dele de fogo então a cor padrão dele de fundo já seja

o amarelo vou salvar então a cor de fundo padrão já é o amarelo a cor do texto padrão seja Preta e eu não vou querer criar uma animação quando eu passar o mouse por cima aqui nessa cor de fundo eu quero que ela fique sempre preta ali e pronto a gente já tem nosso componente agora né com estilo diferente agora um do outro esse aqui que tem uma animação quando a gente passa o mouse por cima Esse aqui fica sempre no mesmo estilo né quando a gente passa o mouse por sema aqui mas ele tem

uma cor de maior destaque aqui no nosso layout aqui da nossa aplicação Agora úc coisa que a gente precisa fazer para poder jogar ele aqui pro final né para poder dar um espaçamento aqui é por exemplo criar um contêiner vazio que vai ocupar Todo o espaço disponível aqui na nossa Colon né quando não tiver nada renderizado então antes aqui do nosso elevated buton aqui nosso primeiro botão que é adicionar a lista de desejo eu vou criar um contêiner e eu vou falar que esse contêiner aqui eu quero que ele se expanda então expand GL true

ou seja ele Vai ocupar Todo o espaço disponível que não tá sendo utilizado aqui dentro do nosso da nossa coluna aqui do nosso Card E com isso a gente praticamente concluiu aqui o nosso projeto só voltar aqui eu vou ativar aqui o nosso produo images e agora a gente tem aqui né os nossos dois componentes né um do lado do outro e toda a animação funcionando única coisa que eu faltando a gente fazer é que lembra que a gente tá dentro de uma responsive Row então a gente só precisa Falar quantos espaços eu quero que

a nossa imagem Nossa dtos ocupem né quando eu aumentar ou diminuir aqui o tamanho da tela da minha aplicação Então por padrão como eu não defini o parâmetro Call aqui para eles eles estão ocupando Todo o espaço disponível Então esse aqui tá ocupando Todo o espaço disponível da Row e esse aqui todos passam disponível por isso que eles estão um eh jogando né para baixo ali do outro ali na tela da minha aplicação então para poder mudar Isso eu posso vir aqui em cima dentro do nosso produto de TS por exemplo eu posso colocar que

eu quero que a quantidade de colunas que ele vai ocupar eu quero que seja se for uma tela pequena ou seja XS eu quero que ele ocupe a linha inteira se for uma tela média ou seja MD eu quero que ele ocupe a metade do tamanho da tela da mesma forma vou pegar a mesma propriedade e vou colocar aqui também na nossa Images Vou salvar e agora se a tela da minha Aplicação aumentar eles vão ficar um do lado do outro que ou seja eles vão estar ocupando metade do espaço disponível cada um desses componentes

se a tela da minha aplicação diminuir eles vão ficar né ocupando Todo o espaço disponível aqui de marrow então vai ficar um embaixo do outro aqui na nossa aplicação E aí como eu tenho um elemento de baixo do outro aqui eu posso abilitar o scroll da minha página né então posso vir aqui na minha página colocar um page.on Scroll vai ser igual a FT scroll Mode e posso colocar ele como automático Então se houver scroll na minha página ele vai abrirar aqui então a barra de rolagem senão se a tela da minha aplicação E se

o meu componente já tiver tudo renderizado na minha tela aqui a gente não tem um scroll aqui aparecendo no nosso componente então vai ficar automático vai automaticamente verificar se a nossa aplicação ela tem um scroll ou não Para ser aplicado ali agora Algumas outras coisas que a gente pode fazer por exemplo aqui no nosso caso dess aqui Observe que a nossa estrela né ela tá um pouco mais para cima aqui do nosso texto então a gente pode ghar ela aqui no centro então para isso eu vou vir aqui no nosso produto de taos vou lá

naquela parte que a gente tem a nossa responsiv Row aqui onde a gente criou né nossas estrelas e o nosso texto aqui e eu vou falar então que na minha responsive Row né esses dois componentes Eu quero que eles fiquem alinhados então vertical alignment deles eles fiquem alinhado no centro então V centro aqui vou salvar e a minha estrela agora vai alinhar no centro aqui junto com o nosso texto né para poder ficar aqui mais ajustada aqui em questão de layout outra coisa que a gente pode fazer também aqui falando das nossas estrelas né É

definir um espaçamento aqui para cada uma delas então aqui por padrão já colocou esse espacinho aqui entre elas mas também Pode mudar com a propriedade aqui spim você pode colocar né Por exemplo cinco Pixel de espaçamento deixar as estrelas mais juntas colocar 10 Pix de espaçamento elas ficam um pouco mais separadas então colocar cinco aqui para elas ficarem um pouco mais juntinhas ali e colocar a propriedade wraap igual a fse para ele nunca quebrar as estrelas né uma para baixo da outra aqui elas sempre ficarem uma do lado da outra independente da renderização ali do

Tamanho da tela da nossa aplicação E com isso a gente concluiu aqui o nosso projeto né totalmente responsivo agora então se a gente muda aqui né o tamanho da nossa aplicação ele já ajusta aqui pro tamanho do nosso projeto né aumentando aqui ele fica um do lado do outro e aí você pode utilizar esse componente agora para poder renderizar qualquer coisa que você queira no seu aplicativo no seu site lembrando né que esse código né Ele é totalmente Multiplataforma então com esse mesmo código a gente consegue indizar essa aplicação tanto pro Windows quanto pro Mac

Pro Linux pra versão web para dispositivos mobile então dá para criar o aplicativo para qualquer sistema operacional com com esse mesmo código aqui né utilizando esse componente aqui você pode indizar ele para qualquer sistema operacional então isso aqui é um tipo de coisa que eu mostro lá no meu curso Flash 360 vou deixar o link aqui Na descrição para você dar uma olhada lá nas informações do curso sobre todos os projetos que a gente vai construir juntos lá a gente vai construir um portfólio completo paraa web a gente vai fazer aplicativos para celular né a

gente vai fazer Deploy dessas aplicações tanto pro Android quanto pro iOS a gente vai fazer Deploy também no Nossa aplicação online Então a gente vai colocar nosso portfólio no ar na web né utilizando sites gratuitos como github Page o God o cloud flare o render e também fazer aplicações para desktop né então a gente vai fazer um aplicativo que vai ser renderizado em diversos sistemas operacionais na verdade a gente vai fazer mais de 50 aplicações lá dentro do curso Flash 360 então para poder conhecer um pouco mais sobre ele clica aqui no link da descrição

que lá tem o vídeo né que eu tô explicando Exatamente tudo que a gente vai aprender lá no Flash 360 Então é isso né Eu Espero que tenham gostado aqui desse vídeo Se gostou já deixa seu like também segue aqui o canal Porque toda semana tem muito conteúdo novo por aqui e nos vemos no próximo até lá [Música] r