ANDROID EM 2024 - COMO CRIAR UM APLICATIVO DO ZERO EM 1 HORA | JETPACK COMPOSE | APP

se você chegou nesse vídeo eu tenho certeza que você quer aprender a criar o seu primeiro aplicativo Android agora a partir de 2024 isso utilizando ali as técnicas mais recentes como que a gente pode agora construir as telas como que isso é feito adicionar funcionalidades e assim por diante entenda que nesse vídeo eu não vou te ensinar sobre programação então se você não tem a mínima ideia sobre programação vai ser um pouquinho mais difícil de acompanhar mas ao mesmo tempo você pode ver como que isso é feito até para você entender como que é o

passo a passo o que que a gente instala o que que a gente utiliza Como que é o conceito de criar uma tela para que no momento que você tiver estudando programação você pode acompanhar novamente esse vídeo e conseguir Criar o seu aplicativo sem nenhum problema até mesmo se você não souber nada de programação se você seguir exatamente o passo a passo que a gente vai fazer aqui eu tenho certeza que você vai chegar no seu primeiro aplicativo e agora que eu dei esses recados iniciais Vamos partir para o próximo passo que é de fato

entrar na minha tela aqui aqui do computador e ver o que a gente vai fazer E é claro antes de começar aquele recado de sempre para vocês que acompanham aqui o canal se você ainda não fez a inscrição por favor considere deixe um comentário like porque isso apoia bastante aqui o canal isso ajuda bastante ter aquele incentivo de trazer novos conteúdos para vocês e agora que eu trouxe todas essas mensagens entrei aqui na minha tela principal veja que eu estou no Windows e um ponto importante é que você pode utilizar qualquer sistema operacional para utilizar

aqui as ferramentas que usaremos para criar o aplicativo Tá bom então se você tiver no Linux tiver no Mac você pode também seguir exatamente os mesmos Passos Então vamos entrar entrar no primeiro ponto o que que a gente precisa para criar um aplicativo Android a gente vai precisar de uma ferramenta que a gente conhece como ide né que seria meio que um um editor de texto com diversas ferramentas Integradas para facilitar a criação de projeto desenvolvimento de código e assim por diante tá bom e nesse caso a ide que a gente vai utilizar é conhecida

como Android Studio que é essa que está apresentada aqui na minha tela o Android Studio A partir da versão que eu estou utilizando aqui ele é conhecido como H hog né que é essa versão que a gente pode vi a partir dessa ferramenta about Olha só Android Studio h hog e ele mostra essa versão que é 2023.1 P1 Essa é a versão release para esse momento que eu estou gravando então se você eh utilizar o Android Studio Você pode baixar A partir dessa versão ou versões mais recentes não ten a mínima ideia como baixar o

Android Studio não tem problema a minha intenção nesse vídeo é te mostrar onde você vai conseguir baixar e para isso você pode utilizar uma outra ferramenta que a gente conhece como toolbox aqui no canal Eu fiz um vídeo falando a respeito sobre o toolbox e ele vai ser a ferramenta é principal para que você consiga adquirir essas ids veja que eu tenho outras ids outras ferramentas para para editar código aqui dentro do meu computador e eu tenho aqui instalado essa versão do Droid Studio que é head hog essas outras versões são versões que vão vir

mais paraa frente tudo bem Você não precisa utilizá-las nesse momento mas se você tiver é como versão relise no momento que você tiver estudando você pode utilizar porque o Android Studio ele funciona dessa maneira a cada tempos e tempos vai surgindo uma versão nova a gente chama de release e é meio que a versão de lançamento daquele momento né Então veja que a de hog é release essa Jelly Fish seria meio que a próxima versão que está em cannery né E aí tem a outra que é Iguana que está em Beta então a canner é

meio que a Alfa nos jogos vamos dizer assim e a Beta meio que a próxima que vai vir para release então se você tiver estudando Pode ser que essa Iguana já esteja em release e você pode utilizar sem nenhum problema legal e agora que eu trouxe essa informação sobre tobox Android Studio é eu espero que você instale essa ferramenta assim que você instalar você pode continuar com o vídeo e a partir desse momento considere que você tenha acesso ao Android Studio que você abriu chegou numa tela muito similar ao que você tá vendo aqui que

é o que a gente conhece como tela de Launcher e a partir desse momento a gente pode sim começar os primeiros passos para criar o projeto Android e em seguida começar a criar o aplicativo Então dentro dessa tela o que que a gente faz basicamente a gente precisa criar um novo projeto um novo projeto dentro dessa ferramenta é a partir dessa opção que é a new Project um ponto importante a cada versão do droy Studio Pode ser que o layout design mude um pouquinho então a minha recomendação é se você tá numa versão muito mais

recente que ultrapassou a Iguana a Jelly Fish e assim por diante procure por uma opção que seja similar Tudo bem então aqui vai ser New Project ele vai abrir uma outra tela que ele vai nos auxiliar na configuração inicial para criar um primeiro aplicativo que são alguns catálogos que ele coloca como fone em tablet que é justamente uma categoria para esse tipo de dispositivo vai ter esse wos vai ter também esse television Automotive que são outras plataformas que a gente pode criar aplicativo Android nesse nosso caso Vamos focar em um aplicativo para Smartphone então você

pode manter essa primeira opção novamente se tiver uma outra versão do Android Studio você procura aí é uma opção que seja similar E aí o que que a gente vai fazer até pra gente entender né eu separei aqui uma imagem mostrando o resultado final que a gente vai chegar do aplicativo e a ideia é fazer um aplicativo bastante simples mas funcional que é calcular se você é entre gasolina e Álcool qual que tá valendo mais a pena considerando ali o seu preço Tá bom então a gente vai chegar nesse objetivo para o nosso primeiro aplicativo

Android e aí vem aquela questão O que que a gente utiliza desse catálogo de opções para criar um aplicativo com as ferramentas mais recentes né para isso a gente vem nessa opção que a empt activity e nessa impt activity ela já vai fazer a configuração com a ferramenta de interface de usuário conhecida como Jetpack com pos ela a ferramenta mais recente pra gente construir telas a partir de um paradigma que a gente conhece como declarativo eu fiz muitos vídeos aqui no canal falando a respeito dessa ferramenta e vindo nessa opção que é empt activity ele

já vai criar isso pra gente inclusive ele mostra até esse iconz que é esse verde com azul que é o ícone do do compose então cada vez que você vê esse ícone vai ter alguma relação com esse tal do Jetpack compose Então é só selecionar o empt activity com esse ícone clicar em next E aí em seguida ele vai vir com uma opção pra gente colocar o nome para o nosso projeto então o nome do projeto você pode deixar da maneira que preferir então você pode colocar álcool ou gasolina ou gasolina ou álcool você pode

colocar o nome que você preferir mesmo não tem restrições e dentro desse package name você pode colocar eh uma técnica que a gente chama de e domain reverse ou então domínio reverso quando a gente entra no site a gente tem aquele domínio por exemplo né facebook.com.br tudo bem gmail.com.br então se você tiver um site seu você pode utilizar também como esse padrão E aí o domínio reverso é meio que reverter isso então se é por exemplo facebook.com.br seria br.com.bb nesse meu caso aqui eu vou deixar como BR com Alex F que seria de Alex Felipe

e em seguida eu coloco o ponto eu deixo o nome do meu projeto então eu coloco como álcool tudo junto aqui mesmo ou gasolina existe uma outra técnica que seria por exemplo você colocar numa técnica que a gente chama de Camel Case a cada palavra a primeira é maiúscula sendo a partir do da segunda palavra Tudo bem então ficaria da seguinte maneira álcool ou gasolina sendo que o ou o o é maiúsculo e o gasolina o g é maiúsculo também é uma outra técnica que a gente pode utilizar para nomear aqui esse nosso package name

