App 2: Pedra, Papel e Tesoura - Desenvolvendo com Flutter - Curso Flutter

agora que aprendemos a utilizar os componentes básicos de interface utilizando flutter vamos estar desenvolvendo mais um aplicativo com base nesses conhecimentos que a gente adquiriu até então o aplicativo que a gente vai estar desenvolvendo nesse vídeo é o aplicativo do jogo pedra papel e tesoura ou Joaquim Pou se você ainda não viu os vídeos anteriores onde eu mostro como utilizar cada um desses vídeos de shake vai estar usando nesse vídeo que eu recomendo que você pausa esse vídeo e assista a parte 1 e a parte 2 dos componentes de interface do flat que eu tô

deixando aqui no link da descrição vocês vão ver como que a estrutura básica do projeto utilizando planta e como que é o uso de cada um que de padrão que a gente vai estar utilizando nesse vídeo se você também quiser acompanhar eu tô deixando na descrição o link do vídeo que a gente construiu o app de frases aleatórias então você pode estar comprando todos esses vídeos para você tá adquir conhecimentos de todos os componentes lâmina de todos os vídeos do flutter que a gente vai estar praticando Então vamos começar com o nosso desenvolvimento do pedra

papel tesoura é a primeira a gente tem que perceber o que que a gente vai precisar né quais vídeos vão ser mais apropriados para o nosso projeto a gente percebe que o nosso App ele vai ter essa mensagem aqui no topo né seria o título do nosso app e aqui o restante dele vai estar no corpo então sabendo dessa organização a gente já pensa né de utilizar o Ester como estrutura principal do nosso é então no nosso escape a gente vai colocar né web barco a mensagem de Oktober e o corpo dele ele vai conter

esses parâmetros E aí se a gente olhar no nosso corpo né o corpo do nosso app a gente vê que ele vai ter quatro elementos né o primeiro ele seria um texto escrito escolha o segundo vai ser essa imagem né padrão que vai ser sempre vai ter a escolha é do app e o terceiro vai ser uma outra mensagem para escolher a opção e o quarto vai ser Três de Maio acho que vai ser a opção de usuário então é que a ideia desse app pessoal vai ser a gente clicar uma dessas opções e no

momento que a gente clicar em uma dessas opções o app vai gerar uma das escolhas aleatórias e vai mostrar nesse Campo aqui em azul e aí aqui nessa mensagem de escolha uma opção ela vai aparecer se a gente ganhou ou perdeu com base na escolha que a gente foi feita aleatoriamente tá E por que que a gente pode ver que para ter essa organização no corpo do esqueleto a gente vai estar utilizando o colo né para organizar de forma vertical Então a gente vai ter um colo com quatro elementos E aí o último elemento desse

colo a gente percebe que a gente vai ter três imagens então o elemento do qual vai ser E aí nessa rua a gente vai colocar também três imagens uma do lado do outro então basicamente essa estrutura principal do nosso app vamos estar então focando em itabiritando essa de interface E aí antes de a gente continuar né todas essas imagens aqui que a gente vai estar utilizando eu peguei né desse site do pizza B né mas a gente pesquisar aqui em alguma desses atributos de mãos que ele vai mostrar algumas opções para você aqui se eu

não me engano né o Pixel baby não tinha eu peguei de um parceiro que ele me indicou E aí eu tô utilizando essas imagens Então vamos começar com a estrutura do nosso projeto eu vou abrir aqui o terminal e aqui eu vou usar então comando do flutter para a gente criar um projeto já estruturadinho né com tudo que é necessário para o nosso desenvolvimento Então vou dar aqui o pedra papel underline tesoura tá vou criar projeto com esse nome vamos esperar a criação dele aqui eu errei o nome tá botei um R no final Então

deixa eu apagar pupper Creator não Creator E aí vamos esperar a construção do nosso projeto Então beleza Já construiu nosso projeto e agora a gente vai mudar para a parte do pedra papel e tesoura que foi criado Então vou dar uma limpada aqui se a gente dar um LS todos os nossos arquivos e pactos certinho vou estar iniciando vs code para gente começar aquelas estruturas necessária que a gente vai precisar para o nosso projeto Então vamos começar a estar no outro ano o que que a gente vai precisar nele então vou começar a excluir essa

