Unidade III Aula parte 01

[Música] continuando Então vamos agora eh elaborar a nossa terceira atividade vamos chamar assim qual que é a lógica vocês perceberam que ao longo dos cursos que a gente vem tendo aí eh nós em alguns aspectos eh trabalhamos com as rotinas e operações básicas para fazer um programa então eu pedi lá em atividades passadas para somar dois números multiplicar dois números calcular fatorial enfim foram operações matemáticas né Por que que a gente faz isso para que vocês se habituem a imaginar que os dados que são informados ao computador Obrigatoriamente eles tem que ser processados senão não

faria sentido você utilizar um computador né E aí já vem o nome computador Então a nossa proposta agora nós criarmos um novo projeto aqui ó vamos lá no idx né E vamos criar aqui entra sempre com meu usuário mas eu vou mudar pro Talent te fechar aqui ó e nós vamos criar um novo projeto flutter Tá mas antes de eu criar um novo projeto flutter vamos fazer o seguinte ó lembra que eu falei para vocês que a gente podia usar o layout né E olha aqui ó eu andei fazendo uns testes aqui ó eh para

ver se funcionava eh então eu já aproveito para mostrar para vocês como é que a gente faz para eh eliminar um projeto aqui da área Porque infelizmente ele vai manter apenas cinco aqui ó então eu vou vir aqui ó e simplesmente vou deletar aí ele pede para você escrever delete ó entend disso ó Você tem certeza agora eu tenho né então deletei e daí ele simplesmente retira do teu eh workspace que ele chama aqui né então lá vamos lá antes de eu criar um novo eu vou abrir aqui o projeto que a gente desenvolveu na

atividade anterior que eu chamei ele né de layout né então só pra gente lembrar esse inclusive já tá até publicado a gente já tem a aqui ó ele sempre pede você leia o que que tá ou tente ler aqui o que tá escrito ele tá pedindo para eu preencher um que um um server né que é uma espécie de questionário Então por enquanto eu não não não vou preencher né então ó isso aqui a gente fez eu não gosto do minimap aqui então botãozinho da direita tiro ele mas isso é opcional vocês faz se vocês

quiserem e tá aqui o nosso layout né então aqui ó é aonde eu vou colocar o meu aplicativo né Qual aplicativo então é esse que nós vamos fazer agora então você vai voltar aqui no Home né então só procura aqui esse ícone do projeto idx vem aqui em home e daí você vai voltar naquela tela ele sem traz o meu usuário Mas isso é porque tá configurado nessa máquina aqui né que é de uso particular né E vamos iniciar um novo projeto flutter né Eu Vou Chamar esse cara aqui ó dapp traço calculadora Tá então

vamos criar ele vai vir naquele modelão sempre ele traz Aquele modelo eh padrão né daquele eh incrementador lá que a gente já viu mas agora a gente vai fazer o seguinte quando você cria um estilo de programação ou quando você vai trabalhar numa empresa ele já tem os templates que a gente chama né e previamente desenvolvidos Então vamos imaginar que nós fizemos isso e criamos o nosso template aqui do do desenvolvimento web e qual foi esse template né o template que a gente criou foi exatamente o app layout Então a gente vai usar esse App

layout para dar corpo ao nosso novo programa tá ou o nosso novo aplicativo né Eh agora é muito comum né chamar de aplicativo né antigamente chamar de programa né mas app por quê Porque ele tende a ser eh uma tendência né porque como a gente vai usar ele em mais e plataformas a gente mantém esse conceito não é obrigatório mas no meu caso fiz uma best a ah sumiu aqui né então você vem aqui ó em viw aí é onde que tá aqui Explorer search extension openv acho que ess eh Nossa agora ficou bom aqui

projeto de X flutter agora eu fiz uma besteira aqui e s Opa apareceu de novo felizmente né o Main aqui aqui esse cara aqui eu vou diminuir só por questões Então agora eu volto aqui ó n é é que ela sumiu daqui né daí é no viw que a gente resolve isso vou apagar o mini map aqui né só para melhorar o um pouquinho a área de de trabalho bom esse programa é aquele programa template padrão vem sempre com esse cara toda vez que você criar um novo então como eu havia falado o que que

nós podemos fazer nós podemos fazer isso daqui ó e a gente já tinha deixado aqui o programa layout né aberto né agora a gente vai lá no app calculadora então simplesmente vocês vem aqui ó se vocês quiserem você pode fechar esse cara aqui ó né até diminuir um pouco aqui ó porque desso fica com uma condição melhor aqui de verificação perceba que ele sempre traz no no tema padrão né que é o o Claro né então aqui a gente vai dar um cont control a para selecionar tudo posteriormente um cont control c né então a

gente fez selecione tudo Copie tudo para a de trabalho aí a gente vem agora aqui ó no app calculadora faz a mesma coisa ó um control a seleciono tudo control V sobrepôs Então se tudo ocorrer e como deve ser né voltamos aqui ao programa layout bom agora que que nós vamos fazer aqui nós vamos preparar o nosso ambiente aqui de forma que ele já fique com aspecto né do que eu quero fazer então Ó eu venho aqui ó só vou diminuir aqui para ficar mais fácil também já vou trocar o o layout layout não tema