né o nome do nosso pacote aí em seguida a gente coloca onde a gente quer salvar ele tá salvando nessa minha pastinha que tá chamando de álcool gasolina do porque eu já fiz um aplicativo desse daqui até para chegar nesse resultado tá bom e por isso ele tá salvando Exatamente no mesmo lugar só que esse é o dois é o que eu estou fazendo aqui com vocês e depois ele vai ter essas outras opções para você selecionar o SDK mínimo você pode deixar essa versão 7 se você quiser entender mais sobre isso você pode vir

nesse help me chs E aí ele mostra mais ou menos as versões o quanto de dispositivos você vai atingir tudo bem nesse caso a gente tá atingindo 96.3 por ali da loja então é um número bastante interessante né então vou deixar esse set que é meio que a opção que ele já deixou aqui pra gente tá bom mas novamente você pode escolher outro e nesse build configuration é configuration language você pode deixar esse cotl dsl que ele vai ser a partir do grad que é uma ferramenta para você fazer a configuração de build Ah e

você pode deixar essa opção recomendada porque também é a mais recente quando a gente cria um projeto Android mas novamente dado que é o primeiro projeto é algo que você não vai mexer você nem precisa saber para você construir o seu primeiro aplicativo e depois disso é só clicar em finish e aguardar e o Android Studio carregar tudo pra gente veja só o Android estúdio finalizou aqui o carregamento e ele abriu agora a nossa ide o nosso Android Stúdio com uma nova tela com alguns códigos e a gente vai começar a fazer uma breve introdução

para começar então a mexer no nosso aplicativo então eu vou expandir aqui a minha tela e veja que ao expandir a minha tela eu vou ter à esquerda a estrutura do meu projeto então Aqui é onde estão os arquivos do meu projeto para fazer as edições para buscar código para fazer a configuração de build e assim por diante novamente eu não vou focar muito aqui nessa parte do projeto porque essa parte do projeto é se de fato eu fosse explicar bem detalhadamente como o projeto de Android funciona o meu objetivo vai ser muito mais no

código que a gente vai mexer para a gente fazer logo a nossa interface de usuário para colocar as funcionalidades e assim por diante então entenda que esse código Inicial que a gente tá vendo aqui é o código que vai executar em o dispositivo Android e vai mostrar um aplicativo pra gente que inclusive isso daqui já está preparado pra gente fazer a execução de um aplicativo E aí vem aquela questão como que a gente executa esse aplicativo aqui no Android Studio A gente vai ter esse Icone Zinho bem no topo que é conhecido como Run como

a gente pode ver Run app e a gente pode clicar nesse ícone ou então utilizar o atalho shift F10 para poder fazer a execução um ponto importante é que dependendo da maneira como você configurar ou então acessar o seu Android Studio por exemplo sendo a primeira vez Pode ser que você não tenha acessível um dispositivo para poder executar nas últimas tentativas que eu fiz do Android Studio nas primeiras instalações ele já adicionava um dispositivo para poder executar que é um dispositivo que a gente conhece como emulador quando a gente clica aqui nessa outra parte à

esquerda onde está escrito Pixel XL api 33 significa que isso é um dispositivo é disponível pra gente executar o nosso aplicativo que nesse caso é um emulador se você não tivesse esse dispositivo acessível você pode fazer a criação de um novo tudo bem E aí para isso você pode vir nesse menu que temos aqui a direita e olha só ele vai ter uma opçãoincorreta você pode fazer a criação de um novo então você pode vir nesse maizinho que é o Create virtual device E dentro dele você pode escolher um dispositivo que você quer não precisa

escolher Exatamente esse que eu tenho aqui mas se você quiser também você pode Escol escolher exatamente o mesmo que nesse caso é o Pixel XL olha só ele apareceu aqui o Pixel XL você faz o Next escolhe a api você pode escolher a 33 novamente e em seguida você pode simplesmente colocar o nome nem precisa fazer tanta configuração nem nada para fazer esse primeiro começo tá bom se eu clico em finish olha só ele aparece aqui pra gente também esse outro dispositivo então com o dispositivo acessível você deixa selecionado nessa opção que a gente tá

vendo aqui em cima que fica à esquerda daquele botão de Run e depois que você seleciona o que você precisa fazer É de fato a execução E aí como que você executa basicamente você clica aqui no Run ou então você é faz o atalho shift F10 um ponto importante que eu não deixei tão claro é que o Android Studio ele é uma ferramenta pesada então quando você tiver rodando pela primeira vez vai demorar bastante Tudo bem então não se assuste que aqui no vídeo vai ser rápido porque farei as edições irei cortar esses tempos de

execução mas e entenda que isso vai ser normal vai ser comum no seu dia a dia dependendo do seu computador vai ser mais rápido ou então vai ser muito mais lento do que o normal tá bom então vou executar aqui vamos aguardar e vamos ver qual que é o primeiro resultado Olha só o aplicativo executou e veja que temos aqui à direita um dispositivo emulado tudo bem Então esse é um dispositivo virtu que foi criado aqui pelo Android Studio eu tô até vendo aqui se a minha carinha tá aparecendo aqui na frente dele agora não

está e é dessa maneira que a gente vai conseguir visualizar a execução do nosso aplicativo então todo esse código que a gente viu aqui que foi criado ele está sendo traduzido aqui para esse aplicativo que a gente tá vendo tá bom eu vou fazer algumas configurações para facilitar essa visualização pra gente então dentro aqui dessa abinha que é o Running devices a gente vai ter a as opções aqui nesse options que é os três pontinhos que dá pra gente meio que configurar essa visualização do emulador Então veja que a gente tem essa opção que é

essa show device frame para mostrar esse framez inho como se fosse um dispositivo a gente não precisa disso O que importa é só o conteúdo da tela e então a gente pode desabilitar aí veja que agora ele não mostra mais aquelas bordas como se fosse um dispositivo o Android né como se fosse ali o dispositivo físico entre aspas né e um outro ponto que é legal também é tirar essa opção que é essa parte que envolve esse Zoom porque às vezes ela fica na frente não sei se dá para ver porque minha telinha Tá bem

na no na na carinha de na na na parte da frente de vocês né até me travei aqui mas dá para ver quando eu colocar uma outra opção que é que vai permitir com que a gente consiga arrastar esse emulador que é essa outra opção aqui ó se eu clico novamente em options e venho para esse View mode eu tenho essa opção que é o float que ele meio que flutua entre a tela olha como é que fica ele fica flutuando e já não fica mais ali à direita então eu consigo colocar aqui no meio

a esquerda direita e consigo mover com mais liberdade e aí como eu comentei tem essa ferramenta ent aqui que é esse Zoom tá vendo ó ela fica aqui disponível pra gente eu não vou utilizá-la e ela só vai ficar com uma um conteúdo que polui a tela então por isso eu vou vir nas opções e vou tirar aqui esse show Zoom control aí agora sim a gente tem uma tela totalmente limpa pra gente começar trabalhar e agora que a gente fez isso né Vamos então voltar aqui no código e vamos ver o que a gente

vai fazer para chegar nesse resultado que a gente tá vendo aqui né que é o nosso aplicativo então para isso a gente vem aqui no primeiro código e vamos tentar entender o que que acontece basicamente esse código é o código inicial do nosso aplicativo é onde ele vai começar a fazer as suas execuções Então veja que a gente tem esse me activity que ele vai ser uma classe que ele vai herdar ali as propriedades do Android para fazer a inicialização da tela Então essa activity nesse caso ela tá herdando de component activity e quando a

gente faz isso considerando ali as configurações que envolv o sistema operacional do Android a gente consegue fazer com que o Android ele entenda que isso daqui é uma tela e que a gente pode chamar e é claro vamos ter configurações extras para poder fazer essa chamada a gente não precisa ver isso nesse momento mas saiba que isso daqui vai ser o ponto de partida do nosso aplicativo em seguida ele vai ter esse outro método aqui que é esse on Create que vem de override fun ou Create e esse vai ser o primeiro código durante a