parte de tex que a gente não vai estar implementando o teste limitado Então vou dar aqui um chifre de elástico para gente remover de uma vez não quero atualizar o meu Scott e vamos confirmar a direção da parte de tá então excluir a parte de tex como a gente vai ter imagens no nosso projeto eu vou criar também uma pasta de imagens aqui na raiz do nosso projeto e aqui dentro de margens eu já vou copiar todas as imagens necessárias que a gente vai estar utilizando então aqui a gente já pode ver o copiei Já

as imagens a gente vai ter quatro imagens a primeira vai ser esse depou o ponto png que vai ser aquela imagem padrão quando a gente iniciou é ou seja antes de um app de fazer escolha ele vai mostrar esse círculo azul e vai ter imagem do papel vai ter imagem do pedra e a imagem do tesoura tá então a gente vai ter que organizar essas quatro imagens aí para conseguir utilizar essas imagens no projeto na nossas aplicações do Dart a gente vai ter que então configurar o clube Sec pontual então vou abrir aqui O Arquivo

Público E aí lá na sessão eu vou colocar todo o nome dessas imagens tá então aqui controle de estar comentando essas vou pular mas não começar então a definir a sessão de access então aqui no Aécio a gente vai configurar de quatro imagens necessária Então a primeira vai ser o imãs da barra vai ser de png que aí a gente vai ter uma para cada opção Então deixa eu fazer logo essa cópia de quatro das Três de Maio Então vai ser uma pedra a outra vai ser papel.mg e a última então tesoura.pnv tá então feito

isso a gente já configurou essas imagens aqui tá então repare que eu sempre vejo o caminho e configurei o arquivo do pubspec ponto alto então feito isso a gente começa agora então a desenvolver a nossa aplicação Então vamos entrar aqui no nosso meio e aqui no nosso meio então eu vou tá Apagando tudo para a gente começar a praticar praticar do zero tá então aqui Como deixa eu colocar a chave e vai começar usando a função e aí ele vai estar utilizando como a gente fez nas últimas aulas usando o material a gente vai estar

definindo já os padrões iniciais Vamos colocar um Type nele chamar aqui de conhecer o nosso idiota Vamos colocar aquele bumbum na nossa emulação e Vamos definir qual vai ser a nossa página principal Vou declarar aqui vou criar um objeto chamado Nossa homeopay perfeito e isso a gente termina então de configurar o nosso arquivo meio a gente vai ter uma fome dele vai ser um outro nível de quem que vai criar que é um home page E aí no Home bege vai estar criando um outro local tá então automaticamente aqui a gente já percebe que o

inverso ele já importou manter o ponto da arte que a gente vai estar precisando então aqui eu vou estar criando no libido agora uma página eu vou chamar de peixes e dentro de peixe eu vou estar criando o arquivo home ponto dar e aqui no ramo ponto da arte pessoal eu vou estar criando Então a nossa classe home page então aqui como a gente vai precisar alterar o estado e para facilitar vou criar logo nós vamos pedir como se fosse um estético Então vou criar estético e vou colocar o nome de peixe tá o nome

é mais diferente então já foi criado repare aqui que ele já empurrou tudo que é necessário para que criar nossos vídeos e agora então eu vou estar importando o nosso home page criar então clicando aqui ó eu vou clicar nessa lâmpada amarela esquerda e aquele já dá opção para importar para nossa parte de peixe então aqui ele já encurtou o home ponto baixo na página de beijos tá no nome na parte do nosso projeto Então feito isso a gente já tem a estrutura padrão da nossa aplicação Então antes de começar a rodar vamos começar declarando

então o nosso esqueleto onde a gente vai usar então voltando aqui no Home ponto da arte dentro do método build da nossa classe de estado né no nosso home page a gente vai estar retornando então um encéfalo Então vamos estar criando o nosso escape E aí eu vou estar definindo esse daqui a pouco a parte lá do Web barco então vou estar iniciando e eu vou colocar simplesmente um título no WhatsApp então nosso título ele vai ser um texto escrito somente o nome Joaquim e eu vou definir o nosso bode é o nosso bo ficar