para que a gente possa me parece que fica mais ajeitado aqui eh para vocês verem o destaque aqui das Letras né então ó quando eu troco o layout o que que eu quero fazer ó programa layout era o nosso título lembra então Ó lá em cima ó a gente vai chamar esse cara agora de calculadora tá então é a nossa calculadora eh essa próxima linha aqui ó layout superior eu só deixei para vocês identificarem cada um dos layouts então eu posso vir aqui agora ó e comentar vocês podem ou comentar a linha né ou simplesmente

se vocês quiserem e economizar é criar aqui ó um contêiner vazio aí você vai dizer pô Por que um contêiner vazio é um recurso utilizado exatamente para que haja a condição do funcionamento correto El ele até dá uma sugestão posteriormente ali né para você mas eu não quero essa para que o o expand funcione corretamente então ele só e expande um contêiner de forma né como a gente quer que esse miolo aqui ó seja eh sete vezes né o valor Mas que coisa aí sete vezes o valor do nosso layout aqui em termos de altura

né então a gente pode fazer isso então você pode simplesmente colocar um contêiner vazio ou vocês podem deixar aqui ó os elementos aqui comentados né Para que vocês na outra vez possam eh lembrar né e criar essa condição de utilização né então aqui ó vamos tirar também o layout inferior aqui no layout inferior eu vou V só comentar Tá mas isso daí é uma opção de vocês tá o contêiner vazio é um é um recurso muito utilizado principalmente não só em flutter Tá e agora a gente tem o quê a nossa calculadora e o meu

aplicativo né bom se vocês quiserem agora a gente pode Recordar algumas coisas que nós fizemos no passado lembra lá uso de funções lá com o Scratch não foi muito muito e assim fácil porque eu não tinha a condição de retornar um parâmetro mas vocês conseguiram ver que vocês criavam aquela eh função para que nós pudéssemos mostrar a informação e não ficar repetindo porque eu fiz de propósito né vários alinhamentos lá de stream lá em em Python já foi um pouco mais interessante né a gente já conseguiu mostrar para vocês você fiz eram o crude lá

né E esse crude vocês começaram a usar as funções para simplificar o programa principal então eu vou fazer a mesma coisa aqui agora a gente vai vir aqui ó e no lugar do o meu aplicativo aqui ó o resto aqui a gente pode deixar eu posso até substituir a cor aqui ó quer ver ó eu posso pôr aqui a cor e em vez de ser azul eu posso colocar assim um sei lá aqui um eh Grey por exemplo mas um Grey bem fraquinho daí Ah Grey Green é um Grey aqui ó vamos ver Grey e

daí aqui eu Ô miserável ó Grey ó eu posso ter aqui um Grey ó e esse Grey a gente pode e nto aqui não é isso que eu queria eu posso criar ele com opacidade ó ou com sombra assim ó ele vai vai ficar mais forte ou mais fraco vamos vamos vamos ver aqui ó se eu colocar 100 ó se eu colocar 900 ó ó deixa eu ver se ele Ó eu vou colocar 900 pra gente ver ó Ele é bem escuro tá vendo qu um preto né daí se eu colocar aqui o Shade é

mais menor aqui ó por exemplo ele vai ficar mais clarinho Tá mas o programa de vocês el fazem do jeito que vocês acharem legal né tá vendo ele quase nem aparece aqui mas se você olhar de lado você vai ver então ah vamos aumentar aqui para 200 então só para ele dar um aquele Azul ali ficou meio meio forçado de barra Na minha opinião mas vocês é o programa de vocês tá aí então o meu aplicativo agora o que que vai ser o meu aplicativo o meu aplicativo gente vai entrar aqui ó vai ser uma

calculadora tá então aqui vai ser uma calculadora legal ele vai escrever calculadora ótimo já tá funcionando não então a exemplo que nós fizemos em Python a gente vai subdividir o nosso programa em módulos né então a gente tem que vir aqui abrir e todos os módulos que vocês querem Criar e vão criar para utilizar o flutter por exemplo eles têm que Obrigatoriamente est dentro do Lib aqui ó eles podem estar no Raiz junto com m ou eles podem estar num diretório específico Vamos combinar que esse aqui eu vou fazer no diretório raiz então a gente

vai aqui ó de novo ó eu vou em Lib clico o botão direita e new file agora aqui eu vou colocar ó calculadora pon Dart não esqueçam do pon Dart que senão ele não reconhece como como programa e consequentemente a coisa não funciona bom tá aí o nosso programa vazio né se vocês quiserem né dar um contu ir e perguntar pro Gemini alguma coisa Gemini vamos lá né então eu posso colocar aqui de repente aqui ó e vou dar o cont control I né crie uma classe calculadora do tipo state full né ó juro para