criação dessa activity então é dessa maneira que funciona aqui no Android a gente vai ter uma activity ela vai ter esses momentos né que a gente chama de ciclo de vida e esse de criação é um desses pontos que a gente pode adicionar código para mostrar aqui na tela tudo bem aí para mostrar um código aqui na tela basicamente a gente vai ter essa função inha chamada de set content essa set content ela já é uma função que vem ali do Jetpack compose como eu comentei o jetpack compose vai ser a ferramenta para criar a

interface de usuário Então tudo isso que a gente viu aqui na tela tela em branco esse texto que é o Hello Android no caso né já ia falando hello world é tudo isso foi feito com o jetpack compose Então a partir desse set content é onde a gente consegue fazer a manipulação dessa parte da tela então por exemplo a gente vai ter aqui ó esse álcool ou gasolina team que é uma configuração padrão que vem aí do Android quando a gente cria o projeto que é a configuração de tema ele tá englobando tudo que a

a gente vai ter em relação ao tema algumas configurações padrões Então dentro dele a gente vai ter esse Surface que ele representa meio que uma superfí ele vai ser de fato um componente de um design System que existe aqui no Android que é conhecido como material design então se você já ouviu falar sobre ele ele é um componente principal pra gente ter acesso a esse tipo de design e mais internamente é onde começa uma configuração mais personalizada para fazer aí o nosso aplicativo que é esse grit esse griten ele já é um código pronto para

mostrar mais ou menos como é que o jetpack compose funciona Então veja que nesse código aqui a gente vai ter outros componentes como é o caso desse text para poder exibir algum conteúdo e É nesse text que a gente de fato exibe esse Hello Android Então se a gente colocar por exemplo hello world a gente vai ter o resultado do hello world que eu ia falando né então se eu escrever aqui diretamente olha só o que vai acontecer se eu executar de novo com shift F10 Olha só o aplicativo executou e veja que temos aqui

o hello world Então veja que é nesse código que a gente vai conseguir fazer essas manipulações vamos conseguir modificar o nosso código e assim por diante e agora que eu fiz essa introdução aqui para vocês vamos começar com o nosso código para trabalhar e chegar num código similar ao que a gente tá vendo aqui né que tem esse título do álcool gasolina tem essa mensagem indicando se é gasolina ou se é álcool tem esses campos de texto para receber os valores e assim por diante né Então como que a gente pode fazer isso para isso

a gente vai utilizar aí o jetpack compose e a gente vai precisar entender mais ou menos o mínimo de como que é o jetpack compose Então vamos lá como eu comentei Esse gritting é o código que foi criado personalizável pra gente conseguir colocar os nossos componentes Então o que a gente pode fazer aqui é basicamente o seguinte é remover todo esse código pra gente fazer do zero toda essa configuração então eu vou remover tudo aqui pra gente tudo bem removi Tudo e vamos criar a aí o nosso aplicativo do zero utilizando Jetpack compose a primeira

coisa que a gente pode fazer é basicamente o seguinte a gente pode criar o nosso primeiro componente visual que a gente chama de composable dentro aqui do Jetpack compose e ele vai ser sempre ali uma função inha então para criar uma função a gente escreve fun e eu vou chamar de app para representar todo o nosso aplicativo Tá bom então temos aqui a nossa função inha ela ainda não é o composable e para transformarla no composable a gente vai colocar colar a anotação @composable a partir desse momento a gente tem acesso a às ferramentas do

Jetpack compose Então se a gente quer colocar um texto a gente já pode utilizar se a gente quer colocar o campo de texto A gente também já pode utilizar composables serão funções que tem essa anotação de composable tudo bem E também emitem ali a interface de usuário e aí novamente quando a gente tem ali o nosso composable a gente consegue sim adicioná-lo dentro dessa configuração que tem o tema que tem o Surface e assim por diante Então se a gente chamos o app aqui olha só ele já tá ali acessível pra gente é claro se

a gente executar o aplicativo nesse momento ele vai apresentar uma tela em branco eu vou até mostrar isso para você olha só o aplicativo foi executado e é uma tela em branco justamente por nesse nosso app a gente não tem nenhum componente visual e agora sim a gente precisa começar a adicionar esses componentes visuais né então vamos entender como que a gente faz isso um ponto legal aqui do Android Studio é que a gente pode usar também alguns atalhos então eu vou usar alguns atalhos aqui para poder e facilitar a escrita de código a visualização

e esses atalhos eles mostram aqui nessa parte de baixo né pelo menos eu tinha um um um plugin que tava mostrando talvez eu não habilitei deixa eu ver se eu consigo habilitar da seguinte maneira eu venho aqui em plugins ele vai ser um plugin deixa eu ver aqui se eu acho era presentation né presentation assistant Deixa eu ver se ele tá aqui disponível presentation assistant ele tá aqui disponível eu não sei exatamente porque ele não mostrou deixa até ver outros atalhos que ele tá mostrando aqui talvez está desabilitado tudo bem vamos deixar dessa maneira então

eu vou falando os atalhos E aí se você quiser acompanhar quiser utilizar fique à vontade e nesse caso aqui eu usei o contrl Shift f12 para expandir aqui a tela ou então voltar com as visualizações que estavam disponíveis que é essa de baixo mostrando que o aplicativo foi executado e aqui à esquerda mostrando aqui o nosso diretório Onde tá o nosso projeto então cont contrl Shift f12 para poder deixar deixar expandido e só mostrar o nosso código tá bom e agora que eu fiz essa expansão vamos continuar e ver como que a gente chega nesse

primeiro resultado basicamente o que a gente precisa fazer é identificar os componentes veja que aqui a gente vai ter um texto Então a gente precisa colocar um componente de texto logo abaixo a gente também vai ter outro texto Então vamos começar tentando adicionar esses dois textos como que a gente faz para adicionar um texto aqui no Jetpack comp a gente vai ter o text o text nada mais é do que o componente que recebe um texto para receber o texto ele vai ter esse outro parâmetro que é o text e a gente pode mandar como

valor uma string que nesse caso a gente pode chamar de álcool ou gasolina vamos ver se é dessa maneira que tá aqui ó olha só o álcool ele tem o acento né então álcool legal então a gente dá um enter aqui e basicamente isso daqui coloca o texto tá bom assim como a gente viu lá no gritting certo aí em seguida o que a gente precisa fazer é adicionar ali a gasolina então intuitivamente a gente faria da seguinte maneira colocaria outro text certo e aqui a gente colocaria por exemplo gasolina porque a gente não tem

a lógica para decidir mas a gente tá montando meio que a estrutura do layout Tudo bem então se a gente ver aqui temos ali o álcool ou gasolina e em seguida a gasolina e eu vou executar o aplicativo para você ver o que acontece fazendo apenas essa configuração olha só executei aqui o aplicativo e veja que esse texto meio que um está sobrepondo o outro e isso acontece por quê Porque quando a gente tá montando uma tela a gente a gente também precisa definir um layout aqui no Jetpack compos a gente vai ter componentes principais

para fazer isso e dentre esses componentes a gente vai ter layouts que envolve uma caixa que é esse comportamento padrão que a gente tá vendo que é um componente sobrepor no outro layouts que envolvem uma coluna que é deixar cada um dos componentes em uma linha vertical e layouts que envolve uma linha eu vou até mostrar para você mais ou menos como é que fica cada um deles Então como que a gente envolve para um layout os nossos componentes visuais né basicamente a gente utiliza o componente de layout que nesse caso o box é a

caixa como eu comentei É esse mesmo comportamento que a gente tá vendo mas eu quero mostrar isso para vocês ã você pode selecionar aqui esses dois elementos e usar o nosso contrl shift setinha para cima e aí dessa forma ele consegue mover o código Tudo bem ã aí em seguida o que a gente pode fazer é usar o o Colon que vai representar a coluna tudo bem e dentro dessa coluna A gente pode também copiar o código né até pra gente não perder o código dentro do box e colar na coluna e por fim a

gente vai ter a linha que é Row que é basicamente a mesma coisa só que vai mudar que agora é Row ao invés do colum ou box Tudo bem então esses são os três principais componentes de layout pra gente organizar Aqui o nosso aplicativo eu vou mostrar cada um deles para você ver a diferença então pra gente só ver um código sem remover aqui da nossa tela a gente pode comentar os demais a gente pode selecionar usar o control barra que ele vai comentar a aqui pra gente beleza e agora que a gente fez isso