mais organizado eu vou colocar dentro de um container E aí colocando dentro de um container né a gente consegue ter aquelas opções de alinhamento né usando o padding e o marketing e aí dentro do nosso container um charme de principal vai ser então um polo né livre que a gente vai ter quatro elementos em colunas Então já vou iniciar o Collor E aí no colo a gente vai definir nossos dentro do tiller é aquele tilda só para a gente começar a ver alguma coisa vamos colocar três textos aqui beleza então isso aqui seria a estrutura

padrão do nosso é tá a gente vai ter um skate vai ter o menu lá no topo que é o Web bar com o nome da nossa aplicação a gente vai ter depois um colo que eu coloquei dentro do container E aí no colo ele vai ter quatro elementos de forma parecida como a gente viu no nosso exemplo se você chorar aqui ó ele vai ter o Joaquim e mais quatro elementos incolor Então vamos estar renderizando a nossa aplicação para a gente ver o resultado que ficou então terminou de renderizar deixa eu colocar aqui para

vocês verem então isso aqui é como está o Nossa aplicação então ele já tem aqui o jockey pow e já tem então três elementos no nosso colo tá que eu coloquei aqui três textos Então feito isso que a gente precisa né Se a gente for comparar lá o que tem no slide então a parte do epibaia já tá configurado né então o que que eu vou fazer vou colocar então agora de fato os vídeos necessário para gente então primeiro ele vai ser então um texto né Então deixa eu colocar o primeiro vai ser um texto

mesmo vou colocar então escolha do app o segundo ele vai ser uma imagem né vai ser a escolha feita aleatória Então como a gente vai estar criando é ele vai vir com a imagem padrão então a gente vai estar usando o ponto e Vamos definir aquela imagem padrão que vai estar aí o segundo vai ser o texto que vai ser o escolha uma [Música] é opção e por final vai ter uma outra imagem vou pegar uma imagem aqui até vou colocar primeiro do pedra dá para a gente ver como é que vai ficar até então

simplesmente agora é colocou de fato Quais são os elementos da nossa coluna então aqui ele já mostrou como é que ficou então a gente repara né E já tá certinho sua conta agora a gente vai ajustar as configurações as imagens estão muito grandes então a gente vai ter que fazer umas configurações dessas imagens tá então aqui eu vou estar mudando a altura delas para ver se a gente consegue tá deixando um bom estado Então vamos estar mexendo aqui na altura da imagem só para a gente ver como que fica na tela então aqui no primeiro

eu vou querer vou testar aqui uma altura de 50 Viu como é que vai ficar e aqui na escolha do usuário ele quer que eu comecei um pouquinho menor né Vamos deixar sempre a escolha do usuário grande então vou deixar aqui o sem vamos ver como é que isso vai ficar então aqui ó a gente já começa a ver que pô ficou legal né então já começa ter esse tamanho legal aqui eu posso diminuir né fica com 80 e alguém que já tem uma situação aqui legal então agora né Vamos colocar de mais imagens aqui

nessa parte de baixo então o último widget né dentro do Collor ele vai ser na verdade uma Row Então vou estar criando aqui uma lol vai ser o maluco e aí falou a gente vai definir Quais são os estilos dessa roupa Então essa primeira imagem agora vai ser o primeiro elemento da nossa roupa Deixa eu botar aqui a vírgula certinho para a gente não é se perder e aqui então primeiro elemento da nossa gol vai ser o pé tá então mais três imagens e vamos já mudar o nome tá então primeiro é o pedra o

segundo vai ser o papel e o terceiro vai ser o tesoura tá então feito isso né se a gente olhar aqui o nosso exemplo a gente vai ver que já ficou aqui bem organizadinho né então a gente já colocou tudo que é necessário para o próximo para o nosso app Então os três imagens estão organizadas horizontalmente E o restante tá verticalmente então agora o que que a gente vai fazer antes de criar lógica de fato Vamos tentar organizar todos esses componentes a gente botou aqui na nossa no nosso Bole do scapod para que fique mais