vocês que eu não ten a menor ideia se vai funcionar primeira vez que eu tô usando esse cara aí tá agora el fez algo aqui né o dura aqui não dá para ver o que ele fez aqui mas de boa né Deve ter feito Vamos dar um accept só para ver o que que que desgraça que ele fez ó sei nada a ó fez cara olha que legal então vocês vejam aqui ó que até eu me surpreendo de vez em quando né eu nunca tinha usado tá foi a primeira vez Então se vocês quiserem gente

a gente pode Ó daí ele tem aqui sugest code me B isso aqui pagar né Ele só tá avisando que o código pode não ser bem o que eu queria ós vejam que como ele criou o código ó Ele criou uma classe calculadora que estende o state full widget que era o que nós queríamos né já criou aqui com a chave né e tal aqui ó se vocês não curtiram isso aqui eu vou mostrar para vocês um um um um estilo aqui ó só que infelizmente ele tá cheio de erro né é muito por que

que ele tá cheio de erro porque eu não incluí as bibliotecas básicas da utilização então só vem em cima aqui agora ó e vai em quick Fix ó aí você pode trabalhar aqui com material com wits com Cupertino é um outro padrão lembra que a gente criou o material app lá eu recomendo para vocês que vocês usem o material que é a é a é o que tá em eu não vou dizer nem na moda mas é o que tem o maior suporte então basta você eh vamos de novo ó você vem aqui para o

mouse em cima vai em quick Fix ó vem aqui em quick Fix importe a biblioteca do pacote flutter chamado mattio Dart Olha aqui que coisa mais linda do mundo né não há dever que funcionou né se você quiser aqui ó você pode apagar esse cara aqui ó esse agora são os os truques que eu vou ensinando para vocês que eu utilizo tá aí ele vai colocar aquele risquinho Azul tem duas opções aqui ó no quick Fix ó ou eu coloco um Ignore ou eu coloco um constructor ó vocês vão ver que que ficou diferente ó

o constructor aqui ele era mais quer ver vamos Ctrl Z cont CRL ztr Z esse aqui era do jeito antigo de fazer ó tá com supper e tudo mais esse aqui daí já das versões mais modernas né então eu sugiro a vocês que vocês usem esse cara aqui ah Professor Mas você põe esse treco e não usou para nada eu não usei porque nenhum programa nosso precisou disso mas esse ke aqui ó é o identificador eh único né Ah mas ele tem o nome não ele tem o nome mas eu posso estabelecer vários várias instâncias

do da classe calculadora né E daí o que que vai acontecer essas várias instâncias cada uma vai ter uma chave e eu posso identificar posteriormente em alguns tipos de programa não nos que nós estamos fazendo percebam aqui ó que ele retornou um contêiner aqui ó né então agora o que que eu vou fazer gente eu vou trocar esse contêiner temporariamente por um text e vou dizer assim ó que aqui eu tenho a classe calculadora beleza bom vocês vão ficar triste né porque não vai aparecer absolutamente nada aqui do lado vai continuar no nosso layout exatamente

o calculadora pô mas você escever o Class calculadora profess eu escrevi né mas eu não chamei então o que que vai acontecer agora esse cara aqui ó quando ele é um state widget ele é um widget um widget é a mesma coisa um texes coisa que um coner é é bad n basicamente a tradução deet né Você vai naquela lojinha 1,99 conta um badinho compra um então é é isso que a gente vai fazer aqui ó então aqui onde eu tenho const Tex calculadora eu vou escrever assim ó calculadora olha até já sugeriu para mim

lá ó só que ele Pou esse cara aqui de azul e eu vou dizer o seguinte ó como esse sujeito aqui ó o calculadora está na mesma e no mesmo nível né de diretório ele automaticamente busca esse cara e ele ele nem nem inclui ele inclui automaticamente aqui ó tá vendo por conta disso eu vou tirar esse Car aqui ó só para vocês ver aqui ó ele vai dar erro lá embaixo ó ó eu não achei calculadora como ele se acha que aqui dentro da utilização mas você viu que já apareceu o clássico calculadora aqui

do lado né então ó o que que acontece agora é esse calculadora é um módulo externo como eu fui escrevendo e o vs code é meio esperto o que que ele fez ele já incluiu o cara mas às vezes ele não vai incluir então ele vai ficar em vermelho o que você vai fazer vai aqui no quick Fix e daí você pode importar de duas formas Ó você pode importar como packed ou como biblioteca se você importar como packed tá vendo que Ele trouxe no pack de my app aqui ó Então se você for usar

posteriormente profissionalmente isso aqui você vai ter que ir um por um e trocar o nome do mypp pelo novo aplicativo então eu eu uso o de baixo e daí ele faz assim ó Library e ele coloca aqui embaixo ó importe calculadora Dart não vinculando isso ao package o que que é o package o package o conjunto de classes que eu tenho no meu ambiente de trabalho Então os pack flutter são do nosso sistema né do da do SDK né no caso me fugiu o termo certo agora mas é do System devel kit flutter agora o

