Transcrições
1. O que você vai aprender e construir: Oi, todo mundo. Bem-vindo
a esta aula. Sou Flutter Sensei
e, nesta aula, aprenderemos como
criar um
NoeSam completo no Flutter criar um
NoeSam completo Ao longo desta
aula, você aprenderá como criar um novo projeto
flutuante, configurar o pacote de provedores
para a troca, criar a tela inicial
com um layout de grade, criar a tela de adição de nós com um campo de texto totalmente
expandido,
editar qualquer nota existente, transmitir dados entre
telas com o navegador, transmitir dados entre
telas com o navegador, adicionar funcionalidade de exclusão e
aprimorar a interface do usuário com preenchimento, como criar um novo projeto
flutuante,
configurar o pacote de provedores
para a troca, criar a tela inicial
com um layout de grade,
criar a tela de adição de nós
com um campo de texto totalmente
expandido,
editar qualquer nota existente,
transmitir dados entre
telas com o navegador,
adicionar funcionalidade de exclusão e
aprimorar a interface do usuário com preenchimento, ritmo,
e azulejos arredondados. Ao final dessa aula, você poderá criar um aplicativo de
nós totalmente funcional com suporte aos modos claro e
escuro. Para seu projeto de classe, você personalizará o aplicativo, tudo o que abordamos Você pode brincar com as cores, alterar o design do ladrilho, ajustar as fontes e criar
seus próprios estilos visuais. Esta aula é perfeita para iniciantes que estão apenas
começando a usar o Flutter Tudo que você precisa é o Flutter
instalado e o código VS. Então, o que você está esperando? Vamos começar.
2. Configuração do projeto e provedor de temas: Tudo bem, vamos começar. A primeira coisa que
precisaremos fazer é criar um novo projeto dentro da
pasta do projeto. Então, vamos ao nosso prompt de
comando. E a partir daqui, vou navegar
até o desktop. Em seguida, entraremos nos projetos
do Flutter
e diremos Flutter, criaremos Nodes Light Agora vamos entrar
na pasta do projeto, que é Nodes Light. E agora vamos lançar o VS Code. Isso é ponto de código. Agora vamos fechar o
prompt de comando. Vamos maximizar isso. Agora vamos ao nosso
Pub spec dot YAML e precisamos adicionar um pacote Vamos rolar
para baixo até dependências e aqui adicionaremos
o pacote Pror. Esse é o provedor e economize. Vamos usar o pacote
Provider para alternar entre
tema claro e tema escuro. Agora vamos ao
nosso ponto principal. E vamos nos livrar de
tudo o que temos aqui. Agora, vamos
importar os pacotes. Isso é import package, flutter, Material dot dot e Import
package provider dot dot Em seguida, vamos escrever
a função principal. É vazio principal. Dentro disso, teremos o Runapp. Dentro disso, adicionaremos o provedor do
notificador de alterações E será um provedor de equipe. Em seguida, precisamos
adicionar um filho const. Vou chamar isso de notas
, Light I save. OK. Em seguida, precisamos
criar o provedor do tema. Eu só vou pegar isso. Vamos criar uma classe aqui. O provedor do tema estende, o notificador de
alterações. Você dirá que Ball está escuro. Defina isso como falso. Vou dizer bola e agora
precisamos criar um coletor que fique escuro Vou definir isso para que
o placar esteja escuro. Precisamos criar
o efeito de alternância que é vazio, Então, dentro disso, diremos que Es dark não é igual a Es dark. Em seguida, notificaremos os
ouvintes. Vou guardar isso. Agora precisamos criar
nosso widget Node light. Vamos pegar essa
e colocá-la aqui. Digamos que class,
node light extends, widgets
sem estado digam const, Node light que
é super Então diremos,
tudo bem, construa, e aqui criaremos a variável chamada
Provider. E esse é Provider dot, o provedor do tema. Guarde isso. Logo abaixo disso,
retornaremos o Material App, exceto isso. E agora vamos atualizar
o aplicativo Material com todos os itens necessários. O primeiro que
precisaremos é o título, que diz notas Light. Vamos remover o banner
do DBC. Em seguida,
definiremos o tema para os dados
desse tema,
usaremos o Material three, true e, em seguida,
definiremos o esquema de cores para o esquema de
cores a partir da semente. Essas são as cores azuis. Brilho é brilho, luz
pontilhada. Guarde isso. Agora vamos criar
o tema do cachorro. Então, vou copiar isso e dizer
tema de cachorro e colar. Agora esse vai ser o doutor. Em seguida, precisamos do modo temático. Esse é o provedor dot Esdg. Se estiver escuro, vamos dizer
o modo dot dog. Caso contrário, vamos dizer
o modo, dot Light. Agora precisamos criar
a tela inicial. Vamos dizer home, isso é o que chamarei
de HomeScreen. Vamos guardar isso. Na próxima aula,
construiremos nossa tela inicial, e é aí que nosso Notepp
começará a parecer vivo.
3. Como criar o layout da tela inicial: Ok, agora que nosso arquivo
principal está pronto, vamos continuar e
criar nossa tela inicial. Dentro da sua pasta labial, vamos
criar uma nova pasta, vou
chamá-la de telas. E dentro disso, vou
criar um novo arquivo chamado home underscore screen dot dot E aqui, diremos importação,
pacote, Flutter,
Material dot dot Agora, segure o controle
e a guerra espacial e veremos se
obtemos essa tela inicial, que estenderá o widget
State Fold E aqui, diremos const,
HomeScreen, superdt key. E aqui vamos
criar um estado. Vamos pegar
essa tela inicial e substituí-la por esta, e vamos nos livrar
desses itens aqui, e vamos chamá-la de estado
sublinhado da tela inicial Agora precisamos criar este,
como por exemplo, classe, estado de
HomeScreen estende, estado,
e o estado e o estado E aqui, diremos que
está tudo bem construído. E precisamos obter o provedor do
tema aqui. Diremos o fornecedor final do tema. provedor desliga e nós vamos pegar o provedor. Guarde isso. E aqui, vamos devolver
o andaime. Guarde isso. Agora precisamos ir para
o arquivo Dot dart principal e importar esse arquivo Vamos até o ponto principal,
role até aqui, digamos que transmita o pacote, o slide de
notas, as telas
HomeScreen. Vamos guardar isso. Eu posso ver que esse erro desapareceu. Posso voltar para
sua tela inicial
e, como você pode ver aqui, agora
que temos o andaime,
podemos executar o podemos Vamos até nosso
ponto principal e vamos
executar isso. Estou executando isso como um aplicativo do Windows, mas você pode escolher
sua própria plataforma. Vamos seguir em frente e executar isso. Ok, então vamos
alinhar isso lado a lado e só isso e
vamos derrubar
este. Vamos fechar isso. Agora, vamos voltar ao
ponto ponto da tela inicial e adicionar o aplicativo Então, vou dizer aproximadamente, aqui
vamos dizer que o título é Cast, texto. O texto aqui
vai dizer Noa. E adicionaremos uma cor
de fundo. Vou chamar isso de esquema de cores de pontos de
equipe, contêiner primário de
pontos. E eu vou copiar
isso e colar aqui, isso vai ser
totalmente colorido. E em vez disso,
diremos no contêiner primário. Vamos salvar isso e ele
deverá ver o aplicativo. Agora precisamos adicionar o botão de
alternância aqui. Então, logo após essa,
diremos que ações
são o botão do ícone
e, quando pressionado, queremos pegar o provedor do tema
e alternar o E para ícones, você pode dizer ícone e aqui verificaremos se
o provedor do tema está escuro. Se estiver escuro, diremos que os
ícones pontilham o Modo de Luz. Caso contrário, diremos
ícones, pontos, modo escuro. Salve isso e agora você pode ver que temos
o botão de alternância. Então, vamos testar isso. Então, se eu clicar aqui, ele muda para o
modo claro e o modo escuro Ok, agora que nosso botão de
alternância funciona, vamos adicionar o corpo do nosso aplicativo Primeiro, precisaremos de
um gerador de listas. Isso serve para testar e ver como nossos nós ficarão
quando os construirmos. Então, logo após esse estado da tela
inicial aqui, diremos final,
direi nós de sublinhado Defina isso como uma lista para gerar, eu vou gerar
seis deles. E o gerador será um simples olá mundo. Vamos guardar isso.
Agora vamos rolar para baixo e vamos criar o
corpo aqui. É um corpo. Aqui vou adicionar
o Grid Wave Builder. Portanto, o grid wave Builder
precisa primeiro de uma lista da contagem de itens. Aqui, vou
dizer que a contagem de itens é comprimento do ponto das notas
sublinhadas Salve isso e agora podemos
adicionar o delegado do Grid. Esse é o eixo transversal fixo. Eu defini isso para dois. E aqui precisamos
adicionar um pouco de espaçamento. Então, isso vai ser 25, e o outro vai ser 25. Precisaremos de um pouco de
acolchoamento para o corpo. Podemos adicionar esse preenchimento
dentro do construtor. Então, aqui podemos
dizer que o preenchimento é mesmo. Vou definir isso
para 25. Vou guardar isso. Agora, dentro do construtor de itens, vamos nos
livrar desse. E aqui adicionaremos nosso estilo de lista porque o bloco da lista já tem uma opção de toque. Vamos continuar e
retornar o bloco da lista. Agora, vamos atualizar nosso
estilo de lista com alguns dados. Aqui, a primeira coisa que
vou adicionar é um título. Isso
será um texto em uma cadeira, e
virá de notas, índice e, digamos, em salvar. Agora podemos ver o texto
aparecendo na pré-visualização. Mas esses textos parecem
um pouco maiores, precisamos torná-los um
pouco menores. Por isso, o que podemos fazer
é, ao lado disso, ver
que estilo é têxtil Posso dizer que o
tamanho da fonte deve ser 13. Guarde isso. Isso parece
menor. Isso é muito melhor. Depois do título, quero
adicionar um final. Esse final será
um botão de exclusão. Para isso, podemos
dizer botão de ícone. Quando pressionado, ainda não
temos nada, vamos
deixá-lo em branco e o ícone será ícone, ícones excluídos por pontos. Guarde isso. Agora você pode ver o título
e o botão de exclusão. Mas precisamos adicionar alguma cor de
fundo nossa nota para mostrar o
tamanho de cada nota Para isso, podemos
usar a cor do ladrilho. Logo acima do título, vamos dizer cor do ladrilho. Aqui, em vez de especificar
uma cor específica, vamos usar
a cor fina Esse é o esquema de cores
ponto, ponto. Chamaremos isso de
contêiner de superfície, e isso é uma economia. Agora você pode ver que
nossos ladrilhos estão bem. Se eu pegar meu cursor aqui, você pode ver que literalmente
nada acontece. Seria bom
ter um efeito quente também. Nós obtemos isso automaticamente
com a função on tap. Vamos adicionar isso. Logo após o final aqui, você pode ver no toque, e aqui vou adicionar uma função
de prancha Agora, se eu pegar meu cursor, você pode ver, obtemos
um efeito de foco Agora, quando eu mudo para o tema de cachorro, você pode ver como isso fica. E agora temos
o efeito de foco
e o efeito de cima também. Na próxima aula,
aprenderemos como adicionar um novo botão de nó e
criar uma nova tela de nó.
4. Adicionando a tela Adicionar nota e o campo de entrada: Tudo bem. Agora, precisamos
adicionar um botão de ação flutuante que nos levará
à tela de adição de novo nó.
Vamos criar isso. Em nossa tela inicial, logo após o corpo que é
o Grid wave Builder, vamos adicionar um botão de ação
flutuante. Quando pressionado, vamos
mantê-lo vazio por enquanto. E vamos
adicionar um ícone aqui. Então, vamos chamar isso de ícone. O ícone de estatísticas do ícone começa
em e salve-o. Vou definir isso
como Cs save that novamente. E eu posso ver se você
tem esse botão. Vou mudar a forma para bot
circular para que
fique assim. Tudo bem, esse botão ainda
não faz nada. Para que esse botão nos leve
à nova tela do nó, precisamos primeiro criar
a tela. Então, dentro da pasta lip, temos telas e,
dentro das telas, vamos criar uma nova tela, e chamaremos isso
de add node dot dart Vamos voltar aqui
e vamos dizer import,
package, flutter,
material dot dart e diremos class Adicione uma nota, estende o widget de
estado quatro. E eu vou dizer const, adicione a tecla note
supertat, tudo bem, crie Vou pegar a
nota adicional e substituí-la aqui. Eu me livro desses itens. Eu vou dizer, adicione uma nota, diga. E eu vou criar
essa, copiar essa classe, adicionar estado de nota, estender estado, que é adicionar nota. E aqui, vamos
adicionar um andaime. Tudo bem. Agora que
temos esse andaime, podemos adicionar essa
tela ao nosso botão Vamos voltar para
a tela inicial e para dentro do botão de
ação flutuante. O que podemos fazer
aqui é dizer navigator dot perch
pode seguir essa rota e
adicionar uma rota de página de material, e o construtor publicará
uma nota publicitária. Guarde isso. Agora, quando eu tocar
nesse botão de adição, ele nos levará
à tela de adição de nó. Agora, vamos atualizar nosso nó de adição. Vamos voltar aqui. Aqui, adicionaremos a visualização de
texto do aplicativo e um botão Salvar. Para isso, vamos começar
com o aplicativo primeiro. Aqui, o que podemos
fazer é acessar
a tela inicial e
ver que já
temos esse aplicativo. Vou copiar isso e
depois passá-lo aqui, e não precisamos das ações. Então, eu vou me
livrar disso. Eu acabei de economizar. Você pode ver que entendemos isso, e aqui vamos dizer, adicione uma nota e salve-a. Agora posso navegar entre
a tela de adição de notas. Tudo bem, então temos a barra de aplicativos. Agora precisamos adicionar
a roda de texto. Então, aqui, logo
após a barra de aplicativos, vamos dizer corpo. Vou colocar o
acolchoamento aqui. Vou definir
o preenchimento para 25. Vou colocar a
criança aqui em uma coluna, e dentro dessa coluna,
teremos filhos. E dentro das crianças,
vamos adicionar um campo de texto. Guarde isso. E dentro do campo de texto, podemos adicionar uma decoração
chamada decoração de entrada. Vou definir o texto
do rótulo adicionar sua nota
aqui e salvar isso. Agora você pode ver que
temos o campo de texto. Mas esse campo de texto
parece bem pequeno. O que queremos é um campo de texto expandido onde possamos escrever
o texto que precisarmos. Para isso, primeiro,
precisamos colocar nosso campo de texto dentro de
um Wichet expandido Então, vamos
selecionar nosso campo de texto. Clique com o botão direito em refatorar. Eu configurei isso para embrulhar com
expandido e guardei. Agora precisamos adicionar alguns
detalhes ao nosso campo de texto. A primeira coisa que vou
fazer aqui é
adicionar o máximo de linhas e definir isso como nulo Então, vou definir
a expansão como verdadeira. Vamos guardar isso. Agora você pode ver a borda na parte inferior. Não queremos a borda
na parte inferior, certo? Na verdade, não queremos
a fronteira de jeito nenhum. Para isso, dentro da decoração
de entrada aqui, podemos dizer borda, digamos borda de entrada ponto nun. E isso vai remover
essa borda da parte inferior. E agora queremos que esse texto
apareça na parte superior. Então, para isso, diremos
alinhar rótulo com dica. Eu vou configurar isso
também. Verdadeiro. Clique em salvar, isso vai para o topo. Agora, se eu clicar
aqui, você pode ver, podemos escrever o quanto
quisermos e o rótulo permanece ativo. Vamos testar isso. Vamos ao nosso navegador. E aqui, vou
procurar Lorem Epsom. Vamos clicar em Mostrar mais. Eu só vou copiar isso. E vamos paginar isso
aqui. Vou espaçá-lo novamente. Agora você pode ver que temos a barra de rolagem dentro
do campo de texto e podemos
rolar facilmente para cima e para baixo. Agora, o que precisamos a seguir
é um botão Salvar, que por enquanto nos levará de
volta à tela inicial. Então, vamos rolar para baixo. E aqui dentro do andaime, vamos dizer botão de ação
flutuante, botão ação
flutuante quando pressionado, deixaremos em branco por enquanto
e diremos ícone infantil Início do ícone. Salvar. Guarde isso. E para esse ícone,
vou definir isso como custo. E agora temos o botão Salvar. Vamos mudar a forma
disso para uma borda circular. OK. Então, agora, quando eu salvo isso, ele deve
voltar para a tela inicial. Para isso, aqui, podemos dizer navigator dot pop e salvá-lo Então, agora, se eu tivesse
salvado voltaria para
a tela inicial. Na próxima lição,
aprenderemos como criar
a tela de edição.
5. Criando a tela de nota de edição: Ok, vamos
criar a tela de edição. Dentro da pasta labial
dentro das telas, chamaremos isso de editar,
sublinhado, nota, ponto E vamos fechar isso. Aqui, diremos que import package, Flutter, material dot dot,
say class, Edit note, extends State four Diremos const, Edit note, super dt key O estado de adição ou gravação, criação. Eu só vou
substituir isso aqui. E haverá um estado de
sujeira, nota. E vamos continuar
construindo isso. Classe. Editar nó, o estado estende o estado, que é o nó de edição. E aqui, eu vou dizer que A construiu, e nós vamos
devolver o andaime Vamos guardar isso. Agora, vamos para a tela
inicial aqui, e dentro do bloco
que temos aqui, podemos ver que temos
a função de toque. Então, ao tocar, queremos
ir para a tela de edição. Então, aqui o que podemos
fazer é dizer Navigator Dat perch e a
rota é Material page route O construtor é uma nota de edição. E vamos fechar isso. Então, agora, se tocar nisso, vou me levar
ao nó de edição. E é aqui que
precisamos adicionar nossos itens. O que vamos fazer por
enquanto é pegar tudo dentro do andaime de adição de
nós e
colá-lo aqui Então, agora vamos adicionar uma nota e pegar tudo o que
temos aqui dentro
desse andaime, copiar isso, editar a nota e colar aqui colar Vê? O que vamos fazer aqui é
atualizar algumas coisas. Então, aqui, vou
chamar isso de nota de edição. E aqui dizemos
atualização, você não é. E o botão Salvar
voltará para a tela inicial. Então, tudo está configurado. Além disso, se você ver
nossa tela inicial, as bordas
do ladrilho parecem muito nítidas. Vamos adicionar alguns
cantos arredondados a eles. Para isso, o que
podemos fazer é entrar na tela inicial, e esse é o ladrilho aqui, podemos dizer forma e chamar isso de borda
retangular arredondada Se você colocar o cursor aqui, poderá ver que ele
ocupa algo chamado raio da borda.
Vamos adicionar isso. Vou dizer raio do portal, e o que queremos
é o raio do portador. Circular. Aqui vou
definir o raio para 15 Guarde isso aí, agora
temos os cantos arredondados. Agora que temos a interface do usuário, é
hora de torná-la dinâmica. Na próxima lição, tornaremos nossa tela do ad node funcional. Tudo o que digitarmos será
salvo na tela inicial.
6. Tornando a tela Adicionar nota funcional: Tudo bem Agora é hora de adicionar algumas funcionalidades
ao nosso aplicativo. Primeiro, vamos adicionar uma nota. E aqui, precisamos
capturar os dados
do campo de texto. Para isso, vamos até
o fim e aqui vamos
criar uma variável, vou chamá-la de controlador de edição de
texto, e o nome da variável
será conteúdo. Vou configurar isso para o controlador de edição de
texto. Ok, agora precisamos atribuir esse controlador ao
nosso campo de texto. Para isso, vamos rolar para baixo. Novamente, veja que temos um campo de texto. Podemos dizer controlador. Sublinhe o conteúdo. Guarde isso. Ok, digamos que adicionamos
os dados dentro do nó do anúncio
e, quando
clicarmos no botão Salvar, voltaremos
à tela inicial. Mas a tela do ad node ainda
conterá esses dados. Precisamos descartar esses dados. Para isso, o que podemos
fazer aqui é dizer, tudo bem, dispersar. E aqui, podemos
pegar esse conteúdo e depois dispersá-lo Agora, quando adicionamos uma nota e
voltamos para uma nova, os dados anteriores ainda
não estarão lá. Em seguida, estamos recebendo os dados, mas precisamos enviá-los
para nossa tela inicial. Para isso, vamos rolar para baixo
até o
botão de ação flutuante aqui. Primeiro, precisamos verificar se o usuário não está
enviando dados vazios. Para isso,
vamos cortar isso. Digamos que eu sublinho o
conteúdo de que o texto está vazio, vamos adicionar uma lanchonete
F dot show do Scaffold Messenger Eu digo lanchonete, e o conteúdo vai
ser um preenchimento de texto. Diz: A nota não pode estar
vazia. E vamos salvar isso. Agora, uma vez feito isso, vamos dizer devolver. E aqui, vamos
adicionar nosso Navigator dot pop. Agora, quando adicionamos o ponto
navegado Pop, também
queremos carregar
o conteúdo aqui Então, aqui podemos dizer:
sublinhe o conteúdo. Texto pontilhado, salve isso. Ok. Agora, o conteúdo é
passado pelo navigator.com Em seguida, precisamos recebê-lo assíncrona
na tela inicial Para isso, vamos voltar
à nossa tela inicial. Agora, na parte inferior, temos esse
botão de ação flutuante e vamos atualizar. Então, aqui na imprensa, vou chamar
isso de sincronização. Vou recortar tudo o
que tenho aqui e
vamos dizer a nova nota final, ela vai esperar
e depois colar Tudo bem, nós
adicionamos o Sing. Então, agora os dados estão passando do nó do anúncio para
sua tela inicial. Mas primeiro, precisamos verificar se os dados provenientes do nó do
anúncio não estão vazios. Então, para isso, aqui, vamos dizer se a nova
nota não é nula E Nne é uma corda. Se isso for verdade,
vamos definir um estado. Serão nós que somam e o que
vamos adicionar, vamos adicionar a
nova nota. Guarde isso. Agora, o que temos
aqui é um gerador. Podemos ir em frente e nos
livrar disso. Vamos rolar até o fim
e eu vou
me livrar desse. Vou adicionar uma lista vazia. Agora, isso aqui vai ser uma lista de sequências de caracteres.
Vou guardar isso. Agora, se eu recarregar o aplicativo, posso ver se
recebemos uma nota em branco Ok. Agora vamos tentar
adicionar uma nova nota. Vamos clicar nesse botão de adição aqui e podemos chamá-lo de. Esta é uma nova nota e
clique em Salvar e i. Temos uma nova nota
em nossa tela inicial. Agora, quando eu toco
nisso, ele me leva para
a tela de edição, mas não consigo ver a nota
criada lá. Para isso, precisaremos levar o conteúdo da nota
para a tela de edição, e é exatamente isso que
aprenderemos na próxima lição.
7. Tornando a tela de edição funcional: OK. Agora precisamos tornar
a tela de edição funcional. Para isso, aqui está
o que precisamos fazer. Precisamos criar uma variável
na tela de edição, que transportará os dados
da tela inicial
e os enviará A tela inicial pegará esses dados
editados e os
salvará como dados atualizados Agora, para que isso funcione, precisamos
criar uma variável
na tela de edição. Vamos para a tela Editar e
ir para Editar o estado do nó aqui. Na verdade, antes disso, precisamos criar uma variável. Chamaremos isso de string final, e isso será
um nó editado. E vamos
adicionar isso aqui. Eu direi que exija esse nó editado por
pontos. Agora, nossa tela de edição também tem um campo de texto. Vamos
atualizar isso também. Então, dentro deste, você vai dizer final, digamos controlador de
edição de texto, e vamos
chamá-lo de conteúdo, vai ser controlador de
edição de texto. Agora vamos atualizar o campo de texto. Digamos que controlador. Cancelar a inscrição do conteúdo. Agora precisamos obter os dados que vêm
da tela inicial. Para isso, vamos rolar até
o fim e aqui podemos dizer que tudo bem e temos
algo chamado int state. Dentro disso, o que
vamos fazer é
pegar o conteúdo que temos
e o texto dentro dele, e vamos atribuir isso ao Wig
aquela nota editada Guarde isso. Depois que os dados
são editados e salvos, precisamos
descartá-los da tela Por isso, aqui
podemos dizer, descartar e sublinhar conteúdos que
dispersam Agora, a tela de edição está pronta para receber os dados
da tela inicial, mas ainda precisamos
verificar e enviar os dados atualizados de volta
para a tela inicial. Para isso, na parte inferior, no botão de ação flutuante, vamos fazer a validação primeiro. Então, eu vou cortar isso. E aqui, diremos que o texto com pontos do
conteúdo do sublinhado F está vazio Vamos adicionar um mensageiro de
andaime,
dot F, dot show snack bar Isso vai ser uma lanchonete. Esse será um campo de
texto que diz que nota
atualizada não pode estar vazia. Eu salvo. E uma vez feito isso, vamos voltar. Então, aqui, podemos adicionar
a palma de pontos do navegador. Agora, isso vai
carregar os dados atualizados. Para isso, diremos sublinhar
conteúdo, texto, salve isso. Agora, nossa tela de edição pode
receber e atualizar os dados. Na próxima aula,
configuraremos nossa tela inicial para receber esses dados atualizados e substituir os existentes.
8. Como atualizar notas e corrigir problemas de excesso pauta: Tudo bem. Agora precisamos atualizar a tela inicial para
receber os dados atualizados. Mas primeiro, você pode ver que temos um pequeno erro na tela inicial. Se você rolar para baixo,
poderá ver no nó de edição que precisamos de um parâmetro. Vamos resolver isso
rapidamente. Esse é o nó editado. Vou definir isso para
sublinhar os nós, que serão indexados Vamos guardar isso. Se recebermos esse erro, não
se preocupe com isso. Eu posso fechar isso e
você pode voltar aqui. Na verdade, podemos executar novamente nosso aplicativo. Eu adiciono o novo nó aqui. Eu vou dizer que esta
é uma nova nota, salve. Você pode ver se
entendemos isso e se eu tocar aqui, os
dados vêm aqui, e quando eu digo atualizado, e clico em salvar,
esses dados não vêm aqui. É isso que precisamos corrigir agora. Em nossa tela inicial, atualize
o bloco da lista desta forma. Aqui, você pode ver que
temos isso na aba, certo? Então, aqui, o que vamos
fazer é
adicionar uma pia. E vamos pegar tudo
isso e cortar isso. E aqui, vou
criar uma variável final. Vou chamar
isso de nota atualizada. Vou configurar isso para
aguardar e devolver a página. Agora precisamos verificar se
o nó atualizado que vem da
tela do nó de edição não está vazio. Para isso, aqui, você pode
dizer que F nota atualizada não é nula e nota atualizada é string E se isso for verdade,
vamos definir o estado, e vamos
pegar as notas e o índice dentro dele, e vamos atualizar
isso com a nota atualizada. Digamos que sim. E
assim, agora
podemos criar
e atualizar notas. Vamos testá-lo.
Então, quando eu voltar. Vou simplesmente
reiniciar o aplicativo. Mude o modo escuro e diremos que esta
é uma nova nota. Eu clico em salvar,
e ele vem aqui. Vamos tocar aqui. Vou
chamar isso de atualizado. Vamos clicar em salvar e você
pode ver que recebemos a atualização. Mas o que acontece se
eu adicionar um teste longo? Vamos testar isso. Vamos
adicionar um grande lamepsm Vamos ao nosso navegador, vou copiar
isso e voltar ao meu código. E vamos entrar nisso. Vou
substituir isso por um texto grande e
clicar em Salvar. Agora você pode ver
aqui que o texto está cheio no título Podemos corrigir isso adicionando um limite de linha aos
widgets de texto Por exemplo, aqui você pode ver temos o título que
é um widget de texto E aqui, o que podemos fazer
é dar uma vírgula e dizer que o máximo de linhas
deve ser oito E se eu salvar isso, você pode ver que o
texto transbordante agora sumiu E agora você pode ver que as coisas
parecem um pouco desalinhadas. Vamos consertar isso. Então,
logo depois disso, podemos dizer alinhamento do título Eu vou dizer alinhamento do
título da lista. E a partir daqui, posso definir isso
para o topo clicando em Salvar. Isso alinhará o título e o botão Dilt lado a
lado na parte superior Agora, a única coisa que nos
resta fazer é adicionar a funcionalidade dilit.
Vamos fazer isso. Então, aqui você pode ver que temos a função final
e, dentro dela, podemos dizer definir notas de sublinhado de
estado que removidas no índice
e salvá-las Assim, agora você pode
excluir essa nota. É isso mesmo. Agora criamos
um aplicativo de notas que pode alternar entre temas
claros e escuros, e essa nota pode
criar texto longo Por exemplo, eu posso pegar este e colar aqui dentro. O Angle não pode salvar,
podemos editá-los. Então, aqui podemos dizer que
atualizado, o Angle não pode salvar. E se não for necessário, também
podemos excluí-los.
9. Recapitulação e projeto do curso: Você chegou ao
final da aula. Você não apenas
seguiu as etapas, mas criou um aplicativo completo do
Notes do zero. Trocando temas, adicionando
notas, editando notas, excluindo notas, você criou tudo com
suas próprias mãos Ótimo trabalho,
mantendo-se consistente em todas as aulas. Ao longo desta aula,
montamos o projeto do zero. Adicionou um provedor
para eles trocarem, construiu uma tela inicial
com layout granulado, adicionou a tela de adição de notas
com campo de texto em expansão Salve notas
na tela inicial dinamicamente,
crie a tela do nó de edição, transmita os dados entre as telas,
atualizou os nós existentes, adicionou a funcionalidade dilit, interface de usuário
aprimorada com preenchimento,
espaçamento espaçamento Essas são habilidades essenciais para
flutuar, e você as usou
todas em um projeto real Agora é sua vez de
pegar este
aplicativo de anotações e dar a ele seu
próprio toque criativo. Você já aprendeu
tudo o que precisa. Tudo o que você está fazendo agora é alinhar ,
personalizar e melhorar
a aparência Mude a cor do ladrilho
para algo novo. Experimente com cantos arredondados, mais ou menos raio. Experimente diferentes tamanhos de fonte
ou estilo de notas em negrito. Adicione mais preenchimento ou
espaçamento na grade. Ajuste o espaçamento de acesso cruzado
e o espaçamento do eixo principal. Altere o plano de
fundo ou o estilo do título da barra de aplicativos. Experimente um
ícone, tamanho ou formato fabuloso diferente. Teste diferentes cores de sementes
em seu esquema de cores. Dê um toque personalizado
às telas de anotações. Faça com que suas anotações
pareçam notas adesivas. Cartas, blocos, o que
se adequar ao seu estilo. Apenas pequenos ajustes, mas eles
fazem com que o aplicativo seja seu. Divirta-se experimentando,
torne-o colorido, minimalista, fofo, ousado, o que
quiser Depois de terminar,
quero que você faça uma captura de tela da tela inicial
personalizada,
da tela do
anúncio, da tela do nó de
edição, da
captura de tela no modo escuro e pelo menos três
notas que você criou usando o design e
faça o upload na Mostre-me como você o personaliza, mostre-me sua criatividade.
Não se preocupe O design não
precisa ser perfeito. Só tem que ser seu. Obrigado por participar desta aula e criar
o aplicativo Notes comigo. Agora você tem um projeto
funcional completo
e, o mais importante,
entende a
base por trás dele. Espero que você esteja orgulhoso do
que criou. Em nossa próxima aula,
criaremos algo novo, algo empolgante
e
algo que levará suas
habilidades de flutter ainda Nos vemos na próxima aula.
Flutter Sensei, Teaching Flutter from Scratch