intuitivo de usar então aqui em relação as imagens não vai estar modificando nada então aqui eu vou estar começando a configuração com o primeiro vídeo esse texto aqui escolha do é então se a gente for tá olhando lá no slime ele tem que ter um espaçamento ali no topo né ele tem que ficar um pouco centralizado então voltando aqui no nosso código e que eu vou estar fazendo vou estar colocando esse Tex dentro de pele tá então pele ele vai ter a opção do pele para gente então o nosso charge vai ser o nosso escolha

do app então aqui já tá configurado certinho e eu vou colocar então espaçamento no topo então aqui no nosso topo o que que eu vou colocar eu vou usar o EDGE vou botar então o homem Olha eu vou botar o espaço aqui no topo eu vou dar um espaço de 32 deixa eu ver como é que vai ficar ó então 32 ele já deu um espaço legal eu vou dar um Espaço agora também embaixo para ele ficar um pouco distante né vou dar também aqui no botão vou colocar o espaço de 16 estão fazendo isso

que que a gente vai ter ele já deu um espaço legal tá agora eu vou para configurando o peixe desses dá uma aumentada na fonte Então dentro do Tex eu vou estar aqui então baixando e vou para definir um Style então aqui ele vai ter um Style que vai ser o que a gente vai usar e o que que a gente vai estar definindo aqui ó vamos estar definindo vamos deixar 20 igual não é que a gente fez anteriormente e vamos estar colocando também fluente em Então vamos dar uma fonte e botar em Val bold

aqui feito isso a gente já vai ver uma diferença Então já tá ficando legal então já pode pegar seus membros de configurações do Style e colocar lá também no escolha uma opção no segundo elemento que tem imagem padrão do herpes não vai estar mexendo Nada vamos estar colocando as mesmas configurações de texto no terceiro elemento e para que que eu vou fazer já vou copiar esse peguem no primeiro passo a partir de ganhar um tempo e o colocar embaixo Aqui do Tex E aí a única diferença que a gente vai ter É de fato a

mensagem do Tex Então vai ser escolha uma opção o lugar do escolha do Ego eu fazendo isso a gente já tem essa configuração deixa eu retirar aqui então o táxi vou colocar um vírgula aqui embaixo né Para a gente definir o nosso último elemento de rolo Então acho que faz isso vai ficar uma boa configuração legal né então a gente precisa trabalhando essas três imagens então aqui no jogo eu vou estar utilizando aquele alinhamento que a gente tem disponível né do Meio access online e aqui no manches online eu vou estar separando que igualmente vou

usar esse Space que aí ele já vai estar ocupando toda a parte horizontal Olha que legal aqui eu já posso até definir como é que é a configuração cruzada eu vou estar colocando mais ou menos para ele aparecer no centro então vou colocar aqui o cross access vou colocar então para começar no centro dá para ver como é que ele vai ser posicionar já colocou aqui no centro então a gente já tem essa organização e como tá colocando também nem é que vocês a Line Man no colo só para ver como é que fica vou

botar o Space vamos ver como é que ele vai se organizar então aqui a gente repara né que já ocupou a tela toda do nosso contente só que eu queria que ficasse um pouquinho mais ali para cima né então vou colocar um espaçamento na parte de baixo só para que é disponibilizar e não fique muito lá embaixo tá então aqui eu vou entrar no container que que eu vou fazer então eu quero é que esse espaçamento aqui ele fica um pouco mais ali na metade da tela Então a gente tem várias formas de estar fazendo

isso eu vou ajustar isso colocando pele lá na parte de baixo né dá uma subida nele e aí para usar esse pé eu vou usar aqui dentro do container então aqui no contente eu vou usar o pedem vamos chamar o EDGE inset e vou colocar só um para definir a parte de baixo então no meu boram eu vou usar aqui uma distância de 150 pixels vamos ver como é que vai ficar então a gente já preparou praticamente a do nosso App ele já tá bonitinho agora a gente precisa é criar a lógica para a gente