meu programa agora né que é o app calculadora ele vai ter também um p daí que ele colocou daí se você trocar de nome tem que ir lá trocar o nome deudo eles então quando você Coloca ele como importe simples de biblioteca ele busca pela árvore de diretório Então como esse cara tá no mesmo nível calculadora automaticamente ele colocou aqui calculadora é igualzinho o que a gente fazia lá no no Python e se você quiser você pode colocar assim ó S CL por exemplo só que agora ele vai dizer ó você não tá usando CL

e aqui embaixo vai dar erro daí você tem que tem que ass na frente ó CL pon calculadora entenderam que é importe from Fulano ciclan Beltran lembra que a gente fez isso aqui não faz sentido isso mas só para vocês criarem esse esse essa relação lá é from aqui é s né então muda um pouquinho só a sintaxe Mas de qualquer forma o que que aconteceu agora percebam que antigamente ele tava mostrando um texto aqui né um texto e agora ele tá mostrando mostando uma classe calculadora legal então é isso que a gente vai trabalhar

ele tá pintando de azul porque ele vai sugerir que a gente use um const aqui bom isso morreu Teoricamente né nesse momento a manutenção no arquivo Main pd agora a gente vai trabalhar aqui no calculadora P Dart que é a nossa classe então a sugestão que eu dou para vocês é que toda vez que você for fazer programas né ou aplicativos agora o que que você vai fazer você vai subdividir ele ao máximo para que ele acabe simplificando e a manutenção porque o m Art agora eu não Meo O que que vocês vão fazer vai

ter mais uma atividade a outra atividade vai ser por exemplo o jogo da velha vocês vão vir aqui no mainart dessa dessa do app calculadora vão copiar ele e vão substituir o calculadora Eh abre e fecha né que é a classe calculadora pela classe por exemplo jogo da velha e se você for muito assim neurótico né se cria lá um aplicativo lá e daí você cria uma variável em cima do tipo tal para você mas dá no mesmo do que a gente fez mas eu mostro para vocês quando nós for fazer o a última atividade

bom agora Tem que programar né pô uma calculadora um negócio pouquinho mais complexo né ele vai ter que ter teclado ele vai ter que ter eh lugar para mostrar aqui as informações né Então como que a gente vai fazer vamos começar pelo teclado só pr pra gente se divertir para eu ganhar tempo gente eu já deixei o carinha aqui do lado ó tá E para eu ir ganhando tempo mas eu vou explicando para vocês ó o o o teclado eu já vou colocar aqui ó direto aqui ó comand Tá eu vou aumentar aqui pr pra

gente explicando por eu quero que ele seja responsivo principalmente nós estamos trabalhando uma página Web né então eu já vou de cara aqui ó já vou colocar ele aqui ó Mas eu só vou pegar um um botão aqui ó só para vocês verem o que que nós vamos fazer lá daqui a pouco né então ó eh deixa eu ver Aliás não vou pegar nenhum botão por enquanto eu vou pegar aqui ó esse cara aqui ó expanded e o child Children né E vou colocar lá daí eu vou explicando para vocês lá como é que ele

vai funcionando então agora aqui ó a gente já vai trabalhar aqui ó com esse carinha aqui ó dessa forma e daí Obrigatoriamente eu tenho que fechar aqui e fechar aqui pronto agora se eu der um e Format document aqui ó ele já vai melhorar um pouquinho o desempenho que expend return que que tá faltando aqui faltando tá faltando mais um aqui ó tá vendo ó agora já melhorou então tomem assim cuidado quando vocês fizerem essas maluqui que o professor senhor tá propondo aí porque de vez em quando tá aqui ó bom então Ó depois a

gente define aqui o Flex aqui vamos tirar o vamos deixar o Flex em comentário Porque lá ele tá pronto né só para vocês verem Olha o que que eu coloquei aqui ó eu coloquei um Grid View esse Grid viu gente ele cria aqui ó eh a condição de eu colocar vários elementos né E esses vários elementos que eu vou colocar eles vão ser colocados como se fosse uma tabela com linhas e colunas quando você coloca aqui ó CR Cross aess count aqui eu vou pôr mais uma vírgula deixa eu fechar aqui agora eu vou pôr

mais uma vírgula no final aqui ó que daí quando eu mandar ele fazer o o miserável a formatação do código aqui ó ele já vai deixar tudo como eu quero Então esse aqui eu vou deixar para depois para explicar para vocês daí Vocês já vão entender mas vou deixar al para eu não esquecer ó eu quero então que eu criar um Grid vi com quatro colunas e essas quatro colunas que eu vou eh colocar né eixos né Elas vão e e eh eh armazenar né em termos de contêiner ele cria isso internamente os nossos números