o próximo passo é de fato fazer a execução Olha só Manteve exatamente o mesmo comportamento porque como eu comentei o box ele sobrepõe ali cada um dos componentes que tá dentro dele agora vamos mudar um pouquinho para ver como que fica quando a gente coloca por exemplo o Colon né Então deixa eu Minimizar aqui vou executar de novo com shift F10 Olha só com o Colon ele conseguiu colocar aqui pra gente cada um em uma linha vertical Então veja que ele já se aproxima muito do que a gente quer fazer na estrutura no layout que

a gente quer fazer para o nosso aplicativo e é claro né só pra gente ver como fica vamos finalizar com o Row para você ver mais ou menos como é que fica com essa estrutura de layout Olha só na estrutura de linha ele deixou cada um do lado do outro Tudo bem então entenda que quando você tiver trabalhando aqui com Jetpack compose você meio que vai ter uma combinação desses três principais componentes de layout vai ser muito comum você utilizá-los uma combinação para fazer outros designs que são mais avançados assim digamos né mas para esse

o que a gente vai precisar é apenas do Colon para deixar tudo em vertical e agora que a gente aprendeu isso vamos Apagar todo esse código que envolve o Row que envolve o box vamos selecionar todo o colum colocar o control barra novamente para tirar o comentário e Aqui começa a a modificação do nosso aplicativo onde a gente vai conseguir colocar os outros componentes e agora que a gente colocou os dois texos como que a gente faz para colocar aqui esses campos de textos né para isso também a gente vai ter o componente que é

o nosso campo de texto o text Field a gente pode dar o enter A partir dessa Primeira opção que aparece aqui pra gente que ele vai colocar essa opção de text Field que recebe um valor e tem esse outro que é o nosso on value changer que é um evento quando esse valor muda o jetpack compose ele vai ter meio que esse padrão que é fazer com que a gente mande o evento aliás mande um valor inicial que a gente quer representar e mande o evento para indicar o que que deve ser feito quando essa

mudança ocorrer quando a mudança de valor ocorrer então isso vai ser muito comum dentro do Jetpack compose a gente vai ver o que que a gente pode fazer com isso tá bom apenas para compilar e executar e mostrar na tela Vamos colocar os seguintes valores aqui eu vou colocar o valor inicial você pode colocar o valor que quiser por exemplo 2.00 e nesse on value ex Change dado que ele vai ser o evento ele é implementado a partir é do de um recurso que a gente chama de expressão lambda que é abrir as nossas Chaves

que a gente tá vendo aqui né e a partir dessas Chaves a gente consegue aí fazer essa configuração uma execução de um evento tudo bem você pode simplesmente deixar vazio para não executar nada mas depois a gente vai fazer uma configuração para deixar esse componente funcional então aqui no nosso design a gente vai precisar de dois certo então a gente colocou um e para deixar nessa estrutura de coluna A gente pode colocar outro certo e vamos só executar para ver se pelo menos na parte de layout a gente já vai atender o que a gente

precisa olha só que legal nosso aplicativo já começa a mostrar um resultado bem mais interessante né a gente tem os nossos componentes de texto temos os campos de texto e agora sim a gente já consegue ter algo muito próximo do que a gente precisa aqui do nosso aplicativo aí é claro que a gente vai precisar agora é meio que personalizar esses componentes para ter esse outro visual que a gente tá vendo aqui né então vamos aprender a fazer isso e um ponto importante é que mesmo que a gente tenha o nosso campo de texto quando

a gente clica nele ele mostra ali o teclado se a gente tentar digitar pelo teclado ele não vai funcionar E isso acontece por quê Porque precisa ser feita uma configuração que a gente chama de gerenciamento de estado a gente ainda vai ver como fazer isso para que o nosso aplicativo seja funcional mas nesse primeiro momento a gente pode deixar dessa maneira porque eu vou focar nessa parte de design dado que a gente tá finalizando aqui essa parte do layout E aí como é que fica essa parte do Design basicamente a gente vai precisar fazer o

seguinte a primeira coisa é colocar todo esse conteúdo Centralizado certo e para fazer isso a gente pode fazer algumas brincadeiras no nosso colum que são algumas modificações a primeira modificação é fazer com que esse colum ele tenha o tamanho da tela porque todos esses componentes de layout Box colum Row ele vai crescer com con Forme o conteúdo que ele tem internamente então por exemplo se a gente vê aqui esse conteúdo que tem o text tem o text Field e assim por diante que ele só consome até para vocês verem aqui vem no Running devices mostra

o emulador que ele só consome esse espaço vai ser apenas o espaço que a gente vai ter da nossa coluna então uma das técnicas que a gente pode começar é fazer com que ele cresça em toda a tela para que a gente tenha a possibilidade de manipular e colocar todos esses nossos componentes de uma maneira centralizada tudo bem e até mesmo para mostrar isso para vocês uma das técnicas que a gente pode fazer É de fato essas modificações que são feitas a partir de uma referência chamada de modifier Então esse modifier que vem do Android

x compose ui ele vai ser o responsável em fazer essas mudanças visuais ou até mesmo de comportamentos aqui dos nossos composables né Então veja que esse col text text Field também são composables É bom deixar isso claro e todos eles podem ser modificados a partir desse modifier E aí para fazer a modificação a gente chama esse modifier e veja que a gente vai ter muitas opções aqui disponíveis né Como por exemplo o background o background a gente pode mandar por exemplo uma cor a partir desse parâmetro que é o Color E aí nesse color a

gente pode mandar uma referência que é focada em cores essa referência é também chamada de color e essa primeira opção que a gente recebe esse U long a gente pode mandar um valor long que seja compatível para mandar uma cor que é a partir do nosso formato de ex decimal que seria o 0 x FF tudo bem a partir desse momento a gente pode meio que escolher uma cor até uma técnica que é mais simples é preencher tudo com 00 ou então fff né que vem ali do heam decimal das cores e aqui à esquerda

ele vai mostrar meio que uma cor que foi preenchida aqui é em preto Tudo bem se você clicar nela vai mostrar meio que uma paleta de cores olha só que interessante Então aqui você consegue selecionar uma cor que você deseja Você pode até mesmo escolher das paletas que estão disponíveis que vem do material design que é esse esse azul eu acho que foi o mesmo que eu usei aqui para esse aplicativo e fazendo isso ele já configura para você aqui os valores tá vendo ó Ele já deixa bonitinho então você pode escolher um e seguir

adiante aí com a cor que você escolher vou deixar essa mesma que eu fiz ali no aplicativo tá bom e agora que eu fiz isso vamos ver como é que fica na execução olha só que interessante ele conseguiu a aí colocar pra gente todo esse nosso e essa nossa coluna tudo bem um ponto importante para deixar bem claro é que ele ficou dessa maneira devido o seguinte né dado que não tem nenhum outro componente ele meio que cresceu conforme o que tinha disponível ali na tela se a gente colocasse algum outro deixa eu colocar por

exemplo um box vamos ver aqui como é que fica o box aqui disponível pra gente deixa eu subir executei Olha só ele aí ele só fez exatamente o crescimento apenas do que estava disponível dos seus eh dos seus itens internos Tudo bem então ele já teve ali um comportamento um pouquinho diferente Então veja que nem sempre ele vai crescer conforme o que é esperado aí para crescer de fato conforme esperado a gente vai precisar uma fazer uma outra modificação que aí nesse caso é uma modificação que a gente conhece como fio Max size E aí

nesse fio Max size ele vai crescer conforme que tem disponível vamos ver como é que fica olha só agora ele cresceu Então veja que mesmo naquele momento não colocando o fio Max size Por uma questão de sorte a gente teve o nosso componente e preenchendo em toda a tela mas a gente tem que evitar o máximo possível essa parte de sorte até para não ter comportamentos inesperados né então novamente a gente pode apagar aqui o nosso Box não precisa dele eu só fiz isso para mostrar para você que tem esses casos e agora a gente

