Transcrições
1. O que você vai aprender e construir: Oi, todo mundo. Bem-vindo.
Meu nome é Flutter Sense e, nesta aula,
vamos
criar um aplicativo simples de galeria de imagens em Este projeto é perfeito para iniciantes que
desejam praticar layouts, navegação, recursos e temas de uma
só vez Ao final desta aula, você saberá como criar um novo projeto de flutter e
estruturá-lo adequadamente Adicione e gerencie ativos de imagem
locais, exiba imagens em um layout de grade
responsivo, navegue até um visualizador de
imagens em tela cheia na guia, use a
animação flutters hero para criar transições
suaves e alternar temas,
como modo escuro
e modo claro Esta aula é curta, para iniciantes e
totalmente focada em projetos Não é uma teoria longa, apenas uma construção. Quanto ao seu projeto de classe, sua tarefa é adicionar seu próprio
conjunto de imagens ao aplicativo. Exiba em uma grade de galeria, teste
sempre a tela cheia e o tema Togo e compartilhe uma captura de tela ou uma gravação rápida de tela
do seu aplicativo final Você também pode adicionar seu próprio
toque, como cores diferentes, tamanhos de
grade, cantos arredondados ou animações que o
tornem Vamos criar suas
galerias de imagens passo a passo. Então, o que você está
esperando? Vamos começar.
2. Configure a mudança de temas: Tudo bem. Vamos começar a
construir nosso projeto. Vamos para o nosso terminal. Vamos navegar até o desktop e navegar dentro de
nossos projetos de flutter. Aqui, criaremos um novo projeto de
flutter, flutter, criaremos uma galeria simples Agora vamos navegar por dentro disso. Essa é uma galeria simples de CDs, e vamos abri-la em código. Agora, vamos fechar nosso terminal. Vamos expandir nosso código. Antes de escrever qualquer interface de usuário, queremos que a
mudança de tema faça parte do nosso aplicativo de galeria. Para isso, usaremos
o pacote Provider. Abra seu YAML de pontos do Pubspec,
role para baixo até dependências, aqui adicionaremos o Provider Guarde isso. Feito isso,
vamos fechar isso. Vamos abrir a pasta labial, dardo
principal, e vamos livrar de tudo o
que temos aqui Vamos começar a escrever
tudo do zero. Agora, em primeiro lugar, vamos importar o
pacote, o material flutuante. Em seguida, importaremos o provedor de
pacotes. Em seguida, escreveremos nosso aplicativo Run principal
vazio. E dentro disso, precisaremos adicionar o provedor do notificador de alterações E este, vamos
definir isso para o provedor. Em seguida, adicionaremos uma criança para isso. Essa é a galeria mais simples. Em primeiro lugar, vamos
criar o provedor do tema. É aula. O
provedor estende, muda o notificador, e
vamos colocar um ouro aqui, chame isso de as is dark Vou definir isso
por padrão como false. Então vamos criar
um getter, G é escuro. Vou atribuir
isso a is dark. Em seguida, criaremos
uma função de alternância. Vamos chamar isso de tema de alternância. E então diremos que Es dark não
é igual a East dark. Então, basicamente,
isso vai alternar. Em seguida, notificaremos os ouvintes. Então, uma vez feito isso, a
próxima coisa que precisamos
fazer é criar nosso aplicativo de galeria
simples. Então, aqui, diremos que a classe, uma galeria simples, estende a rigidez
sem estado E dentro disso, queremos
dizer const, galeria simples. Super dot K. Então diremos, tudo bem, construa, e é
aqui que teremos que
criar nossa variável Então, diremos por último
que o provedor, que é o ponto fornecedor
do provedor do tema. OK. Em seguida, adicionaremos
o aplicativo de devolução de material. E dentro desse
aplicativo de material, diremos título. Vou chamar isso
de galeria simples. Vou remover o banner
da Debe. Em seguida, criaremos nosso
tema que é dados do tema. Então, usar o material três é verdadeiro, e então vamos escolher o esquema de cores a partir da semente. A cor é azul pontilhada e o brilho será claro. Faremos a mesma coisa com
o tema escuro. Então, tudo o que temos que fazer
agora é o tema escuro, copiar
tudo isso, paginá-lo aqui. E o que podemos fazer
agora é mudar isso para escuro. E agora precisamos
adicionar o modo de tema. Esse é o
provedor de temas dot is dark. Vamos mudar
o modo do tema para escuro ou o modo do tema para claro. Agora vamos ligar para casa, digamos home const, vou
chamar isso de tela inicial Vamos salvar isso e pronto. Nosso projeto básico agora está pronto. O provedor está configurado, a troca de
equipe é conectada e o aplicativo é direcionado
para a tela inicial Na próxima lição,
criaremos uma tela inicial onde a interface da
galeria realmente ficará.
3. Criando a tela inicial, ativos de imagens, alternância de temas: Agora que nossa
configuração principal está concluída, vamos criar nossa tela inicial. Dentro da pasta lip, vamos criar uma pasta
chamada screens. E dentro disso,
criaremos um novo arquivo. Vou chamar isso de home
underscore screen dot dot. E aqui, vamos
transmitir package,
flutter, material dot dot e vamos criar Então você pode dizer que estende o widget completo
do estado. Vai ser const, tela
inicial, tecla super doot Então podemos dizer em
ou criar um estado. Esta é a tela inicial que permanece. Vamos nos livrar
de todas essas coisas aqui. Sublinha o estado da tela inicial. E eu vou criar essa função
privada. Eu vou dizer classe, o
estado da tela inicial estende o estado, que é a tela inicial. Aqui vamos dizer, tudo bem, construa, e agora
podemos devolver um andaime Agora, aqui, precisamos criar essa variável para
eles trocarem. Diremos o fornecedor final do tema. Eu configurei isso para o ponto do provedor. Contexto, e eu vou
pegar o provedor do tema aqui. Tudo bem, agora vamos
voltar ao principal e importar
nossa tela inicial. É pacote, galeria simples, telas, tela inicial. Guarde isso. E agora vamos executar o aplicativo. Ótimo. Tudo
está conectado e agora estamos vendo uma
tela em branco sem erros Então, vamos
alinhar isso corretamente. E vamos fazer isso assim.
Vamos derrubar essa. Agora, antes de construirmos
a galeria UY, precisamos de algumas imagens para exibir Você pode baixar
imagens gratuitas em pixels.com ou usar suas próprias Por enquanto, vou
usar pixels.com. Então, vamos ao navegador. E vamos ao pixels.com. E a partir daqui, vou
procurar a natureza. E vamos encontrar algumas imagens
muito boas. Vou adicionar dez imagens. Isso é um, dois,
três, quatro, cinco, seis, sete, oito, nove e dez. Então, vamos fazer o
download desta imagem de download. Vou guardar isso em projetos
mais livres. Da mesma forma que na galeria,
vou criar uma pasta aqui chamada assets. Dentro dessa pasta,
vou criar outra pasta chamada imagens. E aqui vamos salvar
isso como Foto 1. OK. Então, agora vamos salvar
essa segunda imagem. Vou salvar
isso como Foto dois. E, finalmente, foto dez. Agora, o trabalho do navegador está concluído, vou fechá-lo. Agora, se você abrir a pasta do
projeto aqui, poderá ver que temos ativos e,
dentro dessa pasta de imagens, temos dez imagens aparecendo. Agora, vá para sua
AML de pontos popspec e ela pode rolar para
baixo até flutuar E aqui, a primeira
coisa que precisamos fazer é adicionar ativos. E dentro dos ativos, adicionaremos ativos
e, em seguida, adicionaremos a pasta de
imagens. Guarde isso. Então, agora as imagens são adicionadas oficialmente ao
seu flutter wrap. Feito isso,
deixe-me mover isso para cá. Agora, feito isso, você pode voltar para a
tela inicial. E agora vamos
adicionar a barra de aplicativos ao nosso andaime Então, aqui, vou
chamar isso de appr appr. Vou adicionar um título aqui
com uma const chamada text. E aqui vamos chamar
isso de galeria simples. Em seguida, vou adicionar algumas
ações com um botão de ícone. Quando pressionado, queremos que o provedor do
tema ative esse E para ícones,
usaremos um ícone e
verificaremos se o fornecedor está escuro. Então, vamos dizer que está escuro vamos dizer
ícones, ponto, modo claro. Caso contrário, vamos dizer
ícones, pontos, modo escuro. Vamos evitar que
você veja a barra de aplicativos com
o tema de alternância funcionando Isso nos dá uma barra superior limpa com os modos claro
e escuro funcionando. Perfeito. Agora temos
a tela inicial. Nossa pasta de ativos está configurada e podemos alternar temas
diretamente da interface do usuário Na próxima lição,
começaremos a exibir imagens reais em nossa grade.
4. Criando tela de detalhes e lista de imagens: Agora é hora de trazer
nossas imagens para o aplicativo. Usaremos duas telas, uma tela que mostra
a grade de imagens, uma tela que exibe uma
única imagem em exibição completa. Para criar a visualização detalhada, vamos começar com
a segunda tela. Agora, dentro da pasta Screens, vamos
criar um novo arquivo. Vou chamar isso de tela de detalhes com ponto escuro.
Vamos derrubar isso. E aqui, vou dizer importação, embalagem, vibração, ponto de
material E aqui, vou
dizer classe, tela de detalhes,
digamos, estende stateless, widget E dentro disso,
diremos const, tela de detalhes. Super dot K. Então
diremos: Tudo bem, construa. Eu vou me livrar de
todas essas coisas aqui. Digamos que devolva o andaime. Vamos fechar esse terminal aqui. E dentro do andaime, vamos dizer
appr com um appr,
digamos título, const, o
texto que diz foto a. Vamos salvar isso. vamos dizer
appr com um appr,
digamos título, const, o
texto que diz foto a. Vamos salvar isso.
E
então adicionaremos um corpo. Isso terá um jato central, e isso terá uma
criança chamada herói. Agora, você pode ver
aqui, o heroiget
absorve duas coisas:
a etiqueta e uma criança Então, precisamos dessas duas coisas. A primeira coisa, o que
vamos fazer é adicionar uma variável aqui. Chamaremos isso de sequência final. Caminho da imagem. E então precisamos
ligar para cá. Então, diremos que é necessário esse caminho de imagem de
pontos. Guarde isso. Agora, no herói, vamos pegar essa tag e dizer que o caminho
da imagem será uma imagem, um ativo de
pontos desse caminho da imagem. Então guarde isso. Então, essa será
nossa tela de detalhes. Então, vamos fechar isso. E agora vamos voltar para nossa tela
inicial aqui. E então vamos
importar essa tela de detalhes. Eu vou dizer pacote,
galeria simples, telas, tela de detalhes. E dentro do estado aqui, vamos adicionar uma lista final, que será uma string. E o nome disso
será imagens. E ele conterá
as imagens que realmente
baixamos do pixels.com Então, isso está dentro dos ativos. Imagens, JPG de 41 pontos, certo? Então, vamos duplicar
isso dez vezes. Isso é um, dois, três, quatro, cinco, seis, sete,
oito, nove, dez. Então,
haverá dois e depois dez. Vamos guardar isso. Agora, o aplicativo sabe onde as
imagens estão localizadas e a tela de detalhes
está pronta para mostrá-las. Perfeito. Agora nossa tela de
detalhes existe. Nossa lista de imagens está pronta e importamos
tudo o que precisamos. Na próxima lição,
exibiremos essas imagens dentro de
uma grade
na tela inicial e tornaremos
cada imagem clicável para que
ela seja aberta em uma trama na tela inicial e tornaremos completa
5. Como exibir imagens em grade: Agora é hora de mostrar nossas imagens no aplicativo usando uma
grade Wave dot Builder. No ponto de
pontos da tela inicial dentro do corpo que está aqui, adicionaremos um Grid
Wave dot Builder. Você pode ver que
envolve muitas coisas. A primeira coisa
que
precisaremos é o comprimento da grade. Então, aqui vamos dizer que a
contagem de itens é o comprimento dos pontos das imagens. Agora, o que você
precisa lembrar é que Grid Wave dot Builder funciona exatamente como o
List Wave dot Builder, exceto que ele organiza os itens em uma grade em vez
de uma lista vertical Agora que
temos a contagem de itens, precisamos de um delegado da grade para
definir a aparência da grade Então, aqui no delegado da grade, segure a barra de controle e espaço, e você encontrará isso Este é um delegado de grade prateada
com contagem fixa de eixos cruzados. Isso é um dente muito grande. S, mas você verá
como isso funciona. Então, a primeira coisa é que
temos a contagem de eixos cruzados. Eu defini a contagem do eixo cruzado
para quatro e vamos salvar isso. E então precisamos
basicamente mostrar quatro
grades, como as quatro colunas. E agora precisamos do espaçamento
entre essas colunas. Então, se você pressionar Controle
e espaço, mas novamente, verá que
há dois espaçamentos. Um é o espaçamento entre eixos cruzados e há o espaçamento entre eixos principais Vamos adicionar o eixo cruzado um e defini-lo como 12. E agora vamos adicionar
o próximo que é o eixo principal.
Vou definir isso para dois. Agora, dentro do criador de itens, obtemos cada imagem para
torná-la tocável Para fazer isso, vamos
remover isso e segurar Controle e espaço Você verá que
obtemos o índice de contexto Então, vamos abrir essa
e, dentro dela, criamos uma variável
chamada imagem. Caminho. Agora, se você se lembra, criamos isso
na tela de detalhes. Isso foi para a tela de detalhes. Agora, isso é para a rede. Então, aqui vamos
obter as imagens
e, em seguida,
obteremos o índice delas. A próxima coisa é que vamos
devolver um detector de gestos Isso é para a parte de rosqueamento. Então, aqui dentro do On Tap, o que queremos fazer é pressionar isso
para que ele possa
ir para a tela de detalhes. Digamos navigator dot push, e a rota aqui será
a rota da página de material e o construtor
será a tela de detalhes Agora, como você pode ver,
ele já percorreu o caminho da imagem porque
fornecemos a variável aqui. A próxima coisa é que precisamos
exibir essas imagens. Então, depois disso,
vamos dizer criança, e vamos adicionar um herói. Agora lembre-se, o que vem dentro
da tag, o caminho da imagem. E para a criança, diremos ácido do ponto
da imagem é o caminho da imagem. Vou guardar isso. Agora você pode ver todas as
imagens que usamos. Além disso, você pode ver que,
na verdade, está indo até a borda Precisamos dar um
pouco de preenchimento aqui Aqui, para o corpo dentro
do Grid wave Builder, adicionaremos um preenchimento
com 16 pixels Então, isso vai dar um
pouco de preenchimento. Agora, essas imagens são desiguais, mas primeiro vamos ver se funciona Se eu tocar nisso, você pode ver
que sempre abre na foto. Se eu tocar na segunda imagem, ela também se abre sempre
na foto. A funcionalidade está funcionando, mas as imagens são irregulares,
então precisamos corrigir isso Agora, para fazer isso, essas imagens estão
na verdade sendo carregadas da
criança, que está aqui. O que podemos fazer é
cortar tudo isso. Então podemos dizer
clipe ou retângulo, e isso terá um filho, e vamos colar
esse herói aqui Agora, esse clipe ou retângulo
tem um raio de borda. Vou definir
o raio
da borda circular, que está aqui Vou definir
este para 12, exceto isso. E você verá que
nada realmente aconteceu. Isso porque precisamos
encaixar isso dentro desse máximo. Então, logo após essa imagem aqui, vamos dizer fit, e então vamos dizer
box fit dot cover. Guarde isso. Agora você verá que todas as imagens cabem
dentro dessa caixa retangular Agora, o espaçamento parece
bem próximo um do outro. Então é aí que entra
essa parte. Então, podemos definir isso para 16, 16, salvar isso, e você
verá o espaçamento aumentar. Agora, se eu tocar neste, ele se abre em um visualizador de fotos. Se eu abrir este, isso também abrirá
aquele no Visualizador de fotos.
E é isso. Agora estamos exibindo as
imagens em uma grade limpa. Cada imagem é aberta em tela cheia com uma animação
suave do herói. A grade é acolchoada,
espaçada uniformemente e parece polida. E a melhor parte, a troca de
tema funciona.
6. Recapitulação e projeto do curso: Chegamos ao final
do nosso mini projeto. Vamos recapitular um momento para recapitular tudo o que
criamos nesta aula Criamos um
novo projeto flutter, adicionamos o pacote de provedores
para gerenciamento deles, criamos um provedor de temas para
alternar entre Light e Dog, conectamos tudo
dentro do ponto principal ao provedor do notificador de alterações,
criamos uma
estrutura de projeto limpa e telas separadas, criamos uma
estrutura de projeto limpa e telas separadas, adicionamos ativos ao
pubspec dot YAML adicionamos o pacote de provedores
para gerenciamento deles,
criamos um provedor de temas para
alternar entre Light e Dog,
conectamos tudo
dentro do ponto principal ao provedor do
notificador de alterações,
criamos uma
estrutura de projeto limpa e telas separadas,
adicionamos ativos ao
pubspec dot YAML e carregamos imagens no aplicativo. Crie uma visualização em grade responsiva para
exibir fotos, adicionou detecção de abas e navegação em uma tela de detalhes em
tela cheia, implementou uma animação suave de
herói estilizou cada item usando clipes ou espaçamento e preenchimento reduzidos No final, tínhamos uma galeria de
imagens simples e totalmente funcional, com troca de imagens e visualização em
tela cheia. Agora é a sua vez. Escolha seu próprio conjunto de imagens, adicione-as à sua pasta de ativos, exiba-as na galeria, compartilhe a captura de tela ou uma pequena
gravação de tela do seu aplicativo Faça o upload do resultado final
para a seção do projeto. Eu adoraria ver
o resultado da sua galeria. Cada versão terá uma aparência única, dependendo
das imagens que você escolher. Obrigado por
participar desta aula. Nos vemos
na próxima, onde construiremos algo
ainda mais empolgante.
Flutter Sensei, Teaching Flutter from Scratch