né então ó eu vou copiar lá agora só para vocês irem entendendo onde eu quero chegar porque sen não demora muito o que nós vamos pôr L dentro nós vamos colocar esse carinha aqui ó um botão tá eu vou copiar o botão aqui para daí vocês entenderem o funcionamento bom aqui dentro do Children né eu vou ter vários botões esses vários botões eles vão tá vinculados à nossa classe de Estado então o que que a gente faz dá uns enter da vida aqui ó e dá um control V aqui ó ele vai dar uns erros

aqui né Principalmente no no esquema Pressionar botão e daí o que que eu vou fazer aqui ó eu vou chegar aqui ó já vou criar aqui em cima porque é tudo no mesmo nível ó dentro da classe state eu vou criar aqui ó só pra gente não dar erro e vocês vão fazer desse jeito ó void underline pressionar e cadê botão né ó ele já deu lá uma sugestão para mim ó perceberam ó essa parte é divertida então deu um Tab aqui ó se não acontecer vocês vão ter que escrever tudo que eu escrevi ali

né E porque ele já detectou aqui ó que e dentro do meu código eu tenho uma uma Como é que se diz ó eu vou parar aqui e vou mostrar aqui de vez enquando ele perde a conexão com o servidor se acontecer isso com vocês ó hard Restart aí ele vai tentar de novo lá e vai fazer então vamos voltar Onde nós estávamos aqui ó então ó eu vou ter um text Button o text Button é ele ele funciona e mais ou menos assim como um hiperlink ele fica só o texto quando você passa por

cima assim ele ele ele esmaece sei lá que m fala Vocês já vão ver ele funcionando daí vocês vão entender e daí o que que eu vou ter aqui ó eu vou ter um tamanho maior de fonte por que que eu fiz isso Vocês já vão entender né agora o que que eu vou fazer aqui ó vou dar um formate documento para ele ficar bonitinho aqui ó bom apareceu esse print aqui eu não sei se se aqui vai funcionar mas daí se funcionar Beleza a gente já explica então ó eu vou ter botão com valor

Vamos pegar uma calculadora padrão aqui ó pegar uma calculadora padrão aqui onde tá a minha calculadora aqui calculadora aqui ó calculadora então Ó vocês identifico na calculadora que você tem Assim Começa Claro se vocês quiserem melhorar a calculadora vai dar para melhorar mas vamos vamos fazer o seguinte né Eh B Sei lá cara bom vamos fazer a a básica depois se eu achar conveniente nós colocamos mais elementos aqui ó então ó 7 8 9 dividir Então vamos imaginar aqui ó que essas colunas aqui ó elas vão ter eu já vou copiar para fazer mais rápido

aqui ó poem ver ó eu tenho aqui ó o 7 8 e 9 vou colocar os botões aqui ó tá D cont control c e eu vou colocar lá no nosso no nosso aplicativo os botões aqui ó então eu coloco aqui control V ficou horrível daí eu vou dar o famoso Format document e vamos ver o que que vai acontecer aqui ó se tudo correr bem vai vai aparecer o número 7 o número 8 e o número 9 Beleza então aqui ó aquilo que eu falei ó já apareceu aqui ó 7 89 E se eu

clicar aqui ó deixa eu só ver aqui aqui o Web console deixa eu dar no View aqui ó no viw e debug console eu não não sei se ele vai vai aparecer ó no nos sistemas locais quando você clica e coloca um print nem foi colocado aqui né porque não fui eu que coloquei né percebo que eu aceitei a sugestão de código do próprio sistema né então esse print aqui apareceria aqui ó eh botão pressionado e valor tá mas aqui infelizmente ele não não mostra pra gente aqui ó porque é uma característica provavelmente terminal talvez

tenha até um jeito de fazer isso mas infelizmente eu não sei como fazer bom vamos continuar aqui ó agora vamos fazer no braço aqui ó o próximo elemento que eu vou colocar lá ó por exemplo é o botão que valor eu quero o dividir tá ou dividir vai aparecer valor agora o dividir não tem no teclado aquele simbolozinho bonitinho lá do do dividir quando a gente usa dividir e tá desenhado dividir ele aparece a barra Tá errado isso não não tá mas eu quero que vocês sejam programadores extremamente assim detalhistas porque essa é é é

uma característica muito importante então não sei se vocês já ouviram falar existe um negócio chamado eh tabela áquina Então vou eu vou vir aqui lá no CoPilot ó vou escrever assim ó caracter do símbolo de divisão ele vai usar é caracter Ask ó a s c Opa C ó Ask eu já mostro para vocês o que que é isso o Ask M vem eu odeio esses negócios agora vai pedir sen certo sei lá aí funciona né isso que importa PR gente ó então ó ô deixa eu pedir de novo deixa eu pedir de novo aqui

porque agora aqui ó a resposta que ele deu ó caracter Asque do símbolo dividir ó ele trouxe esse número aqui ó Jesus Cristo n o que que é esse número aqui né Vamos lá ver cont contrl C vamos vir aqui ó o que que é uma tabela Ask né tabela Asque né ou Ask i i né a tabela que significa American Standard code for information interchange Olha que coisa bonita né então naab completa Ela traz PR gente do símbolo do ter có que um código Bin um có heci cóigo decimal né então aqui ó por