fez essa primeira modificação na nossa coluna para que ela consiga preencher toda a tela e dado que ela tá preenchendo toda a tela a gente vai fazer as outras modificações para que o conteúdo interno dela que são os nossos componentes o texto o campo de texto eles fiquem centralizados E para isso aqui na coluna A gente vai ter outras propriedades como é o caso da vertical arrangement que nessa arrangement vai ser o arranjo que a gente vai fazer no modo vertical a gente quer deixar Centralizado esses componentes certo então para isso a gente vai ter

o arrangement que vai ser o Center que ele vai arranjar tudo isso dentro do centro tudo bem um ponto legal que eu não deixei aqui tão claro é que a gente consegue fazer essas visualizações se executar no aplicativo que é utilizando o que a gente chama de preview para fazer esse preview a gente vai escrever anotação preview anotação composable aqui embaixo e vamos criar uma função composable que ela vai ser responsável apenas em visualizar o que a gente está escrevendo no app então app preview é o padrão que a gente utiliza a gente coloca o

nome do composable e com sufixo preview e em seguida a gente coloca o tema também né que a gente tem disponível que é o álcool gasolina Team E então a gente vem com o nosso app que é o componente que a gente está construindo isso daqui é o suficiente para mostrar o preview aí para mostrar o preview Você vem ter aqui essas abinhas à direita que mostra esse code esse split ou então esse design e aí você pode escolher esse split que ele divide o que a gente tem de visual com o nosso código e

olha só que interessante a gente mostrou aqui o preview do que a gente vai apresentar lá durante a execução se eu executar ele vai chegar exatamente aqui no mesmo o resultado Tudo bem então como a gente pode ver deixa eu ver se não tô muito à frente eu acho que já dá para ver bonitinho a gente tem o preview não precisa ficar executando toda hora para ver o que a gente está modificando Então a gente vai começar a usar o preview para poder e fazer essas modificações visuais e agora que a gente chegou nessa parte

do arranjo de deixar isso daqui mais Centralizado a gente também precisa fazer a configuração de alinhamento que a gente vai ter a outra opção a partir da vírgula tudo bem que vai ser a horizontal que é a de horizontal alignment E aí no alignment a gente coloca esse Center Horizon ali e aí dentro dele a partir desse momento ele coloca tudo Centralizado e olha só que interessante já começa a chegar muito próximo ao que a gente precisa fazer aqui certo então a gente conseguiu colocar para é o que era necessário aí é claro né agora

que a gente fez isso os próximos passos é colocar por exemplo uma fonte um pouquinho maior PR gasolina uma cor e assim por diante né então o álcool gasolina vai ter essa cor branca branca com esse tamanho de fonte um pouquinho maior a gasolina vai ser um pouquinho maior em relação a esse título com a cor vermelha e os nossos Campos de texto como também os textos né eles TM esse espaçamento entre eles vamos aprender como pode fazer isso e esses espaçamentos tem várias maneiras de fazer mas essa parte aqui que envolve a o visual

do nosso texto a gente tem aí essas possibilidades a partir dos parâmetros do texto Então aqui no texto por exemplo a gente vai ter um parâmetro que é conhecido como Style nesse Style a gente consegue criar um estilo ou até mesmo usar estilos já prontos eu vou criar um novo aqui com vocês para que vocês vejam como que faz então a gente vai ter esse text Style e nesse text Style a gente vai ter muitas opções muitas opções mesmo então por exemplo quero colocar uma cor a gente vai ter o Color é só você colocar

o Color igual e determinar a cor que você quer nesse caso é o álcool ou gasolina a gente pode colocar color P White tudo bem Então temos ali a nossa cor já em branco Óbvio ela tá muito pequena então não dá para perceber aí o que a gente pode fazer agora é fazer as modificações para que ela fique um pouquinho maior como por exemplo a Font Size na Font size a gente vai precisar colocar um valor que a gente conhece como SP esse valor ele é destinado a textos para que a gente consiga colocar um

valor que a gente espera e também as ferramentas de acessibilidade consigam crescer esse texto porque muitas pessoas que TM ali a deficiência visual com dificuldade para poder visualizar o conteúdo ela consegue aumentar ou diminuir se ela precisar Tudo bem então por exemplo a gente pode colocar o valor 32 SP a gente faz o Import E aí sim ele já vai crescer esse texto pra gente tá bom ã aqui na cor eu tinha apagado o White Agora sim Tá bonitinho e olha só que interessante que ficou né bem mais próximo do que a gente tá vendo

aqui eu acho que o outro ponto que a gente pega aqui é que ele tá com o né então a gente pode colocar também e e a interrogação Então deixa eu colocar aqui a interrogação deixa eu colocar a interrogação e o para fazer o a gente vai ter o fonte Way e nesse Font Way a gente vai ter algumas opções que é esse fonte way. bold Então deixa eu dar os enters aqui um ponto legal é que a gente consegue usar alguns atalhos aqui do Android Studio que é o out enter para ele dar algumas

opções que são interessantes como esse caso do arguments ou separate Lines Ele separa o nosso código em linhas separadas né ele vai pulando as linhas e deixa o código mais fácil de ler certo então é uma técnica que eu utilizo bastante Então veja que agora a gente fez esse nosso componente do texto e uma das coisas que a gente já pode fazer é colocar o espaçamento né para colocar o espaçamento a gente pode fazer ou com modificador ou então colocar outros composables para isso como é o caso do Spacer o Spacer ele já recebe o

modificador pra gente determinar o tamanho então por exemplo a gente pode fazer o modifier pon size e nesse size a gente determina o tamanho tamanho que a gente quer geralmente a gente coloca múltiplos de dois com valores entre 8 16 e assim por diante e vamos começar com 16 para ver como é que funciona a gente vai ter a medida de dp dentro aqui do nosso e Jetpack compose esse DP ele é uma unidade aqui dentro do Android que é conhecida como densidades por Pixel que ele trabalha da seguinte maneira ao invés de usar pixels

fixos ele meio que simula como se fosse um pixel para cada densidade de pixel diferente porque como a gente sabe existem vários tipos de dispositivos com densidades de pixels diferentes então às vezes um dispositivo vai ter 400 pixels disponível ali na tela outro dispositivo vai ter 1000 e assim por diante Então se a gente começa só a usar Pixel às vezes um elemento que a gente quer ter uma percepção ele vai ser muito menor em uma tela muito maior em outra então esse densidade de pixel ele meio que faz esse cálculo para que em cada

tela seja muito similar muito próximo sem que a gente tenha que se preocupar com essa densidade tá bom então Alt enter aqui a gente colocou o 16 e olha só que interessante ele já deu um espaçamento até para você ver você pode colocar um background e ver como que fica esse Spacer né então você pode colocar por exemplo um red aqui né ou outra cor que você quiser e veja que ele tá ocupando ali aquele espaço até para você entender que de fato existe um corpo ali ele existe é por isso que a gente tem

aquele espaço pode remover o o fundo não precisa E aí o que a gente pode fazer também é colocar um espaço para o nosso texto entre a gasolina ou então o campo de texto e também um outro espaço que envolve aqui os nossos outros elementos dado que a gente utiliza esses componentes de layout eles também têm algumas técnicas que a gente pode também fazer esse espaçamentos só que essas técnicas envolvem esse vertical eh arrangement que pegaria cada um desses elementos já que a gente centralizou todo mundo aí já não vai mais conseguir tudo bem mas

teria a opção que permitiria fazer isso mas tudo bem dá para usar aqui o nosso Spacer não é um problema ou então se você quisesse você poderia envolver com outra coluna que Aí ficaria da seguinte maneira eu quero mostrar essa técnica para você entender que a combinação das coisas aqui é comum então você poderia remover aqui o Spacer a gente não precisaria de nenhum Spacer tudo bem e pegaria todos esses nossos componentes e colocaria em uma coluna Você pode até mesmo selecionar todos eles fazer o alt enter e vai ter a opção que é esse