programar então repare que a gente não consegue clicar em nada tá então a gente vai querer transformar esses três imagens clicáveis e atualizar sempre o caminho dessa imagem Central então para a gente deixar essas três imagens explicadas a gente vai estar utilizando o linked do jast detector então não cabe imagem aqui no nosso Globo a gente vai criar um gester detector lembrando como é que eu uso dele a gente vai ter um charme e a gente vai ter os eventos que a gente pode ter do usuário então aqui eu vou tirar e colocar ele como

E aí eu vou fazer tudo para os outros tá antes de fazer isso o evento que a gente vai configurar vai ser um simples clique do usuário Então a gente vai usar o método e nesse método de um top ele vai ter essa função que a gente vai criar a ter essa mudança da imagem então eu vou eh colocar aqui uma função anônima ali já tem dica para a gente usar Power function E aí eu vou colocar aqui então vou criar uma função externa para ficar mais organizado de outra aqui o método de player Então

vai ser um play que ele simplesmente vai gerar uma opção e verificar se venceu ou não eu só prejudicar que vai ser o método privado usar esse underline play então só para a gente não ter emagrecer eu vou criar logo esse método de play aqui em cima no nosso home page então aqui a gente vai ter um novo método que eu chamei de play então já inicializei esse método e agora a gente não tem mais esse erro apontando aqui então da mesma forma eu vou replicar o gesto de imagens para que vírgula faça um elemento

vai ser outro gesto detecto mas terceiro dia f de técnica a única coisa que vai mudar o nome das imagens o segundo aqui vai ser o papel o terceiro vai ser o tesouro tá e a gente vai poder apagar esse imã de reais a gente não precisa mais dele então feito isso a gente deixou Então clicável as nossas imagens Então deixa eu dar uma atualizada aqui e aqui né ele muda né para mostrar que é um link mas a gente tá usando o gesto detec Então vamos estar configurando isso aqui nós vamos estar só conferindo

se tá funcionando Nossa gester então abre aqui console e aqui ao clicar em que tem ali ó a mensagem do teto que acaba aparecendo transformou essas imagens em multiplicado então agora a gente precisa fazer o quê A gente precisa Então passar qual que é opção para a gente jogar e fazer essa escolha aleatória do app e exibir na tela né se a gente perdeu ou não então vamos estar fazendo o que a gente precisa então bonita nesse método de play saber qual que é a opção do usuário Então a gente vai ter várias formas de

fazer isso tá pessoal então para cada chamada do Play eu vou criar um argumento de entrada para estar dizendo qual que é opção então a gente poderia passar por exemplo um inteiro né dizer que o zero seria pedra um seria papel e duas seria tesouro a gente pode passar uma streaming de fato tá então eu vou estar usando isso dele só para facilitar o entendimento Então vou chamar aqui né quando a gente clicar na imagem de pedra ele vai chamar o método Play com argumento de pedra quando clicar no papel vai chamar o play com

papel um tesouro ele vai chamar o play passando tesoura então fazendo isso só preciso colocar então no método de freio que ele vai receber aqui ó o método que vai ser a nossa escolha eu vou chamar de Joyce tá escolha do usuário ele vai poder ser exibido aqui na tela então só para a gente verificar essa escolha vamos estar imprimindo também a escolha do usuário tá então um tep de botar aqui dois pontos e exibir o nosso tá então como é uma Strike não precisa usar o método Então feito isso vamos estar aqui eu compilando

é restartando então quando a gente clica aqui no primeiro ele tá exibindo lá que foi opera segundo é o papel o terceiro é o tesouro então foi tranquilamente a gente consegue tá captando Qual que é a escolha do usuário Então feito isso agora a gente precisa gerar uma escolha aleatória a gente tem várias formas de fazer isso eu vou estar fazendo na forma mais simples para você estarem acompanhando e entender então aqui gente eu vou estar usando aquela função né aquele objeto de Gumball que tem suporte padrão do dar então a gente tem Nossa escolha

o que que eu vou fazer então vou estar usando que ele sempre Escolhe um número aleatório Então vou estar criando inteiro que eu vou chamar de ir que vai ser a posição de um vetor de opções então a gente pode considerar que aqui no Home Stay a gente pode ter um atributo que é uma lista com todas as opções Então vou criar aqui uma lista de strike então a gente pode estar explicitando que é uma estende Ou não Aqui eu não vou estar explicitando então ele vai ser uma lista de opções para chamar de options