exemplo se você quiser o ponto de exclamação é só você olhar aqui os códigos ó então o ponto de exclamação tem o X2 e o decimal 108 por exemplo um um um elemento que eu sempre mantenho vivo na minha cabeça é o código do aqui ó decimal aqui ó é que eu tava no 108 não é 33 ó aqui no código decimal eu sempre mantenho na minha cabeça a letra A maiúscula ela tem o código 65 legal então o b vai ser 66 67 e assim sucessivamente né ele ele colocou um número lá bem bem

bem espalhafatoso né como a gente pediu lá ele colocou esse F7 então ó vamos procurar aqui ó o pelo menos eh deixa eu ver aqui é que ess as tabelas elas variam um pouquinho né ah aqui aqui ó F7 f6 aqui ó tava errado o F7 lá é o f6 tá vendo aqui ó e esse número aqui ó é o 246 e o 247 tá que significa pra gente o dividir aí tá Como é que você resolve isso então vou voltar lá no programa tá então se eu voltar aqui no programa e aqui dentro eu

apertar a tecla Alt tá vocês vão apertar a tecla Alt vocês não conseguem ver aqui no no meu teclado mas eu pressionei a Alt né e vou digitar 2 46 por exemplo ol que que aconteceu lá apareceu um dividir daí ó tem algumas variações disso ó ó como ficou bacaninha lá dividir não sei exatamente por porque eu nunca fiz não sou eu o idealizador da tabelá mas dá para você apertar assim Alt 0247 é a mesma coisa tá então ah Professor Como é que você sabe essas coisas bicho eu não sei a gente vai pesquisando

e vai buscando então eu sugiro para vocês que vocês usem o al 2 4 6 aperta a tecla al e mantém ela pressionada e e digita com ela pressionado como se fosse um shifter da vida 246 do teclado numérico tá automaticamente Ó que legal parecer um dividir tá E assim ó a gente vai montando todo o teclado tá a gente vai criando esse botão e o que que eu fiz no botão botão que que é é um text Button então text Butt esse que fica aqui ó com esse Como é que se diz Redondo aqui

ó mas eu não quero que ele seja redondão eu quero que ele seja a gente chama de obil longo né então ó se você vi aqui no Grid vi count e trocar aqui PR aspect rate e dois ele vai fazer com que ele tenha o dobro do tamanho em relação à altura você já vê aqui ó tá vendo que ele ele amassou né dá apertado fica mais bacaninha parece mais número de calculadora mesmo né então vamos lá o que que eu vou fazer agora pra gente ganhar tempo eu vou aqui pegar os outros botões para

ver que aqui tinha dividir ó então os outros botões são qu ó eu vou pegar todos esses caras aqui ó número qu em diante vou dar um control c e posteriormente eu vou colocar aquele uma vírgula aqui ó e dar um control V tá que que ele vai fazer aqui agora ele vai colocar pra gente todos os botões da nossa calculadora né pelo menos os botões assim mais e significativos ó e aqui a gente já tem um teclado da nossa calculadora né ó Olha que coisa mais bonitinha né bem meigo né Falando que em linguagem

bem simplória né bom Aqui tá faltando o famoso botão de limpar então também a gente vai fazer isso só que agora o que que aconteceu ó eu tenho um expander aqui ó e eu coloquei vários botões porque eles fazem parte do Grid View né agora como esse cara aqui a exemplo que a gente fez no layout tem o a primeira linha segunda linha terceira linha a gente tá trabalhando numa coluna então a sugestão que eu dou PR vocês é que vocês criem aqui uma eu vou dar um enter aqui ó e vamos criar uma coluna

ó uma coluna com suas seus filhos né aí você marca aqui dá um Ctrl x e vai lá no final da expand ó e daí aqui onde ele tá no exp dá um cont control V aí o que que vai acontecer agora não muda nada no layout certo porém eu posso inserir mais coisas aqui então eu quero que ele tenha esse teclado que ele tenha aqui embaixo um botão de limpar por exemplo né então agora como eu tenho aqui eu vou dar um formate aqui ó eu tenho esse expand aqui ó eu V colar mais

um então aqui vai ter uma vírgula né eu vou colocar um outro expand aqui ah Professor Por que que você US exp porque eu tô trabalhando no conceito de E responsividade então aqui ó a gente vai aproveitar o mesmo o mesmo esquema lá ó só que no no lugar de colocar valor um número tal vou colocar limpar tá então se tudo correu bem que que vai acontecer vai aparecer mais uma linha limpar perceberam aqui ó e é um botão ó só que ele ficou grandão aqui ó por que que ele ficou grandão por conta de