surround with Widget nesse surround with wided ele vai dar a opção para envolver nos três principais componentes sendo esse contêiner o box Row um Row que é a linha e o col a coluna Então se a gente coloca em coluna A gente tem aqui disponível e agora dentro desse nosso componente a gente consegue fazer o uso do vertical eh vertical arrangement arrangement Cadê ó arrangement colocando então a opção que eu comentei que é colocar o espaçamento igual para cada um dos elementos que aí seria o nosso arrangement deixa colocar aqui só essa referência ponto spaced

by aí aqui sim a gente coloca 16 DP e ele vai colocar cada um desses componentes aqui pra gente com esse DP aí é Claro dado que é uma outra coluna A gente também precisa fazer o horizontal novamente né o horizontal alignment Então seria aqui ó alignment Center Horizon tá ali aí ele colocaria como a gente espera Então veja que são vários truques que a gente tem aqui no Jetpack compose né e agora que a gente aprendeu esse truque Vamos para o próximo elemento que é gasolina e vamos colocar também um estilo para ele então

eu vou simplesmente copiar e colar e vou fazer a mudança conforme o que eu preciso Então nesse caso eu vou colocar a cor Red que é o que a gente tá utilizando aqui e como a gente pode ver a gasolina é um pouquinho maior no tamanho do texto Então vou colocar o valor 40 por exemplo né aparentemente chegou no resultado próximo então show de bola temos aqui um resultado muito próximo do que a gente espera e o que falta aqui é colocar também essas etiquetas né que a gente chama aqui dentro dos nossos Campos de

texto que determina o que que é gasolina o que que é álcool porque afinal o campo não tá falando o que que é né então a gente pode fazer isso com alguns parâmetros também só que agora do text Field E para isso eu vou deixar em linhas separadas vou usar aquele atalho alt enter but arguments or separate Lines e vamos ver aí como é que fica né então agora eu coloquei a vírgula aí pra gente colocar essas etiquetas a gente vai ter esse essa opção que é a Label nessa Label a gente vai ter acesso

a um uma técnica dentro do compose conhecida como slot o slot ele vai ser como se fosse essa expressão lâm aparecendo no evento como eu comentei mas basicamente ele permite colocar outro composable como é o caso do text uma imagem um botão o que você quiser nesse caso é um text e o que a gente pode colocar sendo o campo de texto de baixo seria o valor álcool né então a gente pode colocar o álcool e olha só que interessante que fica ele coloca Label ali pra gente podemos fazer exatamente a mesma coisa para o

nosso campo de texto de cima só que a diferença é que a gente vai colocar como gasolina ou se você quiser fazer o contrário também você pode fazer e veja que agora sim a gente já chegou no resultado bem mais interessante né olha só a gente já tá ali muito próximo do que a gente precisa fazer e agora que a gente fez isso que trabalhamos aqui no design conhecemos o preview podemos executar para ver se realmente vai apresentar esse conteúdo que a gente tá vendo aqui olha só que legal a gente executou e temos então

o nosso aplicativo Então veja que a parte visual a gente já atendeu agora o que a gente precisa é trabalhar na parte funcional como por exemplo eu quero digitar e apresentar ali o valor que eu espero né E para isso a gente vai introduzir um conceito que a gente chama de gerenciamento de Estado então vamos entender o que que isso significa a primeira coisa o que que é estado estado é qualquer coisa que pode mudar dentro do nosso aplicativo Então esse texto que a gente tem aqui dentro que é esse dois ele pode ser consider

considerado sim um estado porque a gente vai mudar esse valor conforme a gente interagir com o aplicativo só que para fazer isso a gente precisa de uma ferramenta que permita isso e dentro aqui do compose a gente vai ter algumas ferramentas para fazer e essa modificação de estado e consequentemente modificar o estado fazer essas mudanças de valor seria de fato o gerenciamento eu estou partindo de um ponto muito simplista tudo bem mas entenda que gerenciamento de estado é um assunto que tem muitas técnicas muitas ferramentas e pode ser sim algo muito mais complexo do que

eu estou indicando aqui mas novamente é o seu primeiro aplicativo é sua primeira vez fazendo isso a gente vai ir pro modo mais simples possível tudo bem Então como que a gente faz isso né para isso aqui dentro do Jetpack compose a gente vai ter uma ferramenta que vai permitir fazer essa modificação que ela é conhecida como multi state esse multi state que vem desse mti State vai ser uma função inha que vai permitir colocar valores primitivos como Strings ints floats para que a gente consiga fazer essas modificações e quando a gente trabalha com campo

de texto A gente vai trabalhar com as nossas Strings tudo bem E a partir desse momento que a gente tá criando aqui o nosso multib state a gente pode atribuir essa chamada de função a uma variável que vai ser modificável então a gente pode fazer um var indicar que isso vai ser o valor gasolina por exemplo tudo bem é uma maneira de escrevermos aqui o nosso código para fazer o gerenciamento de estado a gente criou um estado que ele vai conseguir fazer essa modificação só que tem aqui alguns detalhes importantes que é o seguinte né

a partir desse momento vai ter um comportamento dentro aqui do Jetpack compose que é importante você saber que ele é conhecido como composição e recomposição composição nada mais é do que o código que ele vai executar todos esses nossos composables que a gente tá vendo aqui ó tá vendo tudo isso que a gente criou e vai desenhar na tela Tudo bem então isso é o que a gente chama de código de composição a recomposição nada mais é do que a execução desse mesmo código só que aplicando as modificações que a gente precisa fazer e dado

que esse código ele vai ser re executado da maneira como a gente está configurando o nosso valor ele sempre será o mesmo tudo bem ele sempre vai chamar de novo aqui esse nosso mutable state off e vai deixar vazio e se isso acontecer a gente nunca vai conseguir fazer a atualização e devido a isso a gente tem uma outra ferramenta que impede que esse código ele seja re executado e dessa maneira ele deixa ali o valor Zerado novamente e essa ferramenta é conhecida como remember esse remember nada mais é fazendo aqui o Import né com

Alt enter nada mais é do que uma técnica uma ferramenta para garantir que ele cria o estado pra gente só que no momento que ele tiver que fazer a atualização que re executar aqui a nossa tela ele não faça a inicialização novamente e mantenha o último valor que foi atualizado Óbvio o que eu tô falando aqui pode ser muito confuso mas fazendo uma prática a gente vai ver que realmente faz sentido Então a partir desse momento a gente criou o Estado e a partir desse momento a gente pode utilizar esse estado aí você pode usar

no campo que você quiser como é o caso desse primeiro text Field para usar o seu estado você vem no valor gasolina como string tudo bem Ah aí dado que ele não é uma string a gente precisa acessar o valor como se fosse uma string para você ver o tipo de alguma coisa aqui no Android Studio você pode usar o atalho que é o contrl q ele até mostrou quando eu coloquei o cursor e veja que ele vem de mutable state E aí ele coloca ali é o maior e o menor dentro dele uma string

então ele tem meio que um valor interno dele de string para acessar esse valor interno a gente chama o value tudo bem Então é assim que a gente consegue acessar esse valor aí agora para a gente ver uma mudança algo realmente acontecendo nessa mudança de valor o que que vai acontecer via parâmetro ele vai ter um novo valor da gasolina que a gente pode até chamar de novo valor tudo bem aí colocando essa setinha para poder fazer a execução e nesse novo valor a gente pode falar o seguinte olha alguém digitou alguma coisa no e

eu preciso atualizar o valor que eu tenho então basicamente ele vai pegar o valor gasolina. Val e vai indicar que vai ter esse novo valor porque o que que acontece ele pega esse valor que a gente tem inicialmente e adiciona um novo então meio que isso daqui é o valor que a gente mandou mais o valor que a gente digitou e é por isso que a gente faz dessa maneira porque ele vai adicionar as duas modificações seja uma digitação ou então se a gente apaga um caracter Então é assim que funciona o jetpack comp polos

