Transcrições
1. O que você vai aprender e construir: Ei, pessoal, bem-vindos.
Alfredocenc. E nesta aula, você aprenderá os fundamentos
do gerenciamento de estado criando
um aplicativo Counter Pro plus A melhor parte é que
usaremos a inteligência artificial como nosso assistente
pessoal de codificação nos ajudar
a escrever um código melhor e
mais limpo desde
o início Você aprende como
configurar um novo projeto, entender a
diferença entre sem estado e widgets com
dobra de estado e criar uma interface de usuário bonita
e moderna usando o sistema de design Material
Three Você aprenderá como adicionar texto
dinâmico e criar botões
elevados
e, com a ajuda do gerenciamento de
estado, adicionaremos funcionalidades de incremento, diminuição e redefinição Em seguida, usaremos a IA para refinar nosso código, encontrar pugs
e corrigi-los um por um Antes de começarmos,
certifique-se de ter flutter instalado e configurado o
código VS em sua máquina Também usaremos a extensão
Chat PD Codex para nos ajudar com nossa caça de
pugs EI Esta aula é perfeita para iniciantes que estão apenas
começando a usar o Flutter Vamos manter as coisas divertidas, simples e amigáveis para iniciantes Depois que nosso aplicativo for criado, usaremos nossa IA para verificar erros e problemas de
desempenho. Sem jargões complicados, apenas um código
limpo e eficiente. Para seu projeto de classe, você
criará sua própria versão
do aplicativo Contra Pro Plus usando o arquivo de pontos principal
que desenvolvemos juntos. Você precisará criar a
lógica, configurar as funções de incremento, diminuição e redefinição e, em
seguida, usar a IA para encontrar bugs
e problemas de desempenho Depois de terminar, publique uma captura de tela ou uma gravação de tela do seu
aplicativo na galeria do projeto Mal posso esperar para ver
o que você construiu. E se você está empolgado em ver como a
IA está mudando a
forma como criamos aplicativos, clique no
botão Seguir no meu perfil para não perder
o próximo aplicativo nossa série. Vamos começar.
2. Criando o projeto, função principal, RunApp: Tudo bem. A
primeira coisa que vamos fazer é criar
um novo projeto. Vamos abrir nosso terminal e navegar até a pasta do seu
projeto. Então, para mim, isso é um CD, tipo de
mesa, CD, projetos vibrantes. E então digite, flutue, crie,
conte P plus. Em seguida, pressione Enter. Depois que o projeto for criado, vamos entrar nele. CD, Counter Pro plus. Agora abriremos o projeto
no código VS digitando code, D e pressionando end Vou fechar
essa impressão de comando aqui e vamos maximizar isso Agora que estamos
dentro do projeto, vamos abrir a pasta de lábios e depois abrir o dardo de pontos principal É aqui que
escreveremos todo o código
do nosso CountAp. Para começar, vamos
remover todo o código padrão desse arquivo para que possamos
criar tudo do zero. Vamos selecionar tudo
e clicar no backspace. Em seguida, vamos importar a
biblioteca de materiais flutter na parte superior Então, vamos dizer pacote de importação, ponto de material
flutuante. Agora que importamos a
biblioteca, vamos configurar nosso ponto de
entrada principal para nosso aplicativo. Isso vai ser o vazio principal. Em seguida, diremos Runapp
Cast, contador P plus. Guarde isso. Aqui, estamos
chamando a função run app e transmitindo nosso
widget principal, counterpro plus Ainda não criamos esse
widget, mas não se preocupe. Vamos construí-lo juntos
na próxima lição.
3. Criando o widget sem estado do CounterProPlus: Tudo bem, é hora de dar um pouco de vida ao
nosso aplicativo. Vamos criar
nosso
widget Counter Pro plus e este será
um widget sem estado Agora, antes de
começarmos, uma rápida recapitulação. Lembra o que é um widget
sem estado? Um widget sem estado é como
uma pintura estática calma. Ele não se move nem reage
a nada porque, bem, não tem nenhuma
atividade em seu interior. Está lá, ainda
bem. Vamos continuar e
construir isso juntos. Em nosso arquivo de pontos principal, vamos digitar class, counter pro plus
extends stateless git Dentro disso,
vamos dizer const, counter Pro plus e, em seguida vamos dizer
super dot key Em seguida, vamos escrever ou
escrever esse método de construção e , em seguida, nos livrar de tudo o
que temos aqui e
retornaremos um aplicativo de material. OK. Agora, dentro
desse aplicativo de material, vamos dizer título, e o título será Counter P plus. E então podemos remover
esse banner de depuração. Estou pronto para cair. E aqui podemos
definir o tema agora. Vou definir os dados do tema para usar o material três True. Em seguida, vou definir a semente
do esquema de cores
para as cores azul. Vou guardar isso. E depois disso, vamos definir
a região de origem. E isso vai ser constante. E aqui vamos dizer tela inicial do
contador. Vamos guardar isso. Então, o
que acabamos de fazer aqui? Criamos uma
classe Counter Pro plus que estende
o widget sem estado Dentro do método de construção, retornamos um amplificador de material. Isso é como a
raiz do nosso aplicativo. Definimos um título, desativamos o irritante banner
de depuração
e, em seguida, demos a ele um tema
simples e apontamos a página inicial para um widget chamado tela inicial do
Counter Não entre em pânico se você ver linha
ondulada vermelha sob a tela inicial do
balcão Isso é totalmente esperado. Ainda não criamos
esse widget, e é exatamente isso que
faremos na próxima lição
4. Como construir o CounterHomeScreen e criar um estado privado: Tudo bem. Agora é hora de tornar as coisas um
pouco mais vivas. Vamos criar nossa tela inicial do
contador
e, desta vez, será um widget de
estado completo, porque é aqui que toda
a atividade acontece É aqui que
atualizaremos e reagiremos às
mudanças no aplicativo Vamos começar a criar
esse widget. Então, aqui vamos dizer que a tela inicial do contador de
classes estende o widget de estatísticas completo Deixe-me voltar para cima. E aqui, vamos dizer
const, tela inicial do Counter. Digamos que uma chave super data. E aqui, vamos
dizer: Tudo bem. E desta vez,
vamos dizer, crie um estado e
deixe-me me livrar de todas as
coisas que temos aqui. E dentro desse widget com estado, adicionarei nosso widget na tela
inicial E deixe-me me livrar
desses dois colchetes encaracolados. E aqui, vou
atribuir isso para sublinhar o contra-estado. E
vamos salvar isso. O que acabou de acontecer
aqui? Declaramos uma
classe de tela inicial do contador que estende widget
state full e, em
seguida, dentro de create state, retornamos um contador de
sublinhado Esse é o estado privado que
esse widget usará. Agora, vamos realmente criar esse estado privado e adicionar
algumas funcionalidades a ele. Depois disso, aqui
vamos dizer que classe, sublinhado,
contra-estado estende estado E dentro desse estado, vamos dizer tela inicial do
contador. E dentro disso,
vou definir um INT que é um número inteiro Vou chamar uma
variável privada chamada count. Vou definir isso para zero. Então, precisamos criar
três estados aqui, um para incremento,
um para decréscimo e um para redefinição.
Vamos criar isso. Aqui, vamos dizer
vazio, sublinhado, incremento. E aqui, diremos que
defina uma data e defina isso também. Como isso é um
incremento, podemos apenas dizer contagem mais mais Isso vai aumentar. Agora, precisamos
criar o decréscimo. Vazio, sublinha a diminuição. E aqui vamos dizer definir estado, e eu defino isso para
contar menos menos Isso vai diminuir. Então, precisamos
redefinir tudo. Para redefinir isso, podemos dizer
vazio, sublinhado, redefinir. Em seguida, diremos definir estado, definindo a contagem de
sublinhados como zero Isso vai fazer com
que isso volte a zero. Vamos detalhar isso. Criamos uma classe particular chamada
underscore counter state Observe o sublinhado
antes do nome. Isso o torna privado
para este arquivo. Adicionamos uma contagem simples de sublinhados
inteiros para manter nosso valor de contador Em seguida, escrevemos três métodos incremento de
sublinhado
para aumentar a contagem, grau de
sublinhado
para diminuir a contagem redefinição de
sublinhado para
trazê-lo de volta a zero Toda vez que chamamos
esses métodos, envolvemos a lógica
dentro do estado definido. É isso que diz ao Flutter: Ei,
algo mudou, reconstrua a interface do Sim, eu sei que você vê aquelas linhas
vermelhas e amarelas também. Não se preocupe. O código é
perfeito. Não há nenhum problema aqui. Agora que preparamos
nosso estado, é hora de criar a
interface do usuário para nosso aplicativo de contador, e cuidaremos
disso na próxima lição.
5. Como criar a UI AppBar e o ColorScheme: OK. Agora que
temos a lógica estabelecida, é hora de dar vida a ela. É aqui que
pegamos todo o trabalho
dos bastidores e o
colocamos na tela. Vamos criar a interface
do usuário passo a passo, agradável e fácil, e
depois torná-la dinâmica. Vamos começar substituindo
o método de construção dentro do nosso contador de sublinhado,
que já criamos Então, aqui vamos
dizer em override build, e deixe-me voltar para cima E aqui, eu vou apenas
remover essas coisas. E aqui, vou
devolver o andaime. E agora, dentro do andaime, posso adicionar um APA Aqui vamos dizer APA. Dentro disso, posso adicionar um título esse título terá um widget de texto
e esse widget de texto
agora diz counterproplus Vamos guardar isso. O que estamos fazendo aqui é
devolver um andaime Pense em um andaime como a estrutura
básica de uma casa. Isso nos dá a base. Um aplicativo na parte superior, uma seção de corpo para preenchê-lo com widget e a flexibilidade de
adicionar mais elementos posteriormente Agora vamos executar o aplicativo. Eu o estou executando como o
aplicativo do Windows, como você pode ver aqui. Mas você pode escolher qualquer plataforma que quiser,
Windows, IOS,
Android ou até mesmo web Vamos executar isso. Lá está uma barra simples em
cima da nossa tela. Vamos alinhar
essa propriedade. Então, vou
colocá-lo aqui e meu código aqui e
comprimir isso um pouco Isso é bom. Então
deixe-me ver o código completo. Tudo bem, temos nosso aplicativo, mas podemos fazer com que
pareça um pouco mais polido com um toque
de design de materiais Vamos atualizar nossa barra de aplicativos. Então, vou colocar
isso de lado um pouco. Vou quebrar essas coisas
para que eu possa ler melhor. Vamos colocar a vírgula aqui. Agora, o que podemos fazer é
depois do título aqui, eu quero colocar uma vírgula e você
dirá cor de fundo, eu vou dizer tema dot,
off, dot color scream Eu vou dizer primário. Eu vou fazer a
mesma coisa aqui. Vamos salvar isso primeiro.
Vamos ver como isso parece. Novamente, veja se temos
essa cor azul. E então podemos dizer a cor
do primeiro plano, e eu vou
fazer a mesma coisa Esquema de cores ponto a ponto do tema ponto no primário. Vamos salvar isso, e isso nos
dará o texto em branco aqui. Então, o que mudou aqui? Adicionamos uma cor de fundo usando a cor primária do
tema atual
e, em seguida, definimos a cor do texto que é uma cor de primeiro plano, para que pareça limpa e Agradável e simples. parece um
aplicativo real, não é? Na próxima lição,
começaremos a criar o corpo do nosso aplicativo
Counter Pro Plus, e é aí que a
verdadeira diversão começará.
6. Como criar a UI: o corpo: Tudo bem Agora que
instalamos nossa barra de aplicativos, é hora de dar
corpo ao aplicativo. É aqui que mostraremos o valor
do contador e posteriormente, adicionaremos botões para
que ele ganhe vida dinamicamente Vamos adicionar o corpo
dentro do nosso andaime. Você pode ver que este é o nosso
andaime e dentro dele, podemos dizer corpo, e então eu posso colocá-lo Aqui, o centro recebe uma criança, e essa criança
adiciona uma coluna. Agora, dentro dessa coluna, precisamos alinhar
as coisas no centro Então, vamos dizer alinhamento de
acesso principal,
digamos alinhamento do eixo principal,
centro de Então, precisamos garantir que tudo tenha apenas o
tamanho necessário. Então, vamos dizer exercício principal, digamos exercício principal dot min. Ok. Agora, dentro disso,
podemos adicionar filhos. Então é aqui que entram todos os
itens do nosso aplicativo. Então, aqui, podemos adicionar
um widget de texto. E aqui podemos
dizer seu contador. E vamos salvar isso. Você pode ver que seu contador
apareceu aqui. E agora podemos
realmente estilizar isso. Então, aqui podemos dizer estilo. Então, podemos dizer que eles se apagam. Então, podemos usar o tema do texto. E aqui podemos usar o
título pequeno e salvá-lo. Você pode ver que ficou mais ousado. Agora, em vez de título pequeno, podemos usar título médio. Isso vai
torná-lo um pouco maior. Agora, depois disso,
há um widget de texto. Você adicionará
outros widgets de texto. Agora, esse widget de tecnologia vai
conter a variável da nossa contagem, que agora é zero Então, aqui podemos dizer a contagem de sublinhados em
dólares. E se eu continuar, salve, você pode ver
agora que diz zero, mas é um zero muito pequeno, então você precisa torná-lo grande. Então, aqui, o que podemos fazer
é dizer estilo. Aqui, eu posso usar tecidos. Primeiro, o têxtil,
vamos
aumentar o tamanho
dessa variável Para isso, podemos dizer tamanho da fonte e eu posso definir o tamanho da
fonte para 80. Guarde isso. Você pode ver
que ficou maior. Agora, essa é uma cor preta muito preta e
grossa. Precisamos usar a cor azul,
a cor azul dos temas. Para isso, podemos dizer cor. Então você pode dizer Team dot,
dot ColorScheme dot primary E você pode ver que agora está usando a
cor primária do tema para essa variável. Role para baixo e vamos ver
o que realmente aconteceu aqui. Vamos detalhar isso
de forma fácil e fácil. Nós embrulhamos tudo
dentro do widget central, que você pode ver aqui Isso coloca todo o nosso conteúdo diretamente no meio
da tela. Dentro disso, adicionamos uma coluna. Podemos empilhar vários
widgets verticalmente. Em seguida, usamos o alinhamento do eixo principal
e o colocamos no centro. Para alinhá-lo perfeitamente
no centro. Em seguida, adicionamos dois widgets, texto e outro texto O primeiro, estamos usando
para o título, seu contador. A próxima, na verdade, a estamos usando para a variável
contadora. Como nossa contagem de sublinhados
começa em zero por padrão, é
isso que você
verá na tela Mas não se preocupe, estamos
apenas nos aquecendo. Na próxima lição, adicionaremos os botões que
realmente alterarão esse número, incrementarão, diminuirão
e reiniciarão Finalmente, você pode ver
seu aplicativo em ação.
7. Como criar a UI: adicionando botões e funcionalidades: Tudo bem, é
aqui que as coisas ficam divertidas. Temos o
balcão na tela. Agora vamos dar a ele
alguns superpoderes. Vamos adicionar
três botões,
incrementar para aumentar
o contador,
diminuir para diminuí-lo e
reiniciar para trazê-lo de volta a zero A melhor parte é que
já escrevemos a lógica para essas
funções anteriormente. Agora é hora de dar vida
a eles usando um pouco de interface de usuário. Em vez de botões simples, vamos usar o ícone de botão
elevado. Podemos ter texto
e ícones. Isso é o que
vamos fazer. Vamos usar
mais para incremento,
menos para decréscimo
e atualização para redefinição E como
os queremos lado a lado, usaremos o widget de linha Ok, então vamos começar. Então, logo após esse
widget de texto que você vê aqui, vou adicionar um
pouco de espaço para respirar Então, eu vou dizer caixa de tamanho. Vou chamar uma
altura de 15 pixels. E então aqui
vamos adicionar nossa linha. Guarde isso, você pode ver o
contador subindo um pouco. Agora, dentro dessa linha, queremos que tudo
esteja alinhado ao centro Então, vamos dizer alinhamento de
acesso principal,
digamos alinhamento do eixo principal no centro do
ponto. OK. Agora, essa fileira
acolhe muitas crianças. Então, dentro dessas crianças, a primeira coisa que
vamos fazer é adicionar um botão elevado com um ícone. Então, aqui, o botão elevado com ícone assume uma
função e um rótulo. Vamos dar isso. O primeiro que
vamos fazer é diminuir. Então, quando pressionado, queremos carregar a função diminuição
do sublinhado. OK. E para etiqueta, vou usar um
widget de texto que diz decréscimo Guarde isso. Veja,
temos esse botão aqui, mas ele não tem nenhum ícone. Então, vamos entrar e
adicionar esse ícone. Então, vamos dizer ícone,
e aqui
vamos dizer ícone, ícones. Agora, para diminuir,
deveríamos usar menos, então esse é o ícone de remoção Vamos guardar isso. Veja,
temos aquela coisa negativa E se eu clicar nele, você
pode ver que vai para
a versão negativa Do zero, vai para menos. Agora, vamos adicionar um pouco de espaço para
respirar aqui. Esse é o tamanho de uma caixa. Vou definir a
largura desta vez para cinco. E então o que podemos fazer
é colocar outro botão, vou copiar
isso e colar aqui. Ok, então temos dois decréscimos. Tudo o que precisamos fazer é
mudar isso para reiniciar, e isso será reiniciado. E aqui, reduzimos o
ícone de atualização. Vamos guardar isso. Agora você pode ver,
temos o reset, e se um gl canon for reiniciado, ele volta a zero E agora, novamente, vamos adicionar um
pouco de espaço para respirar. E depois outro
botão elevado com um ícone. Então, isso vai
ser incremento e o texto vai
ser incremento E aqui, isso
vai ser adicionado. Guarde isso. Eu posso ver que
temos aquele botão de incremento. Agora, se eu clicar em diminuir, ele vai para menos Se eu clicar em redefinir,
ele vai para zero. Agora, se eu clicar no botão
de incremento, ele sobe. Ok, então o que está acontecendo aqui? Você vê que usamos
algo chamado caixa de tamanho. Isso dá um pouco de
espaço para respirar em altura e largura. Então, se dermos largura, ela se moverá para os lados Se dermos altura, ela se moverá na base
da altura. E então você pode ver que
usamos algo chamado linha. A linha alinha os
widgets horizontalmente. Ou você também pode ver que usamos alinhamento do eixo
principal e o
definimos como centro Isso mantém as coisas no centro. Em seguida, criamos três botões, botão
elevado, botão elevado e outro botão elevado. Esses botões chamam
funções como decremento, redefinição e incremento Agora, quando você executa este aplicativo, você pode ver aqui,
temos decréscimo, reinicializamos e também
temos incremento. Agora, aqui está a melhor parte.
Como todo o aplicativo é criado com o Material UI, você pode simplesmente alterar a semente do
esquema de cores no tema, e toda a paleta de cores do aplicativo mudará com ela.
Vamos testar isso. Se rolarmos até o topo,
você verá essa cor. Vou mudar
isso para talvez verde-azulado. E se eu clicar em salvar, você pode ver que
tudo mudou, e eu posso realmente mudar isso
para verde e não salvo. Você pode ver que mudou para verde. E se eu definir como roxo e ele não salvar, ele
mudará para roxo. Agora você tem um CounterAP totalmente funcional, dinâmico e
amigável ao tema
8. Como corrigir erros e problemas de desempenho com IA: Tudo bem, pessoal. Agora que nosso contador Pro plus
está tomando forma, é hora de fazer uma pequena limpeza de
primavera. Vamos usar a extensão
hangebyy Codex nos ajudar
a encontrar Falamos sobre isso
em nossa última aula, mas manter seu código
limpo e eficiente é um hábito que
economizará muito mais tempo
a longo prazo. Primeiro, vamos garantir que
a extensão esteja ativada. Vamos ver as extensões aqui. Novamente, veja que temos o códice, e eu vou habilitá-lo E quando isso estiver ativado,
vamos fechar isso. E agora vamos voltar
ao nosso arquivo de pontos principal. Quando estiver pronto, acessaremos o bate-papo e clicaremos nele e daremos
uma missão muito específica. Vamos digitar isso. Quero que você verifique se há bugs e problemas de
desempenho no meu aplicativo dentro da pasta lip. Escreva um comando de bloco
diretamente sobre cada bug com uma solução e
rotule-os como bug um, bug dois e assim por diante. Agora, quando você tiver o baile, vamos chutar Hena. Perfeito. Os comentários estão aqui. Vamos dar uma
olhada no que ele encontrou. Vamos
fechar o bate-papo aqui. E se eu rolar para baixo, você verá
que temos o primeiro bug. Os widgets estáticos
nessa tela são reconstruídos toda vez que o State A solução é adicionar
um const aos widgets. Esses valores nunca mudam, como o texto
counterpro plus, a caixa de tamanho, os
rótulos dos botões e os ícones Então, temos esse. Então,
vamos resolver isso. Eu vou dizer const. E você pode ver,
usamos o tema ponto A, mas ele não nos deu esse bug. Mas como já sabemos
disso em nossa aula anterior, você também pode
corrigir essa. Então, agora o que
podemos fazer é criar uma variável que vou chamar
de dados da equipe. É igual ao Team dt
do contexto. É isso mesmo. Não vou adicionar esquema de
cores desta vez. Isso porque, se eu rolar para baixo, você pode ver que temos
o tema
do texto , o esquema de cores e,
bem , muitas outras coisas também. Então, o que faremos
é
usar diretamente esses dados do tema
para aplicar isso. Então, aqui
vamos remover isso e dizer que são dados. E faremos a
mesma coisa aqui. Vamos nos livrar dessa. Vamos chamar isso de
dados. Vou guardar isso. E agora, se eu rolar para baixo, você pode ver
que temos seu contador. Você pode realmente configurar
esta para a costa dois, e aí vamos nós. Temos outro, vou
chamar isso de dados. Se você usar esses
dados, não podemos usar const, vamos
removê-los E vamos rolar para baixo.
O que mais temos? Temos outro aqui, então
podemos apenas dizer dados do tema. Digamos que
temos uma caixa de tamanho. Vou dizer const aqui
e há um segundo bug. Agora, antes de continuarmos e começarmos a
adicionar contras a todo o resto, vamos dar uma olhada no segundo bug. Essa linha pode transbordar
em uma tela pequena porque os três botões mantêm suas
tabelas de texto completo lado a lado Ok, então a solução é usada para embrulhar esses botões
com o rap richard. Ok, então vamos ver do que
está falando. Então, se eu tentar comprimir
isso, veja isso. Nós temos aquelas partes amarelas
e pretas. Essas são as
coisas das quais precisamos nos
livrar. Esse é o bug. Então, aqui, a solução é
usar um rap Richard. Então, usamos a linha, certo? Então, o que vamos fazer é levar essas crianças inteiras
aqui. Vou cortar isso. E em vez de fileira, vou usar rap
e apenas paginar isso. Ok, então nada muda. Tudo continua igual, mas você pode ver agora que eles estão
bem próximos um do outro. E agora, se eu
tentar comprimir isso,
veja, o espaçamento não
é No entanto, é responsivo, mas o espaçamento não é bom Então, precisamos adicionar algum espaçamento. Vamos adicionar isso. Agora, na embalagem,
temos espaçamento. Assim, posso definir o
espaçamento como bom. Se eu definir isso, você pode
ver, temos esse espaçamento. Mas agora, se eu comprimir isso, posso ver que
vem um abaixo do outro para corrigir isso também. Para isso, chamaremos
isso de espaçamento entre execuções. Vou definir isso para 15. Agora você tem um melhor
espaçamento lá. Agora, quero que esse botão
se alinhe no centro. Para alinhar isso ao centro, direi alinhamento Pressione o centro do ponto de alinhamento. Guarde isso e isso
ficará no centro. Então temos as crianças aqui. Agora, seu
aplicativo de contador é responsivo. Agora, a melhor coisa é
que, como estamos usando envoltório, não precisamos
usar a caixa do tamanho. Então, aqui podemos nos
livrar desse, então podemos nos livrar desse
também, e vamos salvá-lo. Ok, agora o
espaçamento está muito mais próximo. E se eu comprimir isso, posso ver como fica Então, definimos isso para 15. Vou ajustar
isso para cinco de volta. Ok, agora eles estão
próximos um do outro e também respondem Agora que fizemos isso, você pode ver
que está usando decréscimo e todas essas coisas e
não precisamos usar
custo nisso Então, agora vamos em frente
e agora vamos pedir outra verificação
à nossa IA Ok, verifique o código
novamente e remova os comentários se tudo estiver corrigido. Vamos em frente, até o final. Tudo bem, então temos a resposta. E se você verificar isso, na verdade não adicionamos que
deveríamos adicionar
o custo do texto, mas a IA meio que
cuidou disso. Portanto, não precisávamos adicionar para os botões porque estamos
usando uma função aqui, mas para os rótulos e ícones que
devemos adicionar. Mas o Codex
acrescentou isso para nós. E bem, incrível. Codex acabou de
nos dar luz verde e nosso código está limpo e
os s são responsivos, e estamos prontos para o próximo
desafio. Ótimo trabalho hoje.
9. Recapitulação e projeto do curso: E é isso. Juntos,
criamos com sucesso o aplicativo Counter Pro
plus. Começamos
configurando nosso projeto e construindo o tema de três
materiais personalizados. Passamos a dominar o gerenciamento de estados,
criando funções de incremento, diminuição e redefinição que tornam nosso aplicativo Mas não paramos por aí. Compramos o poder
da IA agente
para atuar como nosso auditor pessoal de
codificação. Usamos nosso assistente de IA
para escanear a pasta If, encontrando ajustes de desempenho e bugs de
layout que até mesmo desenvolvedores
experientes
às vezes não percebem É como ter um
desenvolvedor sênior em seu editor de código,
garantindo que cada linha de código seja profissional
e limpa. Agora é sua vez. Seu projeto de
classe é criar sua própria versão
do aplicativo Counter Pro Plus. Quero ver seu toque
pessoal. Experimente adicionar novos ícones, alterar os esquemas de cores e
até mesmo adicionar um novo recurso. Mais importante ainda, use seu assistente de IA para
verificar seu trabalho. Quando terminar,
faça o upload de uma captura ou tela de acordo com
a galeria do projeto Eu estarei lá para
verificar isso e dar um feedback. Lembre-se de que esse é
um grande marco. Ao combinar sua lógica de flutuação com a solução de problemas do AI Power, você já está criando
aplicativos como um Pro Se você conseguir dominar
esses fundamentos, poderá criar qualquer coisa no mundo
do desenvolvimento móvel Se você está gostando desta aula, certifique-se de clicar no
botão Seguir no meu perfil. Dessa forma, você será o
primeiro a saber quando
lançarmos o próximo aplicativo
da série baseada em IA. Obrigado por programar
comigo hoje. Sou seu senso de Floater, e
nos vemos na próxima aula Até lá, continue experimentando, continue construindo e fique curioso.
Nos vemos na próxima.
Flutter Sensei, Teaching Flutter from Scratch