E aí quais são as opções a gente vai ter eu vou estar definindo essas opções aqui embaixo Então a primeira opção vai ser pedra a segunda vai ser o papel é a terceira vai ser E aí o que que eu vou fazer é gerar uma posição aleatória para esse vetor de option para ele saber se vai escolher pedra papel ou tesouro então aqui embaixo né dentro do nosso método de play eu declarei se ele vai receber então o resultado desse dessa classe padrão da arte de Randon E aí vou estar querendo usar o Next vai

definir qual que é o tamanho desse valor então onde a gente fazer isso eu vou estar importando essa classe do Random que é o dart.net é tão importante aqui o Darth map ele já tá reconhecendo o a parte de Rainbow e aqui no Mac City eu vou passar Qual que é o tamanho máximo que eu quero com certeza opções seriam três escolhas possíveis né que vão variar de zero até dois só que só para deixar mais automático vou passar de Fato né o tamanho do vetor de óptico da lista de óbito eu vou usar o

óculos então por isso a gente vai ter nossa escolha sendo feita então a gente pode imprimir qual que foi essa escolha então eu vou colocar aqui embaixo né a gente vai ter que clicou e eu vou colocar aqui mais e vamos colocar aqui qual foi essa escolha deixa eu dar um espaço aqui aqui vai ser o ippon tá então feito isso a gente já vai estar verificando qual que foi a escolha da máquina não deixa eu dar uma renderizada aqui ó então aqui no momento que eu clicar a gente vai colocar aqui no depois para

ver que que vai acontecer ele já vai mostrando aqui qual foi a escolha então aqui o pedra Ele Escolheu pedra clico de novo ele continua escolhendo pedra aqui já escolheu o papel né que escolheu tesoura tá e assim por diante a mesma coisa que quando é papel e aqui quando é tesoura então repara que esse Rambo ele vai sendo modificado a perder tesoura ele escolhe um valor diferente então o que que eu preciso fazer então agora pessoal só fazer a lógica né para saber se a gente venceu ou não né então agora que a gente

já tem esse valorizar aleatórios da máquina representada pelo I qual que é escolha do usuário aqui no choice então a gente poderia comparar né sabendo esse arreio aqui poderia comparar diretamente usando os números mas daqui a voltar para sacrificar e voltar obtendo Então qual de fato a escolha da máquina Então vamos dizer que Rainbow a escolha aleatória vai ser igual ao que né a gente vai pegar então do options e pegar o que foi escolhido passando o índice ele vai ter uma dessas opções do nosso Arreio de Óbvio foi gerado aleatoriamente usando o Randon para

estar selecionando qual índice de options a máquina vai escolher então aqui vai ter uma dessas opções e aí para a gente saber se a gente vai ganhar ou não a gente vai comparar cada um conforme a regra do jogo Então aqui embaixo que que eu vou fazer né aqui a gente pode estar é para facilitar colocar esse rango aqui para a gente ficar vendo na tela e agora a gente vai fazer a regrinha né a regra para saber o que que é o vencedor ou não então aqui eu vou estar fazendo o seguinte né vou

primeiro pegar todas as opções de situações que a gente pode vencer então quando a gente vence a escolha do usuário foi igual a pedra a única opção para vencer é se a máquina né tesoura né porque pedra vence tesoura então aqui vai ser igual tesoura Então se isso acontecer a gente vai saber que o usuário venceu a gente vai exibir então uma mensagem na tela que venceu Então a gente tem que colocar todas as opções então para facilitar deixa colocar cada opção entre parênteses para escolher papel e a máquina de colher pedra né pedra é

papel bem se perde e a gente vai ter de novo ou então ou a última forma de Vencer é esse usuário que pode tesoura e a máquina escolhe papel tá então nessas situações né o usuário sempre vai vencer e a gente vai colocar então aqui uma mensagem que ele venceu senão a gente vai ter a opção que o usuário de fato vai perder então para usar o perder qual que são em regra Então vou estar copiando aqui todas essas três opções cruzaram se o usuário tipo de pedra para ele perder a máquina tem que escolher