que agora eh eu ainda não fiz as as divisões aqui e ele é expandido ó então ele tá pode ver ó ele tá se você olhar aqui uma linha imaginária aqui né tipo Equador da vida a metade ficou para limpar e a metade ficou para eh pro teclado bom não adianta nada eu ten uma calculadora se eu não mostrar o que eu tô fazendo né então a minha proposta nessa calculadora que vocês venham aqui ó eu já vou copiar pronto aqui ó daí eu não perco tempo eh digitando lá mas tá aí ó depois eu

a gente dá um jeito nesses aspectos aí da das digitações Então dentro Antes desse expander aqui ó eu vou dar um cont CRL V ele vai dar um erro aqui agora né que já era previsto e a por quê Porque esse cara aqui eu não eu não defini ainda então a gente vai definir ó então vou deixar ele entre aspas aqui triplica e daí Olha o que que vai acontecer aí ó a gente vai ter um lugar pro nosso eh pra nossa expressão né 7 + 8 + 9 lá e outro pro nosso resultado e

o teclado veja que o teclado ficou joia aqui né por quê Porque agora eu ele tá dividido proporcionalmente entre as quatro linhas que compõe a nossa coluna daí eu coloquei esse Flex 3 aqui ó para dizer que a coluna que trata do Grid viw que é o nosso teclado ela vai vai ocupar 1/3 da tela olha lá 1/3 da tela já foi o suficiente para ele mostrar todos os elementos o outro terço da tela vai ser ocupado por limpar pelo resultado e pela expressão E aí a gente já tem o nosso layout da da coisa

né da nossa calculadora de forma que vocês já percebem que eu vou variáveis agora né Vamos começar com a expressão né então vamos lá pra gente ganhar tempo eu venho aqui em cima ó e a gente tem agora a expressão a expressão é uma string tá essa string ela foi pensada no seguinte aonde que a gente vai colocar essas variáveis ó sempre dentro do do state tá então aqui ó control V Agora eu já tenho a variável pressão ela me marca aqui umas amarelinho esse amarelinho tá dizendo ó expressão não está sendo usada né E

daí como não tá sendo usada ela e o valor dela ali foi pré-definido ela sugere que ela seja final mas ela vai ter os valores modificados tá nesse instante aqui ó se você vier aqui ó tirar o expressão agora da das aspas aqui das plicas ele vai ficar em branco aqui ó porque da agora ela vai ser modificada ó tá vendo por quê Porque ela vai armazenar o que eu digitar aqui como expressão pra nossa calculadora Então vamos ver aqui no nosso modelo lá de de cópia aonde que isso acontece ó acontece dentro do Pressionar

botão tá então o que que eu vou fazer aqui ó eu vou copiar el inteiro daí eu explico como que você chega nessa nessa nessa lógica aqui ó então ó Pressionar botão que estava só que esse botão pressionado ele passa a ganhar este corpo aqui ó percebo que resultado aqui tá dando erro então eu vou deixar ele comentado e esse calcular resultado eu vou deixar também comentado porque eu quero que vocês vejam o seguinte ó o que que acontece aqui ó lembra que eu falei ontem do tal do Set state que cada vez que o

set state era chamado ele rodava quem o build exatamente aonde houve a mudança tá então aqui ó ó expressão então ó se você olhar aqui ó se você apertar o valor limpar que que você vai fazer com uma expressão que eu por por por por a causa esteja aqui você vai transformar ela em branco então você vai reinicializar ela agora se não for isso você vai fazer o quê você vai pegar a expressão que inicialmente ela tá em branco e vai concatenar mais igual valor que valor O valor é exatamente o o que tá dentro

aqui como parâmetro ó ah pressionei o botão sete ele vai colocar sete pressionei o botão oito ele vai colocar oito então como isso já rodou vamos testar ó sete Olha apareceu um sete lá 8 9 4 5 6 vezes Oi 2 agora o que que eu faço aqui ó tem um igual né Aí se vocês observaram aqui ó tem uma uma um elsif aqui ó que diz assim ó se valor for igual calcula resultado Oi que joia né então eu já consigo imaginar que se eu apertasse o igual pá ele ia calcular o nosso resultado

mas ainda não está calculando o resultado esse vai ficar para para daqui a pouco né Deixa eu formatar o código me dá aflição de ver tudo torto aí né e Vamos deixar esses caras aqui para vocês entendendo o que que eu tô fazendo ó então vejam bem ó Nós criamos aqui um Grid View que que é um Grid View Grid View é o que vocês estão vendo aqui ó ele tem 1 2 3 4 tá vendo 1 2 3 4 mas se tivesse mais elementos aqui ó se eu colocar mais um elemento aqui ó ele

criaria um uma linha com um só então o que predomina aqui no Axis é exatamente o número de colunas ó então ele tem quatro colunas se você colocar aqui por exemplo quer ver ó cinco colunas vamos fazer os testes aqui ó você vai ver que ele vai criar agora cinco colunas e vai deixar calculadora tipo um hp das antigas tá vendo ó cinco colunas se você quiser funciona igualzinho ó posso pôr quatro divididos por Ó cadê o dois tá aqui ó entenderam Então esse Grid viw tem essa característica você consegue montar automaticamente uma tabela e