novamente nesse momento pode ser um pouquinho confuso eu entendo porque na primeira vez que eu estudei também era meio confuso mas conforme você vai praticando conforme você vai testando vai ficando cada vez mais claro Tá bom eu quero executar para você ver isso acontecendo E aí sim a gente vai ver o que que mudou no nosso aplicativo vamos executar o aplicativo rodou e a primeira coisa que você pode ter perceptível é que quando o valor ele é vazio ele fica com um texto é um pouco maior né antes ele tinha essa labz inha um pouquinho

em cima como a gente vê no de álcool só que agora ele tá com essa Label um pouquinho maior isso é o comportamento desse componente que vem do teal design e se a gente clica ele faz um efeito tá vendo um efeito no qual ele expande ou melhor ele levanta esse nosso Label e diminui né nem expande ele diminui e se a gente começa a digitar olha só que interessante eu digitei no teclado obviamente mas se vai aqui no teclado virtual a gente começa a ver esse nosso componente tendo vida então entenda que o gerenciamento

de estado é o que vai dar vida a nosso aplicativo e isso vai ser muito importante você entender para você você conseguir criar os seus próximos aplicativos utilizando jetpack compose e como eu comentei o que está acontecendo aqui é basicamente o seguinte no momento em que a gente coloca essa mudança de valor desse valor gasolina dado que isso daqui é um estado do que vem ali do Jetpack compos que é esse mutable state ele tá disparando o evento para fazer a recomposição que é executar de novo esse código de tela e tudo que tem acesso

a essa variável que a gente criou que muda seu valor ela vai ser redesenhada com um valor novo então é por isso que dessa maneira funciona o nosso código Esse é a maneira declarativa de criar os nossos códigos eu vou até fechar aqui o nosso eh a nossa amostra porque agora a gente já pode trabalhar direto com o emulador e entenda que cada vez que a gente digita por exemplo algum valor ele tá fazendo esse disparo de evento e falando olha redesenha porque eu mudei o estado e quem tiver esse estado você vai colocar esse

valor novo então é assim que ele funciona fun tá bom e agora que a gente fez isso a gente pode também criar esse estado para o nosso álcool porque cada um vai ter que ter um estado diferente para ter os seus valores diferente e vão precisar atualizar na tela também né Então como que a gente pode fazer agora é basicamente a mesma coisa você pode até mesmo simplesmente copiar e colar só que você vai mudar o nome da variável Então vai ser valor álcool por exemplo né E vai ser exatamente a mesma coisa um ponto

importante que a gente utiliza bastante aqui no compose é que é o seguinte veja que a gente sempre tá usando esse ponto value para poder fazer essa alteração e aqui no cotlin a gente vai ter uma técnica que é chamada de delegation property que é a partir desse buy que ela meio que faz esse papel pra gente de alterar o estado Só que a gente trabalha diretamente com o valor interno então por exemplo eu vou importar aqui né pra gente ter acesso a essa ferramenta então ao invés de fazer por exemplo eh valor álcool Cadê

valor ácool pon value eu já consigo acessar string diretamente durante a leitura e ao mesmo tempo ao invés de eu fazer ali valor álcool Cadê valor álcool mandando o valor que eu tenho nesse evento eu já consigo fazer essa alteração diretamente um outro ponto interessante é se a gente só tem um único parâmetro Na expressão lambida a gente pode usar é o parâmetro chamado de it ele já é subtendido então isso daqui é equivalente ao que a gente tá vendo aqui em cima Qual que você gostou mais eu tenho vai gostar mais dessa opção que

é mais simples né então vamos ver se realmente funciona aí se funcionar a gente migra eh ess esse outro gerenciamento de estado para esse formato aqui tá bom então deixa executar olha só que legal aplicativo foi executado e veja que a gasolina está funcionando deixa eu diminuir o teclado agora vamos para o álcool a gente vai ver também que está funcionando são estados diferentes para cada um dos Campos Isso vai ser importante você também ter como conceito porque você pode sim compartilhar estado você você pode usar o mesmo estado para outros componentes mas vão ter

componentes que precisa ter um estado exclusivo como é o caso do valor da gasolina e do al tudo bem legal agora que a gente fez isso o próximo passo que a gente precisa fazer é o seguinte é pegar esses valores que a gente tem da gasolina ou do álcool e fazer de fato a lógica para então determinar se vai ser gasolina ou se vai ser álcool certo e aí vem aquela questão como que a gente pode fazer isso dado que esses nossos códigos eles são exec ados novamente pra gente conseguir aí e ter a recomposição

ter Os Novos Valores Tudo indica que os códigos que a gente tem aqui embaixo eles também serão executados novamente certo Ou até melhor isso significa o seguinte que se a gente quer determinar se vai ser gasolina o álcool esses estados eles precisam ficar acima dos componentes visuais que a gente vai eh modificar com base na sua mudança Então o que geralmente a gente faz é o seguinte a gente costuma deixar esses estados bem mais no topo dos nossos códigos de composição porque todo mundo que tá abaixo que precisar acessá-los que precisar fazer algum tipo de

reação vamos dizer assim vai conseguir acessar sem nenhum problema então esse é o primeiro passo que a gente pode fazer é deixar os estados o mais alto possível para que os componentes visuais consigam aí trabalhar com eles eu vou já deixar como o buy também aqui no valor gasolina e mais abaixo eu vou colocar aqui apenas os valores diretos Então essa é uma mudança que eu vou fazer então nosso código ficou dessa maneira né e dado que agora a gente tem esses valores a primeira coisa que a gente vai precisar fazer é extrair esses valores

e fazer ali meio que uma operação aritmética E para isso eu já peguei um aplicativo que funciona ali dentro desse contexto de álcool gasolina então eu separei aqui uma aplicação web e ele mostra mais ou menos pra gente como que funciona então por exemplo se o álcool tá R 3 e a gasolina tá 2 ele vai falar que é a gasolina tudo bem agora se eu colocar o álcool a R 2 vamos ver aqui ó r$ 2 e a gasolina A TR vamos ver aqui a R 3 ele vai indicar que é o álcool Então

veja que é mais ou menos isso que a gente vai precisar fazer conforme os valores vão mudando a gente vai precisar indicar se é gasolina ou então se é álcool né E para fazer isso existe ali o cálculo indicando o seguinte né Ó que você divide o valor de litro ali da do álcool pela gasolina e se o resultado é menor do que o sete significa que que o 07 né que seria os 70% significa que o álcool ele é recomendado Tudo bem então é basicamente isso que a gente tem que fazer e para fazer

esse cálculo a gente pode fazer da seguinte maneira né quando a gente tiver esses valores que envolvem valor da gasolina ou do álcool a gente pode fazer um cálculo Como que funciona esse cálculo a gente vai precisar pegar o valor gasolina e transformar em um valor que ele possa ser calculável como por exemplo o Double então a gente pode usar o two Double que é possível dentro aqui do Cot a gente pega uma string e transforma em o Double E aí em seguida a gente vai fazer a divisão ali pelo do álcool né até para

não errar Deixa eu só ver se é esse mesmo o a divisão então a gente pega o o álcool pela gasolina então a gente faz o contrário Então aqui a gente coloca o valor álcool dividido pelo valor da gasolina e para fazer a divisão É só colocar a barra tudo bem E aí para verificar se um é maior do que outro etc se deu isso ou se deu aquilo a gente pode usar o operador que ele verifica se é maior ou menor então por exemplo se for mai maior do que 07 vamos ver aqui qual

que é a lógica se o O valor é dessa divisão ela é menor do que 07 aí vai ser álcool então se for maior ela vai ser gasolina é meio que uma questão lógica né então a gente pode falar que isso daqui vai determinar se é gasolina a gente pode até chamar de é gasolina né é uma maneira que a gente pode fazer deixa até tirar um pouquinho mais esse preview porque a gente não está mexendo na parte do layout sim na parte do código né Então deixa eu colocar aqui o preview beleza ele colocou