papel para o usuário perder escolhendo o papel a máquina tem que escolher tesoura e para usar o periscor no tesoura a máquina tem que escolher era tá então faz é isso a gente já tem a configuração de quando o usuário perdeu e aqui a gente vai ter um alce que pode acontecer em parte né então élce vai ser a situação de um pai tá então nessas três situações a gente vai exibir Qual que é a mensagem correta E aí essa mensagem né que a gente vai exibir na tela a gente vai colocar na parte onde

tava a escolha do usuário né então aqui ó no lugar desse escolha uma opção a gente vai atualizar ele colocando se perdeu venceu ou empatou então só para a gente configurar isso eu vou lá nesse escolha uma opção ele agora ele vai ser dinâmico Tá bom então vou retirar essa escolha uma opção ele vai ser agora alguma mensagem vou usar Então vou chamar de Messenger Messenger e agora vai ser um atributo privado vou criar aqui em cima então depois de óbito a gente vai ter uma string e vai ser o nosso Messenger que vai estar

inicialmente pedindo para escolher uma nova opção tá escolha uma opção Então se a gente renderizar agora a gente vai ter então é tudo funcionando tranquilamente Então agora que ele já fez essa lógica bate agora colocar a regra para estar atualizando de fato esse atributo de Messenger então aqui quando o usuário vencer que que a gente quer exibir lá na tela a gente vai querer exibir a mensagem que você venceu tá então para a gente atualizar isso né lembrando o que que a gente precisa no estético vídeo a gente vai ter que chamar o método e

a gente vai precisar passar uma função para ele aqui eu vou estar passando uma função anônima então o que que vai ser feito aqui no site state a gente vai estar atualizando então o nosso atributo de Messenger Então a nossa mensagem agora vai ser modificada é dizendo que você venceu eu vou botar uma carinha feliz aqui então você venceu se caso a máquina tiver vencido né então a gente vai configurar uma outra mensagem dentro do corpo do ela se é que no corpo dela sempre a gente vai ter novamente os 7 state agora dizendo que

você perdeu uma carinha de triste e Se caso tiver empate vai configurar o satisfeito então passando a mensagem de papel é te dar aquela pescaria tá então é isso a gente já configurou né o resultado do nosso jogo Então vamos estar comprando isso e vamos ver como é que tá funcionando esse nosso método de play aí tá sentindo rodar aqui né vamos observando aqui também no The Voice console então aqui a gente vai escolher pedra a gente vê qual que a gente perdeu a você perdeu e aqui que que teve lá no método a gente

escolheu pedra O Rambo foi papel tá então vou selecionar de novo aqui o pedra empatamos né o a gente escolheu pedra O que foi aleatório foi pedra também vamos ver se alguma pode perder de novo perdeu empatando Tá difícil ganhar hein Agora sim ganhei então agora né teve pedra e o ano foi tesoura tá bom pessoal a mesma coisa que a gente utiliza o outro tá aqui foi escolhido papel e aqui tesoura né tesoura aqui ó Venci porque os cone de tesoura e a máquina papel tá então Basicamente já fez a lógica funcional né do

nosso aplicativo o que a gente tá precisando fazer agora é exibir a escolha do da máquina na forma de imagem aqui no lugar da padrão então como é que a gente vai estar fazendo isso a gente vai estar então alterando né Qual que é o caminho da imagem de acordo com a escolha da máquina tá E aí para a gente fazer isso então a gente vai ter que definir né que essa imagem lá de full vamos lá nela Ela vai ter o seu caminho de dados né o caminho da imagem passado por algum outro parâmetro

então aqui no nosso deixa eu ver aqui no nosso Onde está nossa imagem ó então aqui no nosso colo a gente vai ter o nosso imagina essa te passando essa imagem de fundo O que que a gente precisa fazer é passar de fato essa esse caminho da Imagem como se fosse um parâmetro né ele tem que estar em alguma atributo eu vou tá criando aqui um instrumento passando qualquer um E aí para a gente conseguir carregar isso que poderia tentar atualizar aqui no nosso imediato agora vindo dessa desse caminho então fazendo isso agora que precisa