a ordem de e vamos dizer assim prioridade de aparecer as informações é como elas foram colocadas aqui ó então se você quisesse fazer um negócio louco você ia ter que fazer agora 7 8 9 zero quem sabe não sei então ó por isso que eu coloquei o número quatro aqui e agora ele volta naquela naquela vamos dizer assim carinha né de calculadora certo bom Depois eu que eu criei o teclado eu criei um botão de limpar né Então olha aqui ó 8 52 tá se eu apertar limpar ele limpa por ó por que que ele

limpa que no no no na no evento Pressionar botão eu passo o valor se o valor for limpar ele limpa agora se você fizer a besteira aqui ó né de colocar um r a mais aqui ó ele já não limpa mais né Então olha o que que vai acontecer aqui com o nosso no nosso botão aqui ó cinco seis limpar ó ó daí ele imprime limpar Por que que ele imprime limpar porque daí ele vem aqui nessa última linha do ELS ó então aqui ó qual que a sugestão para você fazer um programa Bem bem

legal você cria aqui uma variável final do tipo string e daí você coloca lá por exemplo underline limpar daí você coloca assim ó igual Ó perdeu a conexão com o servidor de novo limpar tá aí que está fazendo aqui ó ponto vírgula ao invés de você usar a string escrita aqui ó você vai colocar variável limpar e lá no texto do botão você vai colocar e agora você vai dar um hard res Restart você vai ver que vai funcionar eu posso colocar assim ó uma vez só isso que é o importante de criar esse conceito

e por que que você colocou final professor na variável eu coloquei final porque essa variável ela vai receber uma única atribuição Ela não é uma variável de de de modificação de valor durante o processamento del ela pode ser final Então qual seria a vantagem de usar final né final é um uma forma mais eh econômica do ponto de vista estrutural do armazenamento e otimização do uso do memória tá Ah se você não usar final aqui o que que acontece ele vai dizer para você ó ele vai dizer que make final tá Por quê Porque ele

vai sugerir aqui ó the Private Field could be final Então vamos seguir as orientações dele né e agora ó tá escrito limpar aqui ó e vai aparecer limpar aqui ó se você colocar Clear agora para ficar chique a calculador ó vai aparecer Clear lá uma vez só porque daí você otimizou aqui ó você colocou esse cara como uma variável não como uma então ó 23 Clear limpou tá então aqui a gente pode colocar limpar para manter os padrões aqui né do nosso do nosso sistema beleza bom O que que a gente vai fazer agora a

gente vai organizar né as coisas aqui no no sentido de eh por exemplo calcular o resultado tá então calcular o resultado é uma coisa assim bem bem interessante né eu vou só copiar o procedimento lá para vocês entenderem aqui é só calcular resultado tá então eh é um void só só para eu ter certeza aqui ó então ó aqui ó tem calcular resultado Vou colocar aqui um void aqui ó void calcular já perdeu conexão de novo né então já vi tudo né calcular resultado dá um Tab aqui ó quando ele sugere dá bom daria para

dar um Tab agora já não dá mais né calcular resultado abre aqui pronto nesse momento ó eu já habilitei esse cara aqui ó agora eu posso habilitar também essa outra string aqui ó Por que você tá usando string Professor porque todas as informações que são mostradas no vídeo já falei isso para vocês no passado lá quando a gente tava trabalhando por exemplo com python né a gente tinha que converter porque é dentro da memória do computador deixa eu dar um hard set enquanto eu converso eh dentro da memória do computador eh ele armazena tudo como

aquele código Asque que vocês viram lá no anteriormente né porém essa esse essa esse armazenamento ele é distinto para que ele possa ou não fazer as operações né então aqui gente ó eu posso agora trocar aqui embaixo esse resultado que eu tinha colocado entre aspas aqui ó ou entre plicas como preferirem e agora ele não vai mostrar nada lá quando ele carregar aqui ele vai trazer em branco por que que ele vai trazer em branco ó porque resultado tá em branco né então só para nós fazer uma uma sacanagenzinha aqui assim eu vou fazer o

qu ó a mesma coisa que a gente fez aqui ó quando eu pressiono o botão eu tenho que mexer no set state aqui ó então aqui a mesma coisa a gente vai dar um set state ó ele já ele já sugere pra gente aqui a a sintaxe ó então é só dar um enter e o que que eu vou fazer assim ó resultado igual só para sacar calculando ponon tá então que que vai acontecer agora quando eu ah calculando aqui não ficou legal vou calcular prto vou calcular tá vou calcular então agora quando ele fizer

isso aqui ó você vai montar uma expressão então por exemplo 23 x 5 e quando você apertar aqui igual ele teria que dar o resultado vou calcular então funcionou Nossa calculadora agora só precisa aprender a fazer conta só isso como que a gente faz isso daqui a pouco a gente começa tá bom [Música]