para baixo né não é para baixo eu queria vou colocar opção só de código tá bom Agora sim Então temos aqui a nossa lógica isso daqui ele Calcula pra gente legal e dado que isso daqui Calcula pra gente que é o e gasolina a gente pode determinar a partir de condições O que que a gente quer apresentar então por exemplo esse texto aqui se é gasolina ou álcool a gente pode fazer com que ele também seja condicional então por exemplo a gente pode colocar aqui um Val que ele vai determinar álcool ou gasolina e aqui

a gente faz um cálculo ou melhor a gente faz ali uma estrutura de condição que seria é gasolina a gente vai determinar que vai ser gasolina aí a gente faz o ELS a gente coloca aqui como álcool se isso daqui for falso Tudo bem então isso daqui basicamente é lógica de programação como eu comentei se você tiver essa parte de lógica de programação vai ser muito fácil Se é a primeira vez que você tá vendo basicamente se é gasolina a gente fala que é gasolina se não é gasolina a gente fala que é alco é

simples assim tá bom eu vou utilizar um atalho para poder organizar o código que é o control alt L que ele tenta autoformat tudo bem Se ele não autoformat é porque eu tinha alguma coisa selecionada né então por isso ele só tentou formatar o selecionado sem selecionar nada aí ele começa a formatar as coisas né vamos ver aqui ó deixa eu dar um OK beleza ele Auto formatou e ele ficou dessa maneira né um que eu gosto de deixar um pouquinho mais para cá né então para isso eu seleciono só o que eu preciso dou

os tabz inho vamos ver se ele deixa mais bonitinho eu prefiro deixar dessa maneira né ó quando coloco esses ifs e assim por diante ou então até em uma única linha né então deixa aqui ó o if em uma única linha até para não ficar tão estranha a poluição ali né E fica mais ou menos dessa forma Então temos aqui o título aí obviamente né dado que agora a gente tem esse título a gente precisa colocar o álcool ou gasolina aqui para esse título um ponto importante que é é é importante a gente deixar claro

é que se a gente fizer o código dessa maneira o que que vai acontecer inicialmente a gente não vai ter um valor Double eh disponível aqui nesse código e na composição logo no primeiro momento que a gente executar ele vai quebrar o código e isso acontece por quê Porque isso daqui não é um valor compatível com Double vazio não é então pra gente fazer esse cálculo explicitamente a gente precisa também de uma condição que é o seguinte a gente precisa fazer esse cálculo apenas Quando a gente tiver essa condição que é ter pelo menos um

valor em cada um esses campos Tudo bem então perceba que tudo que a gente tá mostrando aqui se é álcool gasolina é uma coisa condicional certo então até mesmo essa condição ela pode vir um pouquinho mais abaixo só mostrar eh esse álcool gasolina apenas Quando a gente tiver esses valores Então como que a gente faz isso a gente coloca esse izinho bem no começo ele vai envolver todos esses nossos componentes aqui né que é o é gasolina e o título e ele só vai mostrar esse título quando ele tiver de fato ali essa condição que

é o campo da gasolina ou o campo do álcool não serem vazios E para isso né basicamente a gente pega o valor álcool a gente aplica o is not Blank e também com esse end aqui a gente coloca o valor gasolina is not Blank Então esse código que eu coloquei aqui nesse momento basicamente ele faz o seguinte ele vai atuar em cima desses valores de estados que vão ser modificados conforme as interações quando eles não forem vazio que é essa condição que a gente tá tá vendo aqui tudo bem aí sim ele começa a executar

seja o cálculo seja a decisão se mostra que se é gasolina ou então se é álcool até mesmo um ponto legal que a gente pode fazer aqui é o seguinte né quando for gasolina a gente determina uma cor quando for álcool a gente pode determinar uma outra cor certo então para fazer isso até a cor pode ser um pouquinho condicional então a gente pode fazer o seguinte ó vamos lá é Val cor e vamos determinar aqui com também um if né a gente pode usar exatamente o mesmo if aí a diferença é que nesse if

a gente coloca o Red aqui inicialmente pro álcool e a gente pode usar aqui o Color P Green para determinar a cor do nosso álcool né então no caso primeiro é da gasolina Eu acho que eu falei errado né então se a gasolina vai ser vermelho se álcool a gente deixa verde e fica dessa maneira agora que eu coloquei isso modifiquei muita coisa vamos executar para ver como é que o nosso aplicativo fica né Olha só o aplicativo ele executou e vamos então colocar os valores eu vou colocar por exemplo do aqui pra gasolina minimizei

o teclado e vou colocar três aqui pro álcool olha só ele falou que é a gasolina vamos ver se é isso mesmo a gente colocar aqui do Cadê do e colocar aqui TR aí ele coloca para calcular aí ele tá falando que é gasolina agora se eu colocar por exemplo sei lá três na gasolina e colocar dois no álcool ele vai indicar o qu ele vai indicar que é o álcool Será que que lá no nosso aplicativo também vai funcionar vamos ver né então qual foi o valor foi dois pro álcool e três pra gasolina

então três pra gasolina e dois para o álcool olha só automaticamente ele colocou esse valor é claro a gente fez nesse evento de mudança do estado e automaticamente ele tá calculando mas se você quisesse você também poderia fazer isso dentro do botão poderia colocar um botão de evento até mesmo uma técnica legal aqui no composable ol ou melhor no compose é que a gente tem algum os comp posibles para fazer animação que é bem fácil de utilizar e essa animação é parte de condições Como por exemplo o animated visibility ele vai precisar de uma condição

para poder apresentar ou esconder o conteúdo e a gente pode usar exatamente a mesma que a gente fez que é quando os nossos Campos tem os seus valores então a gente pega todo esse if que ele precisa ser condicional também e jogamos para essa visualização animada tudo bem vamos ver como é que vai ficar o nosso aplicativo rodou Vamos colocar aqui os valores então Então deixa eu colocar três gasolina dois álcool e olha só que interessante ele conseguiu mostrar ali pra gente conforme essa mudança né então isso é bem legal vou até colocar outros valores

como por exemplo 3.2 pra gasolina ã 2.50 pro álcool ele já começa a falar que a gasolina é interessante Então veja que o nosso aplicativo ele está funcionando e é dessa maneira que a gente cria aí os nossos aplicativos utilizando aí as técnicas mais recentes aqui com o Android a partir do dia P compose então é criando os nossos composables que são esses elementos visuais é utilizando o gerenciamento de estado que permite pegar valores novos fazer cálculos fazer Novos Valores apresentar conteúdo esconder e assim por diante né então eu acho que eu já passei bastante

tempo né eu sei que eu passei muita coisa muito rápido e tem muito detalhe que às vezes ficou um pouco mágico um pouco confuso mas o meu objetivo era chegar de fato nesse resultado até mesmo para você conseguir chegar no aplicativo tá bom e antes de tudo é importante deixar bem claro que esse aplicativo ele ainda tem muitos detalhes que podem ser melhorados como por exemplo se eu digitar um texto e tentar fazer esse cálculo eu vou ter problemas tudo bem ó se eu tentar colocar um um valor que não seja compatível eu terei problemas

então sim são detalhes que dá para melhorar tem muitos vídeos aqui do canal mostrando um pouquinho mais desses detalhes então se você quiser saber um pouquinho mais de alguma coisa deixa aí nos comentários ou acompanha aqui o canal tudo bem agora eu posso voltar assim na minha tela principal e eu vou convidar você aí para deixar um comentário do que que você achou dessa primeira criação do aplicativo novamente eu sei que para a primeira vez é bem difícil de acompanhar o que aconteceu aqui muitas das explicações eu passei super rápido e se você precisar que

uma das explicações seja mais e específica mais detalhada mais carinhosa assim digamos eu conto muito com a sua participação aqui Dos comentários novamente o meu objetivo er vai chegar em um resultado e agora que a gente chegou nessa parte final é muito importante também você que acompanha aqui o canal que ainda não fez inscrição por favor considerar deixar um like em comentário porque isso ajuda bastante aqui o apoio com o canal então era isso que eu tinha para trazer para vocês um abraço valeu falos