Transcrições
1. O que você vai aprender e o que você vai construir: Oi, aí. Eu sou Flutter Sense. E nesta aula,
vamos usar algo super divertido
e incrivelmente útil, um
layout completo de flutter do Sem configuração complicada,
sem teoria avassaladora, apenas
etapas práticas claras que
farão você se apaixonar pela
criação de belas interfaces Nesta aula, você aprenderá como configurar seu
projeto mais plano da maneira certa,
como usar preenchimento, linhas e colunas para estruturar
seu layout como um profissional, como usar o expandido para um como usar o expandido para design
responsivo que se
ajusta Como criar widgets modulares reutilizáveis,
como um painel c, como adicionar uma área de conteúdo na barra de navegação inferior para
dar ao layout
uma sensação real Por fim, como transformar
toda a interface do usuário em um adaptador para eles. Ele muda de cor dinamicamente
com um único galho. Ao final desta aula, você terá construído totalmente um layout de painel de
flutter totalmente funcional Você pode personalizar para qualquer portfólio de
ideias painéis, painéis de
administração,
ferramentas pessoais, tudo o que quiser Seu projeto de classe será
criar sua própria versão
desse layout, escolher seu próprio tema de cores, substituir o ícone e o
texto para torná-lo único. Compartilhe uma captura de tela
ou gravação
de tela do seu painel final na seção
do projeto da turma Não se preocupe se
você for iniciante. Vou guiá-lo passo a passo,
como um sensor real deveria. Pegue seu codificador,
estique os dedos. Vamos construir algo
lindo juntos. Nos vemos na
primeira aula. O que você está
esperando? Vamos começar.
2. Como criar o projeto de prática do layout: Tudo bem. Vamos começar. A primeira coisa que precisamos fazer é criar um novo projeto de vibração. Vamos abrir nosso terminal e navegar até a pasta em que você deseja
criar seu projeto. Vou navegar até
minha área de trabalho e, dentro dela,
tenho projetos de vibração Dentro disso, você pode
criar seu projeto agora. Flutter, criar, planejar,
praticar. Isso gerará um
novo projeto de inundação para nós. Em seguida, vamos abrir o projeto
no código VS digitando CD, Layout Practice code dot Agora que está aberto, vamos
fechar o terminal. Agora, no código VS, vamos para a pasta lip
e, em seguida, abriremos o dardo principal de pontos Você verá vários códigos
padrão lá dentro. Vamos limpar tudo
e começar do zero. Agradável. Agora temos uma tela
limpa. Vamos configurar a estrutura
básica. Começaremos com import,
package, flutter,
material dot Então vamos
dizer vazio, principal. Então, podemos dizer run,
const, layout Practice. Em seguida, criaremos nossa aula prática de
layout. Então, dizemos que classe, prática de
layout, estende o widget sem estado E dentro disso, vamos
dizer const, prática de layout Então vamos
dizer chave de super dardo. Vamos todos escrever a compilação. Vou me livrar
de todas as coisas que tenho dentro disso. Então, podemos devolver o material
App. Vamos guardar isso. Tudo bem, agora que temos
nossa estrutura básica, vamos torná-la mais completa
adicionando um título, desativando o banner de depuração e definindo o tema
e a tela inicial Para isso, precisamos
entrar no aplicativo de materiais, e você pode ver que
eu digitei aqui. Isso vai ser L.
Isso é prática de layout. Certifique-se de que seja o
mesmo nome desse. Sim, agora isso é perfeito. Agora podemos dizer título
e definir o título para a prática de layout. Em seguida, podemos definir o banner de
depuração para quedas. Então, podemos usar um tema. Eu vou dizer que são dados. Dentro disso, diremos que
use o material três verdadeiro, então podemos dizer que as sementes do esquema de cores da
semente
adicionam isso às cores TO. Vamos guardar isso. Depois disso, vamos
configurar uma tela inicial. Diga home, diga const, então podemos dizer
layout da tela inicial E lá vamos nós.
Configuramos nossa base flood wrap, adicionamos um tema e declaramos
a tela inicial do layout, que será o cerne
da prática do layout Na próxima lição,
criaremos essa
tela inicial passo a passo.
3. Como criar a tela inicial para layout: Tudo bem Agora que configuramos a base do nosso projeto, é hora de criar
nossa tela inicial. Agora, em vez de escrever
tudo dentro do dot dart principal, vamos criar a
tela inicial em um arquivo separado Por quê? Porque isso nos ajuda a manter
nosso código limpo, organizado e fácil de manter, o que é um hábito muito bom à medida que seu projeto cresce. Vamos fazer isso passo a passo. Dentro da pasta lip aqui, vamos criar uma pasta
chamada screens. E dentro dessa pasta de tela, você
criará um arquivo chamado layout underscore home,
Underscore screen Agora que temos nosso arquivo,
vamos escrever um código. A primeira coisa que precisamos fazer é importar a biblioteca de
materiais flutter Digamos que pacote de importação,
vibração, ponto de material escuro Não precisamos escrever
a função principal ou chamar o Runap aqui novamente. Já fizemos isso no arquivo principal de pontos escuros,
e isso é tudo de que precisamos. Aqui, definiremos apenas a classe da tela inicial do
layout. Para isso, diremos
aula e você pode segurar a barra de controle
e espaço e ver o
tema da classe aparecer aqui. Agora você pode dizer aqui extends stateless, que dentro disso, vamos dizer CST,
layout home screen, então podemos dizer
super dot K. Aqui vamos sobrescrever o método build. Vamos nos livrar
dessas coisas e depois devolveremos um andaime Vamos guardar isso. Veja como
usamos o andaime diretamente Isso porque o
aplicativo de materiais já
está incluído
no arquivo de dardo principal Não precisamos ligar para o aplicativo de
material duas vezes. O andaime aqui age como
o corpo da tela,
enquanto o aplicativo de material
no dardo principal é o recipiente que o segura Em seguida, vamos importar essa tela
em nosso arquivo principal de dardos de pontos para que o swiggi vermelho aqui
desapareça Para fazer isso, você pode ir para
o arquivo dot Tart principal e aqui você pode dizer importação,
pode dizer pacote, e você pode ver o
nome do pacote aqui é prática de layout, e aqui temos telas, e aqui temos o arquivo dot Tt da tela inicial do
layout Aqui você verá que o sublinhado
vermelho sumiu. Como já
devolvemos o andaime, agora
podemos executar esse
aplicativo e testá-lo Vou executar isso como um aplicativo do Windows, mas você pode usar a
plataforma que preferir. Android, IUS, web ou desktop.
Vamos seguir em frente e executar isso. Vou escolher o Windows, e aí está uma bela tela em branco
limpa. Deixe-me alinhar isso ao lado do
nosso editor de código para que
possamos entender isso facilmente Você pode ver o
layout e o código. Agora vou esconder isso
e vamos fechar isso. Está vazio porque
não adicionamos nada dentro desse andaime,
mas não se preocupe É exatamente isso que vamos desenvolver nas
próximas aulas. Na próxima lição,
começaremos a estruturar o layout dentro
da tela inicial e a dar vida a ele.
4. Entendendo o preenchimento em widgets: Tudo bem. Agora que nosso
aplicativo está instalado e funcionando, comece
a adicionar
um pouco de estrutura a ele introduzindo um aplicativo. Então, vamos para a tela inicial do
layout
e, em sien scam food, aqui, vamos
adicionar um aplicativo Então, vamos dizer aplicativo aplicativo e, aqui, adicionaremos o título e chamaremos o
título de bate-papo por texto, e chamaremos isso
de prática de layout. E então vamos
adicionar uma cor de fundo. Eu vou dizer esquema de
cores ponto a ponto da equipe, ponto primário. Em seguida, adicionaremos a cor do
primeiro plano como esquema de cores de
pontos,
ponto, no Vamos guardar isso. Você deve
ver a barra de aplicativos aqui. Muito simples. Agora é hora de trabalhar no
corpo do nosso layout. Mas antes de
escrevermos mais código, quero que você dê uma
olhada nessa imagem. Quando adicionamos preenchimento, o que acontece é isso Seu conteúdo se move para dentro, criando espaço extra ao redor dele, mas ainda dentro do elemento Pense nisso como se seu conteúdo sentado confortavelmente
dentro de uma almofada macia Vamos entender isso
com um exemplo simples. Vamos voltar ao nosso código. Agora, se eu escrever o corpo
, vamos adicionar um texto que chamaremos isso de hello world. E vamos salvar isso.
Você notará que o texto gruda diretamente
na borda da tela. Isso não é muito bonito,
certo? Mas vamos corrigir isso. Não precisamos excluir
o widget de texto. Em vez disso, podemos simplesmente
clicar com o botão direito do mouse, clicar em Refatorar e escolher
embrulhar com preenchimento. Está vendo isso? Nosso widget de texto agora está encapsulado
dentro do widget de preenchimento. A linha aqui, com
todas as bordas inseridas , adiciona
preenchimento igual em todos os lados, superior, inferior, esquerdo e direito Agora vamos mudar isso para 20. Agora é seguro. E,
digamos que nesta pré-visualização, o texto se desloca
para dentro , deixando um
espaço bem equilibrado ao redor É exatamente assim que o
preenchimento funciona. Ele não move o
recipiente para fora, ele empurra o conteúdo para dentro, fazendo com que tudo pareça mais
estruturado Na próxima lição,
exploraremos linhas e
colunas e veremos como estruturar vários
widgets juntos Mas, por enquanto, basta
brincar com os valores de preenchimento e se
familiarizar com esse conceito Você o usará muito
no froterayout mais tarde.
5. Entendendo linhas e colunas: Tudo bem. Agora que
sabemos como o preenchimento funciona, vamos dar um
passo adiante e
entender as linhas e colunas no flutter Antes de tocarmos no código, quero que você
veja esta imagem. Aqui podemos ver que
temos três cartas
colocadas lado a lado. Isso porque eles
estão dentro de uma fileira e
Row coloca seus filhos
horizontalmente um ao lado Mas observe a carta inferior. Está abaixo da fileira. Isso acontece porque
a linha com suas três cartas verticais
na parte inferior do
cartão é enrolada uma
coluna e
a coluna coloca seus filhos na vertical,
um abaixo do outro Esse é basicamente o superpoder de linhas e colunas em um plano Lembre-se desse layout
horizontal de linhas , layout vertical de
colunas. Vamos testar isso em código. Neste momento, seu corpo se
parece com isso. Temos um preenchimento, e então você tem uma criança e
depois um widget de texto Vamos colocar o
widget de texto em uma coluna. Clique com o botão direito no texto e clique em refatorar Em seguida, você verá o embrulho com a coluna e
basta clicar nele. Isso nos dá filhos
da coluna secundária
e, em seguida, há o widget de texto Agora, se adicionarmos mais widgets
dentro dos filhos, eles aparecerão um
abaixo do outro É assim que a coluna funciona. Mas para esse texto em particular, eu realmente
queria definir em uma linha, para poder colocar outros
elementos ao lado dele mais tarde. Vamos refatorar o texto
e envolvê-lo com uma corda. Aqui, vou clicar com o botão
direito do mouse em refatorar
e, em seguida, dizer
embrulhar com corda Agora, como está dentro da linha, qualquer outra coisa que adicionarmos aqui, nos sentaremos ao lado do
texto horizontalmente Vamos fazer com que o texto pareça um pouco mais bonito, como um título
adequado Então, se eu disser isso, você
verá que nenhuma
mudança acontece aqui. Então, vamos seguir em frente
e estilizar isso. Aqui você pode dizer estilo de vírgula. Então eu vou dizer têxtil, peso da fonte
S. Eu disse, peso da fonte, aquela tigela. Vou guardar isso. Depois disso, vamos salvar
o tamanho da fonte. Vou definir isso para 16. Então você pode dizer que cor é
cor do preto,
e isso é economizar. Agora você pode ver
que o texto está negrito e é assim que parece. Agora, eu acho que isso é muito ousado. Vou mudar
isso para cerca de W 500. Isso vai
torná-lo um pouco mais leve. Agora você pode ver que o
texto realmente aparece em negrito e está pronto para mais
textos para juntá-lo Na próxima lição, adicionaremos outra linha abaixo desta
e, dentro dela, colaremos vários cartões para criar o layout
passo a passo. Linhas e colunas são como
o esqueleto da sua interface de usuário. Depois de entender esses dois, você pode moldar sua
tela da maneira que quiser.
6. Adicionando vários itens em uma linha usando expandido: Tudo bem. Agora que aprendemos como as linhas
e colunas funcionam, é hora de tornar nosso layout
um pouco mais interessante. Vamos adicionar outra
linha dentro da nossa coluna
e, desta vez, colocaremos
vários itens dentro dela. Dentro do seu código, logo
abaixo da primeira linha, que é essa,
vamos adicionar outra linha. Vamos salvá-lo.
Agora, vamos preenchê-lo com alguns widgets de espaço reservado
para ver como ele Por enquanto, vou
usar apenas o widget de texto. Então, dentro da fila, podemos dizer crianças. E então, dentro disso, podemos adicionar widgets de texto Vamos chamar isso de carta um. Cartão dois e cartão
três. Vamos guardar isso. Aqui na pré-visualização,
você pode ver que há três textos
aparecendo lado a lado um ao lado do outro, exatamente como a linha funciona. Mas parece um pouco confuso. Tudo está
agrupado à esquerda e
o
espaçamento não é igual Quero que cada um desses itens ocupe o mesmo
espaço dentro da linha. Para fazer isso, podemos envolver cada widget de texto com algo
chamado widget de expansão O widget de expansão diz
ao filho que se estique e
ocupe todo o espaço
horizontal disponível igualmente Vamos atualizar nosso código.
Vamos ver o texto aqui e deixe-me rolar
um pouco. E ele pode clicar com o botão direito aqui, e diremos refatorar Então, vamos
dizer que a largura do envoltório se expande. Se eu salvar, você pode ver que ocupou muito espaço e fazemos a mesma
coisa com este,
refatorar, expandir a largura do rap Então, novamente, refatore, largura da
torneira expandida. Vamos salvar,
agora que parece melhor. Cada texto agora compartilha a largura
disponível igualmente, criando um layout limpo e agradável. Por padrão, o texto dentro do widget expandido
está alinhado à esquerda, é por isso que eles aparecem
no lado esquerdo de seus
respectivos espaços E assim,
construímos a estrutura
para nossos cartões. Na próxima lição,
substituiremos esses widgets de texto pelos widgets de
cartão adequados, dando ao nosso layout uma aparência mais
polida e profissional
7. Substituindo o texto com widget de cartão: Tudo bem, é hora de subir
o nível das coisas. Temos usado o widget de
texto simples até agora. Mas vamos substituí-los por algo mais limpo
e estruturado. É aí que entram as cartas. Antes de fazermos isso, vamos dar ao nosso layout um pouco de
espaço para respirar entre as linhas. Quase na segunda fila aqui. Vamos adicionar uma caixa de tamanho A. Vou definir a
altura para 20. Guarde isso. Isso apenas adiciona uma
lacuna vertical de 20 pixels, fazendo com que nosso layout pareça mais
aberto e menos apertado Vamos substituir o primeiro widget de texto por um
widget de cartão. Com isso, o que podemos fazer
é simplesmente remover isso e depois podemos dizer cartão, e desta vez, vou usar
a versão preenchida do cartão. Eu clico em cofre. Observe aquele construtor cheio de
pontos, que simplesmente significa que o cartão
terá uma cor de fundo, que podemos
personalizar facilmente posteriormente Mas um cartão pode conter
várias camadas internas, incluindo ícones de preenchimento,
texto e até botões Vamos criar totalmente a
primeira carta. Dentro disso, a primeira
coisa que vou
fazer é adicionar
uma elevação a zero. E então eu vou definir
a cor para as cores do ponto T, e vou definir
isso para 100, guarde isso. Depois disso, você
adicionará um gráfico. É aqui que as coisas
começarão a aparecer. Vamos adicionar um preenchimento
e vamos dizer borda e definir ele. Vou
definir o preenchimento para 15 Guarde isso. Agora você vê
esse cartão na pré-visualização. Role um pouco para
que possamos ver o código. Agora, depois desse preenchimento,
vamos adicionar uma vírgula. Então, se você clicar em
Controle e barra de espaço, verá que a próxima coisa que
precisamos fazer é adicionar uma criança. Aqui vamos centralizar
tudo dentro desse centro, vamos adicionar
outra criança, que vai segurar uma coluna Nesta coluna, quero que o alinhamento
do eixo principal esteja no centro Essa coluna terá filhos, e os primeiros filhos
serão um ícone. Vamos definir o ícone
para ícones com pontos Pessoa. OK. E se eu disser isso, você deve ver o ícone dessa
pessoa lá. E para esse ícone, logo após a pessoa, vou definir um tamanho. Vou definir o tamanho para
30. Vamos dizer isso de novo. Eu posso ver que ficou maior. E então podemos realmente
definir a cor aqui. Portanto, a cor seria o tema do esquema de cores de pontos. O primário. Salve isso e você verá que temos uma cor
para o ícone da pessoa. Agora, isso é apenas o ícone. Depois do ícone,
adicionaremos um custo
e, em seguida, adicionaremos uma caixa de tamanho. Vou definir a
altura para oito pixels. Em seguida,
adicionaremos um widget de texto, que diria perfil E então podemos estilizá-lo com ponto do tema do texto. E isso terá um título
Pequeno. Vamos guardar isso. Agora você pode ver a
aparência do
nosso cartão de perfil dentro do painel. Vamos detalhar isso rapidamente. Aqui, a primeira coisa que
temos é o cartão preenchido com pontos. Isso nos dá um simples cartão
preenchido com o cartão de
fundo. Em seguida, adicionamos um preenchimento. Isso cria um espaço
dentro do cartão para que nosso conteúdo interno não
fique preso nas bordas. Então, dentro disso,
demos uma coluna. Isso marca o ícone
e o texto verticalmente. Se você notar aqui,
também fornecemos um centro. Isso mantém tudo
bem centralizado. Então nós aqui fornecemos um custo de
tamanho de caixa de oito pixels. Isso adiciona um pouco
de espaço entre o ícone e o texto. Ao dizer isso, você verá um cartão de perfil limpo e centralizado Isso parece muito
bom, não é? Agora, é claro,
poderíamos simplesmente copiar colar esse mesmo cartão
para os outros dois, mas essa não é a maneira mais
elegante de criar layouts Em vez de repetir
esse grande pedaço de código repetidamente, podemos torná-lo modular Criaremos um arquivo de
widget separado para nosso cartão e , em seguida, o chamaremos com parâmetros
diferentes como ícone, texto e cor Dessa forma, nosso código permanece
limpo e escalável. Faremos exatamente isso
na próxima lição.
8. Como criar o cartão de forma modular: Tudo bem. Agora que
criamos nosso primeiro cartão, vamos torná-lo
modular. Por que modular? Porque em vez de copiar
e colar o mesmo cartão repetidamente, podemos criar um widget limpo e simplesmente reutilizá-lo
com diferentes valores,
títulos, ícones, cores,
qualquer coisa que Isso mantém nosso código bonito,
organizado e escalável. Vamos começar configurando a estrutura de
pastas para isso. Então, vamos abrir nossa estrutura de
pastas aqui
e, dentro do laboratório, vou criar uma pasta
aqui e chamaremos isso widgets de sublinhado do painel Dentro disso, vamos
criar um arquivo chamado dart do cartão de sublinhado
do painel Agora, dentro desse arquivo, vamos primeiro criar a
estrutura básica do nosso widget de cartão Então, aqui, direi importar,
empacotar, obturar material e, em
seguida, diremos que a classe, cartão
do painel estende o widget
sem estado Dentro disso, diremos Cast, depois diremos cartão do painel, tecla
superdt e, em seguida,
direi tudo bem E então ligaremos para uma devolução. Chamaremos isso de
cartão arquivado. Salvar. Ótimo. Agora vamos trazer o código
do cartão que
criamos anteriormente e
colá-lo dentro desse widget Então, vamos ao ponto da
tela inicial do layout e você pode ver o
widget do cartão aqui Então, se você clicar aqui, você pode ver que este é o nosso cartão inteiro. Então pegue todo
esse código, recorte-o, vá para o cartão do painel
e, em seguida, aqui,
vamos substituí-lo . Deixe-o em segurança. Agora, isso funciona,
mas ainda não é dinâmico. No momento, tudo
está codificado. Vamos tornar esse widget personalizável adicionando
algumas variáveis Começaremos declarando-os dentro da classe
que está aqui A primeira coisa que
faremos é dizer cor
final do cartão BG color. Aqui, a cor é
na verdade o tipo
e, por fim, significa que não
poderemos personalizar
essa variável posteriormente. Então, em seguida, vamos
dizer final. Precisamos de dados de um ícone, que na verdade é um tipo, e criamos uma
variável chamada ícone. Em seguida,
criamos outra final , usamos uma string,
que será um título. Agora, precisamos adicionar isso
ao nosso construtor. Então, aqui, diremos que é necessária essa cor de
fundo do cartão de pontos. Então, exigiu esse ícone de ponto. Se necessário, esse
título de ponto, vamos salvá-lo. Então, aqui está o que cada
variável faz. Cor grande do cartão que
controlará a cor de fundo do cartão. O ícone nos permite
usar ícones diferentes. O título dá a cada
cartão seu próprio rótulo. Agora vamos fechar essa estrutura de
pastas aqui, rolar um pouco para baixo. Agora vamos atualizar o
widget do cartão para usar essas variáveis. Então, a primeira coisa
que você verá aqui é a cor do cartão. Então, vou mudar isso para
a variável que fornecemos
que é o cartão Biglor E a próxima coisa foi o ícone. Então, aqui vamos
remover isso e vamos usar apenas
nossa variável chamada ícone. E então tivemos o título. Então, aqui, em vez de perfil, vamos simplesmente dizer
título. Vamos guardar isso. E assim, nosso
cartão agora é dinâmico. Pode inserir diferentes
ícones, títulos,
cores, e o único widget se
adaptará a tudo Não é mais necessário copiar e colar. Na próxima lição,
voltaremos ao nosso layout
e, na verdade, usaremos esse widget de cartão modular para criar nosso painel
com vários cartões
9. Usando o cartão de painel modular: Tudo bem, é hora de colocar
nosso cartão dinâmico em ação. Já o
criamos em um arquivo separado, então agora só precisamos
importá-lo para o nosso layout principal. Vá até o ponto da tela inicial
do nosso layout. E então, no canto superior direito
após o dardo do material, diremos Importação,
embalagem, prática de layout Você pode ver que temos o painel
e, em seguida, o
cartão personalizado que criamos. Vamos guardar isso. Certifique-se de que o nome do arquivo corresponda ao arquivo
real que você criou. Se houver um erro de digitação, as coisas não
funcionarão como você deseja. Agora, em seguida, role
para baixo até o widget do cartão onde
removemos o cartão E aqui dentro dessa criança, tudo o que precisamos fazer
é segurar a tecla Control apertar a barra de espaço e
dizer cartão do painel. E você pode ver aqui, ele pegou
automaticamente
as variáveis. Agora temos o ícone
colorido do cartão BG e o título. Agora,
para a cor BG do cartão o que
vou fazer é removê-la. E eu vou apenas dizer cores que t e depois definir 200. Guarde isso. Você pode colocar um ponto de exclamação lá se quiser
remover esse erro Em seguida, dentro do ícone, podemos dizer ícone ponto pessoa. Digamos isso e
, no título, podemos simplesmente dizer
perfil. Vamos guardar isso. E só para ter certeza de que
vamos reconstruir esse layout. Então, basta clicar neste botão de
atualização que
reiniciará nosso layout E você pode ver que nada mudou. Isso significa que nosso cartão
está funcionando bem. Agora vamos substituir todos os três espaços reservados
por cartas reais Então, eu vou me
livrar desse, e então podemos dizer cartão
do painel e aqui, a cor vai ser cores ponto. Para definir isso como
100 e, em seguida, para ícone, vamos usar ícones com mensagem de
pontos e para título, vou usar
isso como mensagem. Vamos guardar isso. Vejo
que recebemos o cartão de mensagem. Vamos fazer a mesma
coisa com este. Eu vou me
livrar desse. Digamos que um cartão de painel. E aqui, a
cor de fundo será a cor ponto TO, que será 100. E o ícone,
vamos mudar isso para
ícones com pontos, o sublinhado do aplicativo é arredondado O título, vou
chamá-lo apenas de aplicativos.
Vamos guardar isso. Eu posso ver que temos três cartas. O cartão do painel
agora é nosso widget reutilizável. O expandido garante que todos os
cartões tenham a mesma largura. E o tamanho da caixa é , na verdade, aquela que devemos usar
para dar espaçamento. Se você ver, temos um bom espaçamento aqui, mas não dentro disso Mas na verdade parece bom, mas se você quiser
dar um pouco de espaçamento, o que você pode fazer é dar isso aqui Podemos dizer caixa de tamanho com
uma largura de 20 pixels. Digamos que sim. Agora,
isso vai dar o mesmo espaçamento
entre essas cartas E, sem mais nem menos, temos três
painéis dinâmicos e limpos três
painéis dinâmicos e limpos
posicionados lado a lado Sem código duplicado, sem confusão, apenas uma mágica limpa de vibração Na próxima lição,
adicionaremos uma área de conteúdo e
definiremos links de navegação para tornar esse painel mais
real, como um aplicativo real.
10. Adicionando a área de conteúdo e a barra de navegação inferior: Tudo bem, é hora
de dar vida ao painel. Já temos uma fileira
de cartas no topo. Mas agora vamos adicionar
uma área de conteúdo abaixo dela. Em seguida, finalize o layout com
uma barra de navegação inferior. Vamos começar com
a área de conteúdo. Agora, aqui, esta é a linha
que realmente contém todas as cartas aqui.
Essa é a linha principal. Logo depois disso,
vamos adicionar uma caixa de tamanho com uma
altura de 20 pixels. OK. E abaixo disso, vamos dizer expandido. E essa expansão terá um ponto de cartão preenchido. OK. E vamos clicar em Salvar. Ainda não conseguimos ver nada,
mas está tudo bem. Então, aqui vamos
adicionar um pouco de cor. Então, agora o que
podemos fazer é definir um tema aqui. Então, podemos dizer que eles se destacam. Pontilhe a cor primária e, em seguida,
podemos usá-la com Alpha. Então, basicamente, definimos
a transparência aqui. Então, podemos definir isso para 30. E se eu não salvar, bem, ainda não vemos nada
porque não fornecemos nenhum tipo de item
ou
dado dentro dele. Então, a seguir, o que
podemos fazer é adicionar alguma elevação. Vou definir a
elevação como zero, o que basicamente remove
a elevação padrão. E aqui, na criança, vamos adicionar o centro. E dentro desse centro, vamos adicionar
outra criança. E aqui, vamos
adicionar o widget de texto. O widget de texto
dirá área de conteúdo. Salve isso, e aí está. Agora, dentro desse widget de texto, podemos realmente estilizar isso Então, podemos dizer estilo. E então podemos dizer que o
tema está desligado. Então, podemos dizer tema de texto e definir o título
como médio ou pequeno. Vou definir isso como pequeno. Então, isso simplesmente coloca essa coisa em negrito. Agora vamos
voltar um pouco e, se você ver
aqui, o que fizemos? Usamos um tema com Alpha. Isso torna a cor
dinâmica com base
no tema atual do aplicativo.
Aqui está o que está acontecendo. O tamanho do trabalho que adicionamos
com os 20 pixels, que adiciona espaçamento entre os
cartões e a área de conteúdo,
expandido, certifique-se de que
a área de conteúdo preenchida com o
espaço restante na tela O preenchimento da raiz do cartão nos dá
uma boa superfície de fundo. Então, basicamente, obtivemos
tudo o que precisávamos. Agora, voltando a essa coisa do
Alpha, se você ver isso, podemos realmente mudar a cor com base no tema que
selecionamos no material b. Então, aqui nós fornecemos uma cor
codificada, certo? Então, podemos realmente mudar isso com isso. Então, vamos
seguir em frente e fazer isso. Vou apenas copiar isso, e depois vou
substituir isso por este. E vamos fazer a
mesma coisa aqui. Vou substituir isso por
este e esse também. Então, da próxima vez que você alterar a cor inicial do aplicativo de material, toda
a cor do aplicativo
mudará com ela. Vamos realmente tentar isso. Vamos ao nosso ponto principal, e você pode ver quem disse que, para rasgar, vamos
mudar isso para azul. Vamos salvar isso e pronto, o cartão e a
área de conteúdo são atualizados juntos. Isso dá à sua interface de usuário um relógio dinâmico
unificado. Agora vamos encerrar esta lição
com uma barra de navegação. Já temos uma boa barra de
aplicativos na parte superior, então adicionaremos uma parte inferior do
cochilo ao próprio andaime Portanto, se você acessar o ponto da
tela inicial do layout na parte inferior,
poderá ver o poderá ver o Foi aqui que o
andaime realmente terminou. E se você quiser apenas confirmar , você pode rolar para cima e ver que
é um andaime, clique nele para ver o
colchete de fechamento Ok, então esse é o andaime. Então, agora estamos dentro
do andaime. Então, aqui, tudo o que você precisa fazer é digitar a barra de
navegação inferior
e, em seguida, podemos dizer a barra de
navegação. Por isso, ele pede
alguns destinos. Então, aqui, eu vou criar um elenco e ele vai
conter algumas matrizes Agora, dentro dessa lista, você precisa ter pelo menos
três destinos de navegação. Mas vamos adicionar quatro.
Vamos seguir em frente e fazer isso. Então, dentro disso, vamos
dizer destino de navegação. Aqui está. Agora, aqui você pode ver
que ele recebe um ícone e um rótulo. Agora, para o ícone, o que podemos fazer é dizer ícone,
digamos ícones ponto HOME. Porque queremos o ícone inicial. Agora, o rótulo pode ser um texto
simples, como em casa. Agora, se eu salvar isso, você
verá um erro. Basicamente, aqui você pode ver que o comprimento do destino deve ser maior ou igual a dois, o que não é verdade no momento.
Vamos em frente e consertemos isso. O que podemos fazer é duplicar isso mais três vezes. Basicamente, temos
quatro navegações agora. Agora, se eu não economizar, bem, acho
que apareceu, está tudo bem. O que você pode fazer agora é
recarregá-lo novamente e
reiniciar o aplicativo Agora você pode ver que
temos quatro itens NAB. Vamos mudar
os dados para isso. Em vez de esperar
pelo segundo, vou dizer pesquisar, e isso vai se tornar
pesquisar pelo terceiro, vamos mudar
isso para configurações, e aqui vamos mudar
isso para configurações. Então, para o último,
vamos chamar isso de ajuda. Aqui podemos chamar isso de ajuda. Vamos guardar isso. Agora você
pode ver que temos os ícones. Agora, o problema aqui
é que
isso realmente não corresponde ao tema
que criamos. Temos um tema azul
e este é cinza. O que podemos fazer é
realmente mudar ou aplicar a
cor para isso. Dentro da barra de
navegação inferior aqui, você pode dizer a cor de fundo. E se você se lembra, fizemos este, que na verdade é muito bom. Tema, ponto de contexto, um alfa. Copie isso, cole aqui e vamos
mudar isso para 80. Não, cinco, não salve, você pode ver que dei aquela
cor para isso. Se quiser, você pode realmente
alterar a opacidade aqui. Portanto, você pode definir isso como 30
para combinar com a cor
do que temos. Certo, há mais uma
coisa que você precisa observar. Então, se você ver aqui, a casa
está realmente selecionada, certo? Então, talvez você não consiga ver isso, então deixe-me alterar o
valor aqui. Talvez possamos. Então, vamos adicioná-lo a cerca de 100. Ok, agora você pode ver
que isso está destacado, certo? Então, se você quiser mudar
isso de casa para a pesquisa, tudo o que você precisa fazer
é dizer índice selecionado, que começa do zero. Então, zero é o lar. Uma é a pesquisa, duas é a configuração e três é a ajuda. Assim, você pode navegar facilmente
entre esses botões. Então, agora vamos voltar
para 30, vamos salvar. Tudo bem, então o índice selecionado controla qual item de navegação
está atualmente selecionado cor de fundo usa a cor primária
dinâmica com Alpha para obter consistência. O destino de navegação
cria cada ícone por item de rótulo na barra de navegação Então, agora temos um layout
completo. Vamos mudar o tema aqui para que
fique muito melhor. Então, vou transformar
isso de volta em lágrima, vou guardar isso, e
este ficará melhor.
11. Encerramento e projeto do curso: Trabalho incrível, pessoal. Acabamos de criar um layout completo de
vibração do zero. Começamos
configurando o projeto base, entendendo os conceitos
básicos de preenchimento e layout, construindo com linhas e colunas usando uma interface de usuário responsiva expandida para
estruturar, criando um widget de cartão de
painel modular, adicionando uma área de conteúdo dinâmico
e, finalmente, reunindo tudo com
a barra de navegação
inferior Como usamos o ponto de
contato do tema com cores dinâmicas, agora
você pode alterar a aparência completa do
seu aplicativo apenas atualizando
a cor do tema. Veja isso. Se eu mudar
para roxo agora e pronto, todo
o painel se adapta. Na verdade, você pode mudar
isso para azul ou até âmbar, seja qual for a sua vibração Essa é a mágica de criar
layouts de forma limpa em flutter, uma estrutura sólida Para seu projeto de classe, duplique esse layout e
escolha seu próprio tema Substitua os ícones e títulos nos cartões de acordo com sua própria ideia, como um aplicativo de viagens, um painel
financeiro, um gerenciador de tarefas ou
qualquer coisa que você goste. Experimente
diferentes cores
e ícones de espaçamento para
torná-lo realmente seu. Se quiser, você pode adicionar mais destinos de navegação
e ver como a interface do usuário é dimensionada. Depois de terminar, compartilhe uma captura de tela
ou gravação
de tela do layout finalizado na seção
do projeto da classe Eu adoraria ver o quão
criativo você pode ser com essa base. E é isso. Agora você tem um
tema totalmente funcional e um layout flutuante adaptável sobre o
qual você pode criar,
seja para painéis, páginas de seja para painéis, destino ou Estou muito orgulhosa de você por
acompanhar passo a passo. Continue construindo, continue
experimentando, e
nos vemos na próxima aula
Flutter Sensei, Teaching Flutter from Scratch
