Transcrições
1. 01 O que você vai aprender e construir: Oi, todo mundo. Bem-vindo.
Eu sou Flutter Sensei e, nesta aula, você aprenderá como
criar um aplicativo de
código aleatório bonito e
totalmente funcional Este projeto é
curto, prático e absolutamente perfeito se você está apenas começando com flutter ou quer aprimorar suas habilidades com um miniaplicativo do mundo
real Nesta aula, você
aprenderá a adicionar e configurar pacotes como o
provedor para gerenciamento deles. Adicione fontes personalizadas para tornar
seu aplicativo único. Configure temas claros e escuros usando uma única chave seletora, use ferramentas de IA para gerar códigos
aleatórios, automaticamente, escreva a lógica que exibe os novos códigos com o
toque de um botão
e, por fim, aprenda a criar uma interface de usuário limpa e elegante que
fique ótima em qualquer dispositivo Ao final desta aula, você terá um aplicativo
flutter completo pronto para ser executado, compartilhado e personalizado, e a melhor parte é que você entenderá
cada linha dele Quanto ao seu projeto de classe, você criará seu
próprio aplicativo que
exibirá um
código inspirador na tela, alterará códigos
aleatoriamente
com uma única guia, alternará entre temas claros
e escuros e usará sua própria
fonte personalizada para destacá-lo É pequeno, simples e
incrivelmente satisfatório. O projeto perfeito
desenvolverá suas habilidades de vibração. Antes de começar,
você precisa
instalar o flutter no seu sistema Qualquer editor de código,
usarei o VS Code e terei um pouco de curiosidade para
jogar, explorar e experimentar Tudo bem, inicie seu IDE, pegue seu anel favorito
e vamos mergulhar. Na próxima lição, criaremos um projeto e começaremos a
configurar tudo. Vamos dar vida ao seu gerador
de código
aleatório . Vamos começar.
2. 02 Configurando o projeto e fontes personalizadas: Tudo bem A primeira
coisa que precisamos fazer é criar nosso projeto de filtro. Então vá para o seu terminal
e vamos navegar
até o desktop e entrar em nossos
FlitterPjects E então vamos criar um novo projeto de flutter
chamado flutter, criar um
gerador de código aleatório Isso criará nosso projeto
básico de vibração. Em seguida,
entraremos no projeto,
no gerador de código aleatório, e o arquivaremos com o código. É um código. Agora vamos fechar nosso terminal e expandir nossa tela. Agora, a primeira configuração que
faremos é adicionar nossas dependências Usaremos o provedor para alternar o tema entre o modo
claro e o modo escuro. Então, abra seu Pupspeck
dot YAML e, nas dependências,
adicione Vamos guardar isso. Depois de clicar em Salvar, o Flutter buscará automaticamente o pacote. Se não executar o Flutter
Pub G a partir do terminal. A seguir, vamos adicionar um pouco de personalidade ao nosso aplicativo com fontes personalizadas. Em nossa aula anterior, usamos o Google Faunt, certo Mas desta vez, você
aprende a adicionar suas próprias fontes personalizadas
manualmente no flutter Para isso, vamos adicionar
ao navegador. Vamos até pons.google.com. Vou usar o Playfair Display, mas você pode escolher
qualquer fonte que quiser Apenas certifique-se de que esteja
no formato TTF de pontos. E vamos baixar uma fonte
chamada Playfair Display. Vamos clicar em Obter fonte e depois clicar em Baixar. E vamos salvar
isso em downloads. Agora podemos fechar o navegador e abrir nossa pasta
Downloads. Então, podemos ir para mais opções. Sum e Zep, vamos
abrir essa pasta. E você verá que
temos uma fonte aqui chamada Playfair Display
variable font dot TTF É disso que precisamos. Agora, vamos ao desktop, aos projetos do
Putter,
e você encontrará seu
aplicativo gerador de código aleatório aqui. Vamos abrir isso. Agora, aqui, vamos
criar uma pasta chamada assets e dentro dela, precisamos criar
outra pasta. Chamaremos isso de fontes
e, dentro disso,
moveremos nossa fonte. Agora, esse nome é
bem complicado. Então, vou renomear
isso como Playfair Display. Agora, verifique se a extensão é verdadeira do tipo um. Isso é TTF. Agora, uma vez feito isso, vamos
fechar a pasta de download. Agora, em pupspec dot AML, vamos rolar para baixo até flutter E aqui, adicionaremos nossos ativos. E dentro dos ativos,
vamos adicionar fontes de
ativos. Digamos que sim. Feito isso, se você
rolar um pouco mais para baixo, verá que há um
guia sobre como usar fontes. Aqui vamos
seguir esse guia. Tudo o que precisamos fazer aqui
é primeiro ligar para Fawns e, dentro disso, adicionar o nome da família Aqui vou definir
o nome da família como Playfair Display E então Winter
definiu as fontes. Então, vamos dizer fontes, e a fonte está dentro dos ativos. E a pasta é a
pasta Assets chamada funs. E dentro dessas fontes, temos o nome da fonte. Então, se você abrir os ativos, verá
que esse é o nome. Então, vou
renomear isso, copiar e colar
aqui. Guarde isso. Agora, para usar essa fonte, usaremos
esse nome de família. Bom trabalho. Temos
nosso projeto pronto. Nossa dependência está instalada
e a configuração da fonte personalizada Na próxima lição,
configuraremos nosso arquivo principal para ativar o modo
escuro e o
modo claro usando o provedor.
3. 03 Configurando o arquivo principal e o provedor: Tudo bem Agora vamos
até o dardo principal de pontos, vamos esclarecer tudo o
que temos aqui Nesta lição,
configuraremos nossas funções principais, widget Let's de estado
criativo e habilitaremos o suporte ao tema escuro usando provedor. Vamos seguir
em frente e fazer isso. Então, diremos Import, package, flutter, material dot dart,
eu direi Import, eu direi Import Então, esse é o provedor de pacotes. Em seguida, diremos void main
e, dentro disso, diremos Run e, em seguida,
precisamos chamar o provedor do
notificador de alterações Então, esse
será o provedor deles. E então precisamos
chamar o filho que é o gerador de código aleatório
const Guarde isso. Agora precisamos escrever
a classe para
o provedor do tema. Eu direi que a classe deles é
estendida pelo provedor, pelo notificador de alterações. Vamos chamar de lingote, está escuro. Vou definir isso
como Falls por padrão. Então vamos chamá-lo de getter, ou
seja, boll get, é escuro Vou definir
isso como escuro. Em seguida, escreveremos o método
toggle que é o tema void E então, dentro disso,
diremos que é escuro, é igual a não é escuro. Em seguida, notificaremos os
ouvintes e salvaremos isso. Em seguida, precisamos criar o widget lates dos
geradores de código aleatório Diremos que a classe
Random code generator estende o widget stateless e dentro disso,
diremos const, gerador de código
aleatório, chave
super dt Então vamos dizer, build, aqui precisamos criar a variável para
o provedor
do tema, seja, o provedor é provedor do provedor. Guarde isso. E então
precisamos retornar um material p. Agora, dentro do material
p, precisamos de um título. Chamaremos o título de arador
de código aleatório. E vamos desativar
o banner de depuração. Definiremos os dados do tema
para usar o material três e, em
seguida, definiremos o esquema de cores para
escolher a semente, que
é a
cor azul, ou definir o brilho como brilho, ponto de luz. Agora, para habilitar o tema do cachorro, basta copiar o
tema escuro e colá-lo. Agora, desta vez,
será agora que precisamos
habilitar o modo de tema. Vamos verificar se o provedor
está escuro. Nós vamos dizer? O modo ponto escuro
ou o modo ponto. Então vamos ligar para a
casa desse elenco. Vamos chamar isso de tela inicial. Vamos guardar isso. Perfeito. Agora temos nossa configuração
básica pronta. O projeto
já pode alternar entre temas
claros e escuros quando é chamado com
um botão de alternância Na próxima lição,
começaremos a criar a tela inicial do nosso gerador de código
aleatório, e é aí que a
diversão realmente começa porque você finalmente
verá as coisas
ganharem vida na tela.
4. 04 Criando a tela inicial e configurando citações: Tudo bem Agora vamos
começar a criar a tela principal do nosso
aplicativo, a tela inicial. Para isso, vamos
entrar na lib e criaremos uma pasta aqui Vamos chamar isso de
telas e, dentro disso, vou chamar isso
de ponto da tela inicial. E então, dentro disso,
diremos importar, empacotar, vibrar
material, ponto ponto Digamos que a
tela inicial da turma se estenda, fique cheia com ela. Em seguida, diremos const, tela
inicial, tecla superdt Então diremos
Tudo bem, crie um estado. E então vamos
pegar essa
tela inicial e aplicá-la aqui. Em seguida, vamos criar
um estado privado que é sublinhado
na tela inicial, estado Vamos soletrar isso.
Vamos apenas copiar isso. Se class, estado da tela inicial, estende o estado, que
é a tela inicial. Em seguida, diremos: “
Tudo bem, construa e escreveremos
o provedor do tema. Eu vou dizer que o provedor dot off. E aqui, eu vou dizer que
eles são fornecedores. Agora, aqui, teremos que
devolver o andaime. Guarde isso. Agora
vamos ao arquivo principal. Vamos importar as telas do gerador de código
aleatório do nosso pacote
e, em seguida, a tela inicial. Guarde isso. Vamos para
nossa tela inicial agora. Incrível. Agora, antes de começarmos a
codificar a lógica real, precisaremos de uma lista de códigos Nosso aplicativo examinará esses
códigos aleatoriamente e exibirá um
sempre que tocarmos em um botão Poderíamos
pesquisar códigos manualmente, mas isso vai
levar uma eternidade. Então, em vez disso, vamos usar a
IA para tornar isso mais
rápido e divertido. Para isso, vamos
ao nosso navegador. E então vá para d.ai. É uma ferramenta leve
para geração rápida de texto. Então, aqui vamos
escrever um prompt. Vou digitar,
quero que você gere uma lista de dez códigos nesse formato. Aqui vou digitar a lista final, que é uma string. E aqui vamos dizer códigos. E dentro disso,
listaremos nossos códigos. Esse é o código um, código dois. Em seguida, codifique três. Vamos até Endo. Isso
fornecerá instantaneamente uma lista de pontos limpa de dez códigos que você pode copiar e colar
diretamente
em seu projeto. Agora vamos
copiar isso. Vamos ao seu projeto. E logo após o estado, vamos apenas
colá-lo. Guarde isso. Você pode ver que há
alguns pequenos erros. Queremos escapar disso. Não temos mais erros.
Vamos guardar isso. O andaime é um lugar onde
exibiremos esses códigos Na próxima lição,
escreveremos a lógica real que escolherá e exibirá aleatoriamente um novo código toda vez
que você clicar em um botão É aí que a
verdadeira magia começa.
5. 05 Como escrever a lógica para citações aleatórias: Ok, é hora da lógica. Nesta lição, faremos nosso aplicativo realmente faça alguma coisa
escrevendo o código
que
exibirá aleatoriamente um novo código toda
vez que você tocar no botão Primeiro, precisamos mostrar
algo na tela antes que qualquer
código seja gerado, como uma mensagem de boas-vindas ou uma dica
gentil para o usuário Vamos definir isso dentro nosso estado de sublinhado na tela
inicial Então, logo após
esses códigos aleatórios, vou digitar uma string. Chamaremos isso de código atual. E vamos configurar isso para, toque
no botão para se inspirar. Vou guardar isso. Essa será a mensagem padrão que
aparecerá quando o aplicativo for iniciado. Agora, escreveremos uma
função que escolhe um código aleatório da nossa lista e o exibe na tela Então, para isso, aqui
vamos dizer vazio. Deixe-me rolar
isso um pouco. Digamos que mostre um código aleatório. E aqui escrevemos agora uma
variável chamada aleatória e usaremos o
método aleatório da matemática de pontos. Criaremos outra variável. Chamaremos isso de índice. Então esse será o
número aleatório que
vamos escolher. Então, isso virá
do próximo INT aleatório, e aqui precisamos
definir o limite máximo. Então, esse
será o comprimento dos pontos dos códigos. E agora vamos salvar isso. Então, aqui está o que está acontecendo. Criamos um objeto aleatório e,
em seguida, geramos um número de índice
aleatório com base no tamanho
da nossa lista de códigos. Isso nos dá uma posição aleatória na lista
em qualquer lugar de 0 a 9, já que temos dez códigos Agora, para realmente exibir
o código na tela, atualizaremos nossa variável de
código atual e chamaremos o estado definido para reconstruir
o widget com um novo Para isso, tudo o que precisamos fazer
é escrever em um estado definido e diremos que
o código atual é código e definiremos um índice, que será o número aleatório. Perfeito. Agora, toda vez
que chamamos Mostrar código aleatório, Flutter
seleciona aleatoriamente um código da lista e, em seguida,
atualiza o código atual e
atualiza a interface do
usuário Incrível. Na próxima lição, daremos
vida a essa lógica projetando a interface do usuário. Exibiremos o
código atual lindamente
na tela e adicionaremos um
botão que acionará É aí que seu gerador de código
aleatório realmente
começará a
parecer um aplicativo.
6. 06 Como criar a interface do usuário para o aplicativo Random Quote: Tudo bem. Agora é hora de reunir
tudo e
fazer com que nosso aplicativo pareça vivo. Nesta lição, projetaremos a interface
do usuário ou a interface do para nosso gerador de código aleatório e atribuiremos as funções
que criamos. Antes de começarmos a programar, vamos executar o aplicativo Vou executar
isso no Windows, mas você pode escolher
sua própria plataforma. Tudo bem, vamos prosseguir
e organizar isso adequadamente. E eu vou
colocar isso assim. Ok, então
vamos fechar este e ir para a nossa tela inicial. Vamos fechar isso. Tudo bem, então dentro do andaime, começaremos a escrever nossos Então, a primeira coisa que
precisamos é do aplicativo. Então, vamos dizer título, digamos const, eu digo widget de texto E aqui, vou
chamar isso código
aleatório, então
podemos adicionar o corpo aqui. Na verdade, primeiro,
precisaremos botão de alternância para
o modo
escuro e o modo claro Então, esse será
o botão do ícone
e, quando pressionado, levará o provedor e
procurará ativá-lo E então, dentro do
ícone, diremos ícone. Em seguida, procuraremos por eles, o
provedor dotes dark. Vamos dizer ícone Dot. Modo claro ou ícones, modo
escuro. Vamos guardar isso. E precisamos nos livrar desse
para alinhá-lo corretamente. Certo. Então, após o appr, vamos adicionar
o corpo aqui Vou definir o
preenchimento para isso. E o preenchimento
será de 25 pixels. Agora, antes disso, vamos
conferir este. Portanto, o modo claro
e o modo escuro funcionam. E agora, dentro do corpo, depois do acolchoamento,
vamos adicionar uma criança Vamos chamar isso de coluna. E dentro dessa coluna,
adicionaremos filhos. E primeiro, vamos adicionar um
widget de texto que diz apenas olá. Então você pode ver que
vem aqui, então precisamos alinhar
isso ao centro Então, depois dessa coluna, vamos dizer alinhamento do acesso
principal, alinhamento do acesso
principal no centro do
ponto. Ok, então isso vem aqui. E como vem aqui, precisamos alinhar
tudo ao centro Então, vou refatorar
isso para o centro. Pronto, isso é melhor.
Então, depois do texto, vamos adicionar uma caixa de tamanho com a altura de 25 pixels
e, em seguida, um botão elevado, que, por enquanto, podemos
deixar em branco, e aqui,
podemos adicionar um widget de
texto const que
diz get inspire Eu vou dizer isso. Então
agora você pode ver se a gente consegue se
inspirar lá. Agora, para o texto, o que podemos fazer é,
em vez de apenas olá, exibir nosso código atual. Esse seria o código atual. Se eu não salvar, você
pode ver que diz: toque no botão para se inspirar. Agora, se eu tocar nesse botão, nada acontecerá
ainda porque
não atribuímos esse
botão a uma função, então vamos atribuir isso. Aqui, essa função
mostrará um código aleatório, exceto aquele. Agora, se eu clicar nisso, você pode ver que toda
vez que eu clico nele, um novo código aleatório aparece. Mas isso parece muito básico. Queremos que isso seja estilo. É aqui que entram nossas fontes personalizadas
do Google, a fonte personalizada que adicionamos. Agora, o que podemos fazer aqui é
fazer com que funcione,
podemos dar vírgula Digamos linha de texto, digamos linha de texto, o centro para
que ela possa ficar no centro. Agora podemos dar um
estilo, digamos, estilo de texto. E dentro do tecido, podemos dizer família de fontes E lembre-se da
família de fontes que fornecemos. Caso contrário, você pode voltar
aqui e verificar isso. Essa é a família de fontes
que atribuímos. Vamos copiar isso,
vamos voltar para nossa tela inicial e
vamos colar aqui. Agora você pode ver que a fonte
personalizada foi aplicada. Parece bom, mas a fonte
precisa ser muito maior. Então, o que podemos fazer aqui
é dizer o tamanho da fonte. Vou definir o tamanho da
fonte para 40. Então, agora parece muito melhor. Então, talvez 30. Sim, 30 é bom. E agora, se eu clicar aqui, você pode ver que toda
vez que eu clico nela, obtemos uma nova fonte que é muito estilizada e parece muito boa E pode voltar
ao tema escuro, e você pode ver como isso parece. Mas a cor da
fonte aqui é branca, então podemos mudar a cor também. Para isso, o que
podemos fazer aqui é dizer vírgula, cor e usar a cor do tema Então esse é o tema de off. Esquema de cores de pontos, ponto primário. Então, isso vai pegar a cor
primária do nosso aplicativo, que é azul, e
vai mostrar isso. Se eu voltar para
o modo claro, você pode ver que ele ainda parece
na cor primária do
nosso esquema de cores. Tudo bem, vamos analisar rapidamente o que
está acontecendo aqui Então, primeiro, temos essa barra de aplicativos. AppR exibe o código aleatório do
título e adiciona um
botão de alternância de tema no canto superior direito E quando está com guias, é
chamado de tema de alternância de
pontos fornecido pelo tema para alternar entre o modo escuro
e o modo claro Então temos o corpo, então esse é o
corpo inteiro aqui. Conte aqui. O corpo inteiro aqui é
enrolado com um acolchoamento e uma centrífuga para manter tudo bem Então, dentro disso,
temos uma coluna. coluna
centraliza verticalmente nosso conteúdo o texto do código
e o botão Em seguida, temos
um widget de texto. O widget de texto exibe
o código atual usando a fonte personalizada Playfat display
em um tamanho grande e elegante A cor se adapta automaticamente
ao tema atual. Então, finalmente, temos
um botão elevado. E quando você toca nele, ele chama a função Mostrar código aleatório, escolhendo um código aleatório
da lista e atualizando
o texto instantaneamente Agora, quando executamos esse aplicativo, você deve ver primeiro o texto de
boas-vindas. Então, se eu executar isso, você
verá primeiro o texto de boas-vindas. E quando você clica
no botão inspirado em G, o código é atualizado toda vez
com um novo código aleatório. Agora você também pode tentar
alternar do modo escuro para o modo claro ou do modo claro para o
modo escuro de forma suave e instantânea. E lá vamos nós. Seu aplicativo
de código aleatório agora está pronto. Você acabou de criar um aplicativo de vibração
funcional com fontes personalizadas, troca de
temas e uma divertida lista de códigos gerada por
IA
7. 07 Recapitulação e projeto do curso: Tudo bem, nós conseguimos.
Você acabou de criar seu próprio aplicativo
gerador de código aleatório no flutter Vamos fazer uma rápida recapitulação de tudo o que
aprendemos nesta aula Você aprendeu a criar um novo projeto de flutter
do Você adicionou dependências, como provedor, para gerenciar a troca
delas. Você finalmente
entendeu como adicionar fontes
personalizadas e tornar
seu aplicativo realmente seu. Você criou um
provedor de temas para alternar entre os
modos claro e escuro dinamicamente. Você criou uma
tela inicial com uma lista de códigos gerados pela IA. Você escreveu uma lógica para escolher um código aleatório cada vez que o
usuário toca no botão E, finalmente, você
projetou uma interface de usuário limpa e
elegante usando
sua fonte personalizada e um design responsivo Esse é um aplicativo totalmente funcional do início ao fim,
tudo em uma única classe. Para o seu projeto de classe, quero que você pegue este aplicativo
e o crie para si mesmo. Aqui estão algumas ideias
para brincar. Adicione seu próprio
conjunto personalizado de códigos. Talvez mude a
cor do texto, altere o esquema de cores ou estilo
da fonte para combinar com
seu gosto pessoal. Adicione categorias como motivação, amor, vida e sabedoria. Quando terminar, faça o upload de
uma captura de tela rápida ou um pequeno vídeo do seu aplicativo final na seção do projeto da
turma Vou dar uma olhada
e deixar um feedback. Se você chegou até aqui, estou muito orgulhosa de você. Cada linha de código que você escreveu
criou não apenas um aplicativo, mas sua confiança como desenvolvedor
de flutter De agora em diante, continue experimentando, construindo e não se esqueça Cada projeto que você conclui
o torna mais forte. Obrigado por participar da minha aula. E, confie em mim, o próximo
será ainda mais divertido. Te vejo na próxima aula.
Flutter Sensei, Teaching Flutter from Scratch