só alterar imã de peste lá no nosso método de play a gente poderia colocar então atualização desse caminho em cada set só que eu vou estar fazendo isso somente uma vez Então no momento que a gente sabe também qual que é a escolha do usuário o que que eu vou fazer né Vou atualizar então em cima de ponto eu vou estar atualizando ele como né ele eu vou fazer aqui uma concatenação Ele sempre vai estar no IML barra mais o nome do arquivo né o nome da Escolha ponto png então aqui eu vou fazer vou

passar qual que será a escolha do usuário Então dessa forma né Eu sempre vou conseguir pegar a imagem correto então eu fazendo isso tentando já rodar que que isso vai acontecer ó vamos estar atualizando aqui então vamos ver como é que vai estar acontecendo Então ao clicar em cima de qualquer opção a gente vê então que a escolha do F já é atualizada tá então aqui a gente botou eu descobri o papel já foi exibido para a gente e se a gente fica clicando aqui ó ele vai atualizando né que empatou né Depois é que

a gente perdeu né porque eu fui escolhido do papel e assim por diante finalizou o nosso aplicativo Então essa é uma forma de estar fazendo passando aqui atualização do caminho eu vou estar mostrando uma outra forma como a gente poderia estar gerenciando essa imagem aqui a gente usou o caminho de fato a gente poderia definir uma variável que de fato armazenar-se uma imagem do aplicativo por exemplo E aí a gente poderia então iniciar uma classe chamada de a gente colocaria qual seria o caminho da imagem padrão para que a gente vai ter o e-mail de

defunto ponto png E aí fazendo dessa forma a gente ao invés de passar o caminho da imagem de passaria esse objeto a ser times lá no nosso colo tá então deixa eu encontrar onde está a nossa imagem ó então aqui no lugar do emergência a gente poderia fazer de outra forma a gente poderia distanciar a classe de minas aí dentro de imagem a gente tem algumas configurações configuraria Então qual que seria o objeto de emergência que a gente queria passar né vai ser a nossa variável imediato na nossa cultura imediato e aqui a gente configura

o rate da mesma forma então isso aqui seria uma outra forma que a gente poderia estar manipulando essa imagem então se eu dar aqui a gente vai dar a nossa aplicação a gente vê que ele não mudou nada então funcionando certinho na hora que a gente faz a nossa lógica de atualizar a imagem a gente poderia ao invés de atualizar esse caminho a gente poderia estar atualizando essa variável de imediato então aqui nesse caso a gente ia criar um novo imediato então usando essa nova forma de usar imagem eu posso comentar esse hino então a

gente precisa atualizar o nosso atributo do imediato é imediato ele vai ser então agora é uma Nova Instância do A7 imer coloca aqui qual que é o caminho da nossa nova imagem do caminho vai estar em espaço e a gente pode usar então a variável Qual que é o nome da imagem que escolheu ponto png então isso aqui seria uma outra forma pessoal editar implementando essa manipulação de imagem tá então só pra gente diferenciar aqui eu vou estar colocando deixa eu ver escolha uma opção 2 só para a gente ver que realmente atualizou para essa

forma de manipular imagem tá então escolha uma opção a gente vai alterando ele vai mudando essas imagens da mesma forma tá então vocês podem utilizar esse imigrar criando esse objeto ou pode estar usando ele de pé Só alterando o da imagem com isso a gente finaliza então mais um app desenvolvendo só com os componentes de interface que a gente aprendeu até o momento então se você conseguir desenvolver esse App deixa aqui no comentário como foi sua experiência se você teve alguma modificação como que foi essa implementação fique à vontade de estar alterando esse layout conforme

é vocês queiram e se você teve algum problema de executar alguma coisa também deixa aqui no comentário para todo mundo que assistir esse vídeo conseguir te ajudar de alguma forma Tá bom então Pessoal espero que tenham gostado desse vídeo dos componentes de interface a gente fazendo uma aplicação do flutter do zero Então vai ficando por aqui até o próximo vídeo tchau tchau pessoal [Música